@charset "UTF-8";

@media screen and (min-width:768px) {
	
	
	header {
		height: 114px;
	}
	header#thanks {
		height: 160px;
	}
	
	div#form_container {
		width: 900px;
		margin: 0 auto;
	}
	
	div#form_confirm_container {
		width: 900px;
		margin: 0 auto;
	}
	
	h1 {
		font-size: 3rem;
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}
	
	div#form_container h2 {
		text-align: center;
		margin-top:50px;
	}
	
	div#form_container ol {
		list-style: none;
		text-align: center;
		margin-top:50px;
		height: 130px;
	}
	
	div#form_container ol li {
		position: relative;
		display: inline-block;
		width: 240px;
		height: 120px;
		border: 1px solid #ccc;
		margin: 0 20px;
		padding: 40px 0 0;
		font-size: 1.2em;
		font-weight: bold;
		background: #fffff6;
		box-shadow: 6px 6px #666;
	}
	
	div#form_container ol li:before {
		display: block;
		position: absolute;
		top: -30px;
		left: 79px;
	}
	
	div#form_container ol li:nth-of-type(1):before {
		content: url(../img/entry/entry_step1.png);
	}
	
	div#form_container ol li:nth-of-type(2):before {
		content: url(../img/entry/entry_step2.png);
	}
	
	div#form_container ol li:nth-of-type(3):before {
		content: url(../img/entry/entry_step3.png);
	}
	
	div#form_container ol li span {
		background: linear-gradient(transparent 65%, #fce565 65%);
	}
	
	ul.errs {
		background: #f00;
		font-weight: bold;
		color: #fff;
		text-align: center;
		font-size: 1.2em;
		padding: 15px;
		margin-top:50px;
	}
	
	form {
		margin-top:70px;
	}
	
	form dl#form_area {
		width: 900px;
		font-size: 1.2em;
	}
	
	form dl#form_area dt {
		float: left;
		position: relative;
		z-index: 10;
		width: 200px;
		height: 60px;
		margin-top: 20px;
	}
	
	form dl#form_area dt.required:before {
		content: '必須';
		display: block;
		position: absolute;
		z-index: 100;
		top: -.7rem;
		left: .2rem;
		color: #fff;
		font-size: 0.7rem;
		font-weight: bold;
		padding: 2px;
		background: #f33;
	}
	
	form dl#form_area dt:first-of-type {
		margin-top: 0;
	}
	
	form dl#form_area dt span {
		position: relative;
		display: inline-block;
		padding: 7px 10px;
		width: 180px;
		color: #fff;
		text-align: center;
		font-weight: bold;
		background: #6c6;
	}

	form dl#form_area dt span:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		margin-top: -5px;
		border: 5px solid transparent;
		border-left: 10px solid #6c6;
	}
	
	form dl#form_area dt span.err {
		background: #f00;
	}

	form dl#form_area dt span.err:before {
		border-left: 10px solid #f00;
	}
	
	form dl#form_area dd {
		float: left;
		width: 680px;
		min-height: 60px;
		margin-top: 20px;
		margin-left: 20px;
	}
	
	div#form_confirm_container form dl#form_area dd span {
		display: block;
		padding: 6px;
	}
	
	form dl#form_area dd:first-of-type {
		margin-top: 0;
	}
	
	form dl#form_area dd:last-child {
		border-bottom: none;
	}
	
	form dl#form_area dd.radio {
		padding-top: 5px;
	}
	
	div#form_confirm_container form dl#form_area dd.radio span {
		padding: 2px 6px;
	}
	
	form dl dd textarea {
		height: 150px;
	}
	
	form dl#form_area dd.privacy span {
		display: block;
		margin-top: 15px;
	}
	
	div#form_confirm_container form dl#form_area dd.privacy span {
		padding: 2px 6px;
		margin-top: 5px;
	}
	
	form dl#form_area dd.privacy dl {
		height: 150px;
		border: 1px solid #ccc;;
		overflow: scroll;
		font-size: 1rem;
	}
	
	form dl#form_area dd.privacy dl dt {
		clear: both;
		width: 100%;
		height: auto;
		font-weight: bold;
		margin: 5px 0 0;
		padding: 5px 10px;

	}
	
	form dl#form_area dd.privacy dl dd {
		clear: both;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 5px 10px;
	}
	
	form input[type="text"],
	form input[type="date"],
	form input[type="datetime"],
	form input[type="email"],
	form input[type="number"],
	form input[type="search"],
	form input[type="time"],
	form input[type="url"],
	form textarea,
	form select 
	{
		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
		outline: none;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		width: 100%;
		background: #fff;
		border: 1px solid #ccc;
		padding: 12px;
		color: #555;
		font: 95% Arial, Helvetica, sans-serif;
	}
	
	form input[type="text"]:focus,
	form input[type="date"]:focus,
	form input[type="datetime"]:focus,
	form input[type="email"]:focus,
	form input[type="number"]:focus,
	form input[type="search"]:focus,
	form input[type="time"]:focus,
	form input[type="url"]:focus,
	form textarea:focus,
	form select:focus{
		box-shadow: 0 0 5px #43D1AF;
		padding: 12px;
		border: 1px solid #43D1AF;
	}
	
	form div.submit {
		text-align: center;
	}

	form input[type="submit"],
	form input[type="button"] {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		width: 30%;
		padding: 3%;
		background: #6c6;
		color: #fff;
		font-size: 2em;
		font-weight: bold;
		margin: 50px 10px 0;
		display: inline-block;
	}
	
	form input[type="button"]{
		width: 15%;
		background: #CCC;
	}
	
	form input[type="submit"]:hover {
		background: #5a5;
	}
	
	form input[type="button"]:hover {
		background: #aaa;
	}
	
	/* 送信完了ページ */
	
	div#form_container h1.thanks {
		margin-top: 100px;
	}
	
	div#form_container p.thanks {
		width:;
		border: 1px solid #ccc;
		margin: 30px auto;
		padding: 30px;
		font-size: 1.5em;
		font-weight: bold;
		text-align: center;
		line-height: 2em;
		background: #fffff6;
		box-shadow: 6px 6px #666;
	}
	
	div#form_container p.thanks span {
		color: #f33;
	}
	
}

