body{
	padding:0;
	margin:0;
}
#wrapper{
	max-width:750px;
	margin:0 auto;
	background-color:#fff;
}

#upform{
	text-align:center;
}

/*テキストボックスのＩＭＥのＯＮ ＯＦＦ -----------------------------*/
.imeoff{ ime-mode: disabled;}
.imeon {ime-mode: active;}

/* タイトル*****************************************************/
h3.title{
	color:#fff;
	/*opacity:0.9;*/
	font-size:18px;
	font-weight:bold;
	padding:10px;
	margin:10px 5px 0 5px;
	border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
   -moz-border-radius: 10px;   /* Firefox用 */

	}
.bgkimidori{background-color:#5BA900;}
.bgaka{background-color:#FF075F;}	
.bgao{background-color:#31B6D7;}
.bgorengi{background-color:#EDAC2E;}
.bgmidori{background-color:#1C5201;}
.bgmurasaki{background-color:#DF7EFB;}
.bgusumidori{background-color:#5BA900;}


/* ○１○２　などの白抜きの黒文字 ---------------------- */
span.step{
	color:#333;
	font-size:18px;
	font-weight:bold;
	padding:0 5px;
	font-weight:bold;
	background-color:#fff;
	border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
   -moz-border-radius: 10px;   /* Firefox用 */
   position:absolute;
   left:5px;
}

/* 各カラーの枠の基本デザイン ************************************ */
header{
	width:100%;
	padding:10px;
	font-size:18px;
	text-align:left;
	border-radius: 0 0 10px 10px;
	margin:0 0 20px 0;
	color:#fff;
}
/* ヘッダー下部の小さい文字の枠 */
header h5{
	font-size:12px;
	font-weight:normal;
	padding:3px 10px 0 3px;
	margin:5px 0 0 0;
	border-top:1px solid #eee;
}
.naiyou{
	margin:10px;
	padding:0px;
	line-height:1.5em;
	font-size:15px;
	letter-spacing:0.05em;
	border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
   -moz-border-radius: 10px;
   width:95%;
}
.naiyou h4{
	margin:0 0 10px 0;
	border-radius: 10px 10px 0 0;
	text-align:center;
	padding:5px 5px 5px 20px;
	position:relative;
}
.kiji{
	background-color: #fafafa;
	padding:10px 10px;
	margin:0 10px;
	line-height:1.5em;
	font-size:15px;
	letter-spacing:0.05em;
	border-bottom:#888 solid 2px;
	border-right:#888 solid 2px;
		border-radius: 10px;        /* CSS3草案 */  
   -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
   -moz-border-radius: 10px;   /* Firefox用 */  
}
/* 矢印画像 */
.yajirusi{

}

/* == ここにパソコンよう画面のCSS ====================================================== パソコン用ここから */
@media screen and (min-width: 768px) {
	.niretu{
		width:45%;
		display:inline-block;
		margin:10px;
		vertical-align:top;
		text-align:left!important;
	}
	/* ページ遷移ボタンの枠 ---------------ここから */
	.senimenu{
		margin:0 10px 0 0;
		display:inline-block;
		position:absolute;
		right:10px;
		top:30px;
	}
	/* ページ遷移ボタンの ---------------ここから */
	.sansyozip{
	  padding: 3px 5px;
	  margin:10px auto;
	}
	/* ログアウトボタンの枠　--------------ここから */
	.logoutform{
		margin:0 10px 0 0;
		display:inline-block;
		position:absolute;
		right:10px;
	}
}
/* == ここにパソコンよう画面のCSS ====================================================== パソコン用ここまで */

/*　== ここにスマホ用画面のCSS ======================================================= スマホ用　ここから */
@media screen and (max-width:768px) {
	.niretu{
		width:95%;
		margin:10px;
		text-align:left!important;
	}
	/* ページ遷移ボタンの枠 ---------------ここから */
	.senimenu{
		display:block;
		margin:5px auto;
	}
	/* ページ遷移ボタンの ---------------ここから */
	.sansyozip{
	  padding: 10px;
	  margin:5px 10px;
	}
	/* ログアウトボタンの枠　--------------ここから */
	.logoutform{
		margin:0 10px 0 0;
		display:inline-block;
		position:absolute;
		right:10px;
	}
	/*フログアウトボタン*/
	#logoutbt{
		padding:10px;
	}
}
/*　== ここにスマホ用画面のCSS ======================================================= スマホ用　ここまで */

/* ページ遷移ボタンの ---------------ここから */
.sansyozip{
  text-decoration: none;
  color: #333;
  font-size:14px;
  background: #EAFBB7;/*背景色*/
  border-bottom: solid 2px #CEE36C;/*少し濃い目の色に*/
  border-radius: 15px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  cursor: pointer;
}
.sansyozip:active {
  border-bottom: solid 2px #EAFBB7;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
/* ページ遷移ボタンの ---------------ここまで */

 
/* ファイル選択　============================================ */
.sentaku{
    background: #D4F5FD;
	border:2px solid #7DE4FE;
}
.sentaku h4{
    background: #7DE4FE;
}

/* ファイル選択ボタン　-------------------- ここから */
.uphako{
	margin:10px;
	max-width:350px;
	display:inline-block;
	position:relative;
}
.sansyo{
  padding: 10px;
  text-decoration: none;
  color: #333;
  background: #A7E4F3;/*背景色*/
  border-bottom: solid 2px #6AC7DE;/*少し濃い目の色に*/
  border-radius: 10px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size:15px;
  margin:10px auto;
  cursor: pointer;
}
.sansyo:active {
  border-bottom: solid 2px #56D8F8;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


.formFile{

}
.formFile input[type="file"]{
	display:block;
	position:absolute;
	top:-10px;
	width:100%;
	height:60px;
	opacity:0;
	background-color:#ffe;
}
.sentakusita{
  display:block;
  margin-top:10px;
  font-size: 12px;
  margin-left: 5px;
}
/* ファイル選択ボタン　-------------------- ここまで */


/* ファイルアップ　============================================- */
.appurodo{
	background-color:#FEDBBA;
	border:2px solid #FBB962;
	text-align:center;
}
.appurodo h4{
	background-color:#FBB962;
}

/* アップロードボタン ----------------- */
.bthozon{
  display: inline-block;
  padding: 1em 2em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 10px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size:17px;
  margin:10px auto;
}
.bthozon:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


/* ファイル確認　================================================ */
.kakunin{
	background-color:#FCFBD2;
	border:2px solid #FCE370;
}
.kakunin h4{
	background-color:#FAE274;
}
.txbox03{
	border:0;
}

/* 確認ボタン ------------------ */
.kakubt{
  display: inline-block;
  padding: 3px 20px;
  text-decoration: none;
  color: #333;
  background: #EDE04E;/*背景色*/
  border-bottom: solid 2px #D1C650;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: normal;
  font-size:15px;
  margin:5px auto;
}
.kakubt:active {
  border-bottom: solid 2px #EDE04E;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/* 削除ボタン ----------------- */
.dellbt{
  display: inline-block;
  padding: 3px 20px;
  text-decoration: none;
  color: #333;
  background: #FDBFE4;/*背景色*/
  border-bottom: solid 2px #E6A9CD;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: normal;
  font-size:15px;
  margin:5px auto;
}


/* テキストコピー　================================================ */
.kopimoji{
	background-color:#DFFDD1;
	border:2px solid #72DD43;
	text-align:center;
}
.kopimoji h4{
	background-color:#72DD43;
}
/* コピーボタン ----------------- */
.copybt{
  display: inline-block;
  padding: 1em 2em;
  text-decoration: none;
  color: #FFF;
  background: #5BA900;/*背景色*/
  border-bottom: solid 2px #498305;/*少し濃い目の色に*/
  border-radius: 10px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size:17px;
  margin:10px auto;
}
.copybt:active {
  border-bottom: solid 2px #5BA900;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}




/* 利用方法文章内　============================================ */
/*ファイル選択ボタンの色*/
.bluebt{
	background-color:#A7E4F3;
	padding :2px 5px;
	font-weight:bold;
}
/*アップロードボタンの色*/
.orangebt{
	background-color:#fd9535;
	padding :2px 5px;
	font-weight:bold;
}
/*確認ボタンの色*/
.kiirobt{
	background-color:#EDE04E;
	padding :2px 5px;
	font-weight:bold;
}
/*削除ボタンの色*/
.pinkbt{
	background-color:#FDBFE4;
	padding :2px 5px;
	font-weight:bold;
}
/*コピーボタンの色*/
.midoribt{
	background-color:#5BA900;
	padding :2px 5px;
	font-weight:bold;
}

/* フッター******************************************************** */
.footter{
	text-align:center;
	font-size:12px;
	padding:10px;
	color:#333;
	margin:15px 0 0 0;
}

/*ダウンロードページの表　************************************************ */
/* == ここにパソコンよう画面のCSS ====== パソコン用ここから */
@media screen and (min-width: 768px) {
	.hyou01{
	width:60%;
	display:inline-block;
	font-size:14px;
	}
}
/*　== ここにスマホ用画面のCSS ======== スマホ用　ここから */
@media screen and (max-width:768px) {
	.hyou01{
	max-width:100%;
	font-size:14px;
	}
	.downwaku{
		text-align:center;
	}
}
/* ダウンロードファイルひとつひとつの枠 --- */
.downwaku{
	border:1px solid #aaa;
	border-radius: 10px;/*角の丸み*/
}

.hyou01 th{
	background-color:#F3FFBB;
	text-align:left;
	padding:3px 5px;
	width:120px;
}
.hyou01 td{
	padding:3px 5px;
}
/* ダウンロードボタン ----- */
.btdown{
	display: inline-block;
	text-decoration: none;
	color: #FFF;
	background: #fd9535;/*背景色*/
	border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
	border-radius: 10px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size:17px;
	margin:3px auto;
	padding :7px 10px;
	font-weight:bold;
}
.btdown:active{
	display: inline-block;
	text-decoration: none;
	color: #FFF;
	background: #fd9535;/*背景色*/
	border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
	border-radius: 10px;/*角の丸み*/
	box-shadow: none;
	font-size:17px;
	margin:3px auto;
	padding :7px 10px;
	font-weight:bold;
}
/* ダウンロードページのフッター */
.dwfoot{
	margin:10px 0 0 0;
	color:#fff;
	text-align:center;
	padding:5px;
	border-radius:10px;
}
.dwfoot a{
	text-decoration:none;
	color:#fff;
	padding:0 10px;
}
.dwfoot a:hover{
	border-radius:5px;
	color:#333;
	background-color:#fff;
}