@charset "utf-8";

html {
	color: #333333;
	font-size: 16px;
}
@media screen and (max-width: 768px) {
	html {
		font-size: 14px;
	}
}

html,body{
	border: 0;
	margin: 0;
	max-width: 2000px;
	padding: 0;
	width: 100%;
}
	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		vertical-align: baseline;
		background: transparent;
	}

/****************************************************************
// body【 body 】												|
****************************************************************/
	body{
		font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
		line-height: 1.5em;
		background-color: white;
		text-align: center;
	}

/****************************************************************
// a【 a 】														|
****************************************************************/
	a {
		text-decoration: none;
	}

/****************************************************************
// img【 img 】													|
****************************************************************/
	img {
		max-width: 100%;
	}


	span.colorRed {
		color: #ff0000;
	}
	br.br_sp_only {
		display: none;
	}
	@media screen and (max-width: 480px) {
		br.br_sp_only {
			display: block;
		}
	}

/****************************************************************
// clearfix														|
****************************************************************/
	/* For IE 6/7 (trigger hasLayout) */
	.clearfix {
		zoom:1;
	}
	/* For modern browsers */
	.clearfix:before,
	.clearfix:after {
		content:"";
		display:table;
	}
	.clearfix:after {
		clear:both;
	}

/****************************************************************
// 全ての一番外枠												|
****************************************************************/
	div#out-container {
	}
		div#container-inner {
			margin: 0 auto;
			max-width: 1000px;
		}

/****************************************************************
// ヘッダ外枠													|
****************************************************************/
	div#header {
	}
	/****************************************************************
	// ヘッダロゴ透過												|
	****************************************************************/
		div#header h1 a:hover img {
			filter:alpha(opacity=50);
			-moz-opacity: 0.5;
			opacity: 0.5;
		}
			div#header h1 img.logo-sp {
				display: none;
			}
/****************************************************************
// タイトル														|
****************************************************************/
	div#title-outer {
		background-color: #F57C06;
	}
		div#title-inner {
			color: #fff;
			font-size: 1.5rem;
			padding: 1em;
			margin: 0 auto;
			max-width: 1000px;
		}

