@charset "UTF-8";

@import url(reset.css);

.cf:after {
	content: "";
	clear: both;
	display: block;
}


body {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "HG明朝E", serif; 
	font-size: 90%;
	line-height: 1;
	color: #606060;
}



/* ========== 共通 ========== */
/* リンク */
a { text-decoration: none; color: #606060; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
a:hover { color: #aeaeae;  }

a.pic:hover { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; -ms-filter: "alpha(opacity=70)"; }

a.grayTxt { color: #606060; text-decoration: none; }
a.grayTxt:hover { color: #aeaeae; }

a.txtBox { color: #606060; text-decoration: none; display: block; padding: 7px 10px 5px; border: solid 1px #777; text-align: center; }
a.txtBox:hover { color: #aeaeae; border-color: #aeaeae; }
a.txtBox.act { background-color: #f0f0f0; }


/* テキスト */
.txtFontB { font-family: 'PT Sans', sans-serif; font-weight: 700; }
.txtFontR { font-family: 'PT Sans', sans-serif; font-weight: 400; }

.txtGothic { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', Verdana, Arial, sans-serif; }

.txtRed { color: #ff6496; }
.txtGray { color: #999; }

.txtS { font-size: 80%; }


/* 全体 */
.wrapper { max-width: 1300px; margin: 0 auto; }


/* パーツ */
.forSP { display: none; }
span.break { display: block; }


/* ========== ヘッダ ========== */
header { position: fixed; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.9); width: 100%; z-index: 200; }
header div.headerArea { padding: 25px 8px; border-bottom: 1px solid #dedede; max-width: 1300px; margin: 0 auto; box-sizing: border-box; }
header img.logo { width: auto; height: 80px; }



/* ========== コンテンツ部 ========== */
.inputContWrapper { margin-top: 131px; padding: 60px 8px 0; }

.inputContWrapper div.inputArea { margin: 0 auto; max-width: 640px; }
div.inputArea div.titleArea { text-align: center; }
div.inputArea div.titleArea p.pageTit { font-size: 220%; }
div.inputArea div.titleArea p.inputNote { margin-top: 10px; font-size: 90%; }
div.inputArea div.titleArea p.inputErr { margin-top: 25px; font-size: 90%; line-height: 1.5; color: black; }
div.inputArea ul.inputList > li { margin-top: 36px; }
div.inputArea ul.inputList > li p.inputTitMain { margin-bottom: 12px; }
div.inputArea ul.inputList > li p.inputTit { margin-bottom: 8px; }
div.inputArea ul.inputList > li p.inputTit.err { color: black; }
div.inputArea ul.inputList > li p.inputConf { margin-top: 25px; font-size: 120%; line-height: 1.5; }
div.inputArea ul.inputList > li p.inputConfPic { margin-top: 25px; width: 620px; height: 620px; background-position: center center; background-repeat: no-repeat; background-size: cover; }

div.inputArea ul.inputList > li input.txt { width: 100%; height: 32px; border: solid 1px #c3c3c3; font-size: 120%; box-sizing: border-box; color: #666; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
div.inputArea ul.inputList > li input.err { border: solid 1px black;}
div.inputArea ul.inputList > li input.txt.age { width: 48px; }
div.inputArea ul.inputList > li input.txt.zip { width: 48%; float: left; }
div.inputArea ul.inputList > li input.txt.date { width: 48%; float: left; background: white url(../images/icon_calendar.png) 98% 50% no-repeat; background-size: 24px 24px; }
div.inputArea ul.inputList > li input.txt.row2 { margin-top: 15px; }

div.inputArea ul.inputList > li label.selectWrap { overflow: hidden; background: white url(../images/icon_arrow_pulldown.png) 96% 50% no-repeat; height: 32px; background-size: 16px 8px; border: solid 1px #c3c3c3; box-sizing: border-box; }
div.inputArea ul.inputList > li label.pref { width: 48%; float: right; }
div.inputArea ul.inputList > li label.size { width: 48%; display: block; }
div.inputArea ul.inputList > li label.err { border: solid 1px black; }
label.selectWrap select { font-size: 100%; color: #666; padding: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 160%; border: none; background-color: transparent; }

div.inputArea ul.inputList > li textarea.cmnt { width: 100%; height: 150px; border: solid 1px #c3c3c3; font-size: 120%; box-sizing: border-box; color: #666; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
div.inputArea ul.inputList > li textarea.err { border: solid 1px black; }
div.inputArea ul.inputList > li textarea.cmnt.short { height: 90px; }

div.inputArea ul.note { margin-top: 8px; }
div.inputArea ul.note > li { margin-top: 5px; text-indent: -1.5em; margin-left: 1.5em; line-height: 1.35; font-size: 80%; }

div.inputArea ul.errMsg { margin-top: 8px; }
div.inputArea ul.errMsg > li { margin-top: 5px; line-height: 1.35; font-size: 90%; color: black; }

div.inputArea ul.inputList > li.btnArea { text-align: right; }
div.inputArea ul.inputList > li.btnArea input { color: white; background-color: #999; font-size: 108%; padding: 8px 50px; line-height: 1; border: none; letter-spacing: 0.1em; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; min-width: 200px; }
div.inputArea ul.inputList > li.btnArea input:hover { background-color: #777; }
div.inputArea ul.inputList > li.btnArea input.back { margin-right: 50px; }

div.inputArea div.thanks { line-height: 1.8; margin-top: 30px; text-align: center; }

input:placeholder-shown, textarea:placeholder-shown { font-size: 80%; color: #999; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-size: 80%; color: #999; }
input:-moz-placeholder, textarea:-moz-placeholder { font-size: 80%; color: #999; }
input::-moz-placeholder, textarea::-moz-placeholder { font-size: 80%; color: #999; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-size: 80%; color: #999; }



.uploadButton {
	display: inline-block;
	position: relative;
	overflow: hidden;
	background: #999;
	color: white;
	padding: 12px 20px 9px;
	cursor:pointer;
}
.uploadButton:hover { background: #777; }
.uploadButton.err { background: black; }
.uploadButton input[type=file] {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:pointer;
	opacity:0;
}
.uploadValue {
	display: none;
	margin: 10px 0 0 0; 
	background: rgba(255,255,255,0.2);
	padding: 3px 5px 2px;
	color: white;
	border: none;
	border-radius: 0;
}





/* ========== フッタ ========== */
footer { margin-top: 80px; border-top: solid 1px #dedede; padding: 30px 0 40px; position: relative; z-index: 100; background-color: white; }
footer ul.footLinks { float: left; }
footer ul.footLinks li { float: left; margin-left: 30px; font-size: 90%; }
footer p.copy { float: right; letter-spacing: 0.2em; font-size: 75%; }





@media only screen and (max-width: 767px) {

	/* ========== 共通 ========== */
	/* リンク */
	a.txtBox { padding: 5px 50px 5px; font-size: 90%; }

	/* パーツ */
	.forSP { display: block; }
	.forPC { display: none; }

	span.break { display: inline; }
	span.breakSP { display: block; }

	/* 全体 */
	div.wrapper { max-width: none; width: 94%; }



	/* ========== ヘッダ ========== */
	header div.headerArea { padding: 12px 0; max-width: none; width: 94%; }
	header img.logo { width: auto; height: 62px; }



	/* ========== コンテンツ部 ========== */
	.inputContWrapper { margin-top: 107px; padding: 0 0 0; }

	.inputContWrapper div.inputArea { padding-left: 0; width: 100%; }
	div.inputArea div.titleArea p.pageTit { font-size: 180%; }
	div.inputArea ul.inputList > li p.inputTit { margin-bottom: 5px; font-size: 90%; }
	div.inputArea ul.inputList > li { margin-top: 24px; }
	div.inputArea ul.inputList > li p.inputConfPic { width: 100%; height: 48vh; }
	div.inputArea ul.inputList > li input.txt { font-size: 100%; }
	div.inputArea ul.inputList > li textarea.cmnt { font-size: 100%; }

	div.inputArea ul.inputList > li.btnArea input { width: 48%; padding: 8px 8px; text-align: center; min-width: 0; }
	div.inputArea ul.inputList > li.btnArea input.back { margin-right: 4%; }





	/* ========== フッタ ========== */
	footer { margin-top: 40px; padding: 20px 0 40px; text-align: center; }
	footer ul.footLinks { float: none; display: inline-block; font-size: 90%; }
	footer ul.footLinks li:first-child {margin-left: 0; }
	footer p.copy { float: none; margin-top: 20px; font-size: 60%; line-height: 1.35; }



}