@media screen and (max-width:767px) {
	
	div#form_container {
		width: 100%;
		/*background: #fffff6;*/
	}
	
	div#form_confirm_container {
		width: 100%;
	}
	
	h1 {
		width: 100%;
		height: auto;
		font-weight: bold;
		font-size: 2.4rem;
		text-align: center;
		margin-top: 0;
		padding: 20px;
		background: url("../img/detail/copy_bg_sp.png") center center no-repeat;
		background-size: 100% 100%;
	}
	
	h2 {
		width: 100%;
		height: auto;
		text-align: center;
		margin-top: 20px;
	}
	
	div#form_container ol {
		width: 90%;
		list-style: none;
		margin: 5px auto 0;
	}
	
	div#form_container ol li {
		position: relative;
		width: 100%;
		text-align: center;
		border: 1px solid #ccc;
		margin: 15px 0 0;
		padding: 7px 0 5px;
		font-size: 1.2em;
		font-weight: bold;
		background: #fffff6;
	}
	
	div#form_container ol li:first-of-type {
		margin-top: 0;
	}
	
	div#form_container ol li br {
		display: none;
	}
	
	div#form_container ol li:before {
		display: block;
		position: absolute;
		top: -1rem;
		left: .5rem;
	}
	
	div#form_container ol li:nth-of-type(1):before {
		content: url(../img/entry/entry_step1_sp.png);
	}
	
	div#form_container ol li:nth-of-type(2):before {
		content: url(../img/entry/entry_step2_sp.png);
	}
	
	div#form_container ol li:nth-of-type(3):before {
		content: url(../img/entry/entry_step3_sp.png);
	}
	
	ul.errs {
		background: #f00;
		font-weight: bold;
		color: #fff;
		text-align: center;
		font-size: 1.2em;
		padding: 15px;
		margin-top:20px;
	}
	
	form {
		margin-top:20px;
	}
	
	form dl#form_area {
		width: 95%;
		margin: 0 auto;
		background: #fffff6;
		padding: 20px;
	}
	
	form dl#form_area dt {
		position: relative;
		z-index: 10;
		margin-top: 20px;
	}
	
	div#form_confirm_container form dl#form_area dt {
		margin-top: 10px;
	}
	
	form dl#form_area dt:first-of-type {
		margin-top: 0;
	}
	
	div#form_confirm_container form dl#form_area dt:first-of-type {
		margin-top: 0;
	}
	
	form dl#form_area dt.required {
		margin-top: 30px;
	}
	
	div#form_confirm_container form dl#form_area dt.required {
		margin-top: 20px;
	}
	
	form dl#form_area dt.required:before {
		content: '必須';
		display: block;
		position: absolute;
		z-index: 100;
		top: -1.5rem;
		left: -1.5rem;
		color: #fff;
		font-size: 1.2rem;
		font-weight: bold;
		padding: 2px 4px;
		background: #f33;
	}
	
	form dl#form_area dt span {
		position: relative;
		display: inline-block;
		width: 130px;
		padding: 7px 7px;
		color: #fff;
		text-align: center;
		font-size: 1.5rem;
		font-weight: bold;
		background: #6c6;
	}
	
	form dl#form_area dt span {
		width: 150px;
	}

	form dl#form_area dt span:before {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border: 5px solid transparent;
		border-top: 10px solid #6c6;
	}
	
	form dl#form_area dt span.err {
		background: #f00;
	}

	form dl#form_area dt span.err:before {
		border-top: 10px solid #f00;
	}
	
	form dl#form_area dd {
		width: 100%;
		min-height: 50px;
		margin-top: 20px;
	}
	
	div#form_confirm_container form dl#form_area dd {
		min-height: 30px;
		margin-top: 10px;
	}
	
	div#form_confirm_container form dl#form_area dd span {
		display: block;
		padding: 6px 0;
		font-size: 1.8rem;
	}
	
	div#form_confirm_container form dl#form_area dd span.comment {
		font-size: 1.3rem;
	}
	
	form dl#form_area dd:last-child {
		border-bottom: none;
	}
	
	form dl#form_area dd.radio {
		font-size: 1.5rem;
		margin-top: 15px;
		min-height: 30px;
	}
	
	form dl dd textarea {
		height: 150px;
	}
	
	form dl#form_area dd.privacy span {
		display: block;
		margin-top: 15px;
		font-size: 1.5rem;
	}
	
	form dl#form_area dd.privacy dl {
		height: 100px;
		border: 1px solid #ccc;;
		overflow: scroll;
		font-size: 1rem;
		background: #fff;
	}
	
	form dl#form_area dd.privacy dl dt {
		clear: both;
		width: 100%;
		height: auto;
		font-weight: bold;
		margin: 5px 0 0;
		padding: 5px 10px;

	}
	
	form dl#form_area dd.privacy dl dd {
		clear: both;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 5px 10px;
	}
	
	form input[type="text"],
	form input[type="date"],
	form input[type="datetime"],
	form input[type="email"],
	form input[type="number"],
	form input[type="search"],
	form input[type="time"],
	form input[type="url"],
	form textarea,
	form select 
	{
		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
		outline: none;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		width: 100%;
		background: #fff;
		border: 1px solid #ccc;
		padding: 12px;
		color: #555;
		font: 95% Arial, Helvetica, sans-serif;
	}
	
	form div.submit {
		text-align: center;
	}

	form input[type="submit"],
	form input[type="button"] {
		width: 50%;
		padding: 3%;
		background: #6c6;
		color: #fff;
		font-size: 1.5em;
		font-weight: bold;
		margin: 30px 5px 20px;
		display: inline-block;
	}
	
	form input[type="button"]{
		width: 30%;
		background: #CCC;
	}
	

	/* iOSでのデフォルトのボタンのスタイルをリセット */
	form input[type="submit"],
	form input[type="button"] {
		border-radius: 0;
		-webkit-box-sizing: content-box;
		-webkit-appearance: button;
		appearance: button;
		border: none;
		box-sizing: border-box;
		cursor: pointer;
	}
	
	form input[type="submit"]::-webkit-search-decoration,
	form input[type="button"]::-webkit-search-decoration {
		display: none;
	}
	
	form input[type="submit"]::focus,
	form input[type="button"]::focus {
		outline-offset: -2px;
	}
	
	div#form_container p.thanks {
		width: 95%;
		margin: 30px auto 20px;
		font-size: 1.1em;
		font-weight: bold;
		text-align: center;
		line-height: 2em;
	}
	
	div#form_container p.thanks span {
		color: #f33;
	}
}

/*border: 1px solid #333;*/