/*================================================
 *  ファイルアップローダー
 ================================================*/

	/* グローバルナビゲーション */
	@media print, screen and (min-width:768px) {
		/* 1段目 横メニュー3分割 */
		nav ul.gnav > li,
		nav ul.gnav > li:first-child {
			/* width:17%;からwidth:20%;へ変更、ファイルアップローダー用（width:33%;）に変更。 */
			width:33%;
		}
	}

	/* 名前入力の【必須】の文字を赤文字にするため。  */
	.required {
		color: #ff0000;
	}

	/* 名前入力とファイル選択のエラーメッセージを赤文字にするため。  */
	.error-message {
		color: #ff0000;
	}

	/* hiddenpages2.php で写真を中央寄せで表示するために追加。  */
	.photo-center {
		text-align: center;
	}

	/* ファイル選択ボタンのデザイン */
	.file-btn {
		display: inline-block;
		padding: 0.1em 0.3em;
		border: 1px solid #767676;;
		border-radius: 3px;
		background: #efefef;
		color: #000;
		font-size: 20px;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	/* ファイル選択ボタンにマウスオーバーしたときの動作 */
	.file-btn:hover {
		transform: translate(1px, 1px);
		opacity: 0.5;
	}

	/* ファイル選択ボタンをクリックしたときの動作 */
	.file-btn:active {
		transform: translate(5px, 5px);
	}

	/* 入力エリア */
	#inputFile {
		text-align: left;
	}

	/* ドラッグ及びペーストエリア  */
	#dropArea {
		padding: 30px 10px 10px;
		color: #888;
		font-size: 20px;
		border: 2px dashed #777777;
		background: rgba(22, 165, 191, 0.1);
		transition: all 0.25s cubic-bezier(0.21, 0.51, 0.51, 1);
		}

	/* コピー&ペースト待機状態   16a5bf   */
	#dropArea:focus:not(.dragover) {
		border: 2px solid #000;
		background: rgba(22, 165, 191, 0.15);
	}

	/* ドラッグ中 */
	#dropArea.dragover {
		border: 2px solid #000;
		background: rgba(22, 165, 191, 0.7);
	}

	/* dropAreaをクリックした時の動作。 dropAreaが動く。 dropAreaの中のファイル選択ボタン（file-btn）を押しても dropArea は動かない。 */
	#dropArea.press {
		transform: translate(3px, 3px) scale(0.98);
		background: rgba(22, 165, 191, 0.7);
	}


/*================================================
 *  ローディング画面
 ================================================*/
	#overlay{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height:100%;
		display: none;
		background: rgba(0,0,0,0.6);
		opacity: 0;
		transition: opacity 0.1s;
	}
	#overlay.show {
		opacity: 1;
	}
	.cv-copy {
		position:absolute;
		width:100%;
		margin-top:30vh; 
		text-align:center; 
	}
	.cv-copy p {
		color:#fff;
		margin:0 0 0 0;
	}
	.cv-spinner {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.spinner {
		width: 80px;
		height: 80px;
		border: 4px #ddd solid;
		border-top: 4px #999 solid;
		border-radius: 50%;
		animation: sp-anime 0.8s infinite linear;
	}
	@keyframes sp-anime {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(359deg); }
	}
	.is-hide{
		display:none;
	}