/****************************************************************
// コンテンツ外枠												|
****************************************************************/
	div#container-inner {
	}
	@media screen and (max-width: 768px) {
		div#container-inner {
			margin: 0 auto;
			width: 98%;
		}
	}
	/****************************************************************
	// コンテンツ上部テキスト部分（入力画面のみ）					|
	****************************************************************/
		div#msg-text01 {
			font-size: 0.8rem;
			text-align: left;
			padding-top: 2em;
		}

	/****************************************************************
	// ステップ部分外枠												|
	****************************************************************/
		div#step-outer {
			display: -webkit-flexbox;
			display: -moz-flexbox;
			display: -ms-flexbox;
			display: -o-flexbox;
			display: flexbox;
			display: flex;
			justify-content: space-around;
			margin: 3em auto;
			width: 80%;
		}
		@media screen and (max-width: 768px) {
			div#step-outer {
				justify-content: space-between;
				width: 100%;
			}
		}
		/****************************************************************
		// ステップ１部分												|
		****************************************************************/
			div#step-item {
				border: 1px solid #f57c06;
				font-size: 0.9rem;
				width: 18%;
				padding: 1em;
			}
			@media screen and (max-width: 640px) {
				div#step-item {
					padding: 0.3em;
					width: 22%;
				}
			}
			/****************************************************************
			// 日本語部分													|
			****************************************************************/
				div#step-item span {
					font-size: 1.1rem;
					font-weight: bold;
				}
				@media screen and (max-width: 640px) {
					div#step-item span {
						font-size: 0.9rem;
					}
				}
				@media screen and (max-width: 480px) {
					div#step-item span {
						font-size: 0.8rem;
					}
				}

		/****************************************************************
		// ステップ　ON　OFF背景										|
		****************************************************************/
			div.step-item-on {
				color: #fff;
				background-color: #f57c06;
			}
			div.step-item-off {
				color: #e46ca2;
				background-color: #fff;
			}

		/****************************************************************
		// 入力フォームエラーメッセージ表示枠							|
		****************************************************************/
			#error-msg-outer {
				text-align: left;
				margin-bottom: 2em;
			}

		/****************************************************************
		// テキスト入力部分の２バイト文字入力状態						|
		****************************************************************/
			.ime-mode-active {
				ime-mode: active;
			}

	/****************************************************************
	// テーブル部分フォーム											|
	****************************************************************/
		form {
			margin-bottom: 2em;
		}
		form#formId .error {
			color: #f00;
			font-weight: bold;
		}

		/****************************************************************
		// テーブル部分外枠												|
		****************************************************************/
			div#form-outer {
				margin-bottom: 2em;
			}
			/****************************************************************
			// 1項目分外枠													|
			****************************************************************/
				dl#form-outer-dl {
					border-top: 1px solid #f57c06;
					border-left: 1px solid #f57c06;
					border-right: 1px solid #f57c06;
					background-color: #fcd9b8;
					text-align: left;
				}
				/****************************************************************
				// 最後の項目（下線をつける）									|
				****************************************************************/
					dl#form-outer-dl.last-dl {
						border-bottom: 1px solid #f57c06;
					}
				/****************************************************************
				// 項目の下にマージン											|
				****************************************************************/
					dl#form-outer-dl.marginbuttom-dl {
						margin-bottom: 1em;
					}

					/****************************************************************
					// タイトル項目													|
					****************************************************************/
						dl#form-outer-dl dt {
							background-color: #fcd9b8;
							color: #000;
							clear: left;
							font-size: 1.2rem;
							float: left;
							line-height: 1.0em;
							padding: 1em 0.5em;
						}
						@media screen and (max-width: 768px) {
							dl#form-outer-dl dt {
								border-bottom: 1px solid #F57C06;
								float: none;
							}
						}
					/****************************************************************
					// 内容項目														|
					****************************************************************/
						dl#form-outer-dl dd {
							background-color: #fff;
							border-left: 1px solid #e46ca2;
							font-size: 1.2rem;
							line-height: 1.5em;
							margin-left: 16em;
							padding: 2.0em;
						}
						@media screen and (max-width: 768px) {
							dl#form-outer-dl dd {
								border-left: 0;
								margin-left: 0!important;
							}
						}

						/****************************************************************
						// 内容項目入力部品												|
						****************************************************************/
							dl#form-outer-dl dd input,
							dl#form-outer-dl dd textarea,
							dl#form-outer-dl dd select {
								font-size: 1.2rem;
								margin-bottom: 0.5em;
							}
							dl#form-outer-dl dd.dd100 input[type="text"],
							dl#form-outer-dl dd textarea {
								width: 100%;
							}
							@media screen and (max-width: 500px) {
								dl#form-outer-dl dd select#participation {
									font-size: 0.8rem;
								}
							}
							@media screen and (max-width: 420px) {
								dl#form-outer-dl dd select#participation {
									font-size: 0.7rem;
								}
							}

							dl#form-outer-dl dd.dd100 input[type="text"]#hope01,
							dl#form-outer-dl dd.dd100 input[type="text"]#hope02 {
								width: auto;
							}
							@media screen and (max-width: 480px) {
								dl#form-outer-dl dd.dd100 input[type="text"]#hope01 {
									width: 70%;
								}
							}

				div.form-chapter-title {
					font-size: 1.2rem;
					line-height: 1.5em;
					padding: 1.0em 0;
					text-align: center;
				}

		/****************************************************************
		// 「入力画面」下部ボタン外枠									|
		****************************************************************/
			div#input-step-button-outer {
				display: -webkit-flexbox;
				display: -moz-flexbox;
				display: -ms-flexbox;
				display: -o-flexbox;
				display: flexbox;
				display: flex;
				justify-content: flex-end;
			}

		/****************************************************************
		// 「確認画面」下部ボタン外枠									|
		****************************************************************/
			div#confirm-step-button-outer {
				display: -webkit-flexbox;
				display: -moz-flexbox;
				display: -ms-flexbox;
				display: -o-flexbox;
				display: flexbox;
				display: flex;
				justify-content: space-between;
			}
			/****************************************************************
			// 下部ボタンのマウスオーバー時									|
			****************************************************************/
				div.step-button-item-outer a:hover div.step-button {
					color: #f00;
				}
				/****************************************************************
				// 下部ボタン枠													|
				****************************************************************/
					div.step-button-item-outer {
						background-color: #e46ca2;
						width: 20%;
						color: #fff;
					}
					@media screen and (max-width: 768px) {
						div.step-button-item-outer {
							width: 25%;
						}
					}
					@media screen and (max-width: 640px) {
						div.step-button-item-outer {
							width: 35%;
						}
					}
					@media screen and (max-width: 480px) {
						div.step-button-item-outer {
							width: 45%;
						}
					}
					/****************************************************************
					// 下部ボタン枠（左サイドのみ）									|
					****************************************************************/
						div.step-button-item-outer-left {
							background-color: #b5b5b5;
						}
						/****************************************************************
						// 下部ボタン内枠（矢印＋文字）									|
						****************************************************************/
							div.step-button-item-inner {
								align-items: center;
								display: -webkit-flexbox;
								display: -moz-flexbox;
								display: -ms-flexbox;
								display: -o-flexbox;
								display: flexbox;
								display: flex;
								justify-content: space-between;
								padding: 1em;
							}
							/****************************************************************
							// 下部ボタン内枠（文字部分）									|
							****************************************************************/
								div.step-button {
									color: #fff;
									font-size: 1.2rem;
								}
							/****************************************************************
							// 下部ボタン内枠（矢印部分）									|
							****************************************************************/
								div.step-button-square {
								}

	/****************************************************************
	// 「完了画面」													|
	****************************************************************/
		div#complete-msg-outer {
		}
			div#complete-msg-text01 {
				font-size: 1.1rem;
				margin-bottom: 1em
			}
			div#complete-msg-text02 {
				color: #f00;
				font-size: 1.4rem;
				margin-bottom: 1em
			}
			div#complete-msg-text03 {
				font-size: 1.1rem;
				text-align: left;
				margin-bottom: 1em
			}
			div#complete-msg-text04 {
				color: #e46ca2;
				font-size: 1.0rem;
				text-align: left;
				margin-bottom: 3em
			}

/****************************************************************
// フッター外枠													|
****************************************************************/
	div#footer-outer {
		background-color: #F57C06;
		padding: 1em 0;
	}
	/****************************************************************
	// フッター内枠													|
	****************************************************************/
		div#footer-inner {
			color: #fff;
			margin: 0 auto;
			max-width: 1000px;
		}
		/****************************************************************
		// フッターアドレス連絡先外枠									|
		****************************************************************/
			div#address-contact-outer {
/*
				align-items: center;
				display: -webkit-flexbox;
				display: -moz-flexbox;
				display: -ms-flexbox;
				display: -o-flexbox;
				display: flexbox;
				display: flex;
				justify-content: center;
*/
			}
			@media screen and (max-width: 768px) {
				div#address-contact-outer {
					display: block;
				}
			}
			/****************************************************************
			// フッター　テキスト											|
			****************************************************************/
				div#address-text01,
				div#address-text02,
				div#address-text03 {
					font-size: 1.0rem;
				}
				@media screen and (max-width: 480px) {
					div#address-text01,
					div#address-text02,
					div#address-text03 {
						font-size: 0.8rem;
					}
				}
