@charset "utf-8";

/*-------------------------------------------------------------------------
	株式会社DYM
	Style Sheet for Common Setting (#contact)
	Date: 2015-01
	All content (c) RYNAPSE
-------------------------------------------------------------------------*/

/* =page structure
-------------------------------------------------------------------------*/
ol.step {
	position: absolute;
	top: 120px;
	right: 20px;
	}

form p { text-align: left; }

form p.btn {
	position: relative;
	margin: 0;
	text-align: right;
	}

legend {
	position: absolute;
	font-size: 0;
	text-indent: 120%;
	white-space: nowrap;
	overflow:hidden;
	}

input,textarea {
	font-size: 1.3rem;
	color: #666;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 3px !important;
	}

input:focus,textarea:focus { border-color: #000; }

input,label {
	display: block;
	height: 3em;
	padding-right: 10px;
	font-family: HelveticaNeue,'Helvetica Neue',Helvetica,Arial,HiraKakuProN-W3,"Hiragino Kaku Gothic ProN",Meiryo,Roboto,'Droid Sans',sans-serif;
	text-shadow: 0 1px 0 #FFF;
	vertical-align: middle;
	}

input {
	width: 100%;
	margin: 0 0 35px;
	padding: 0 10px;
	}

label {
	width: 20em;
	letter-spacing: 1px;
	}

input[type="submit"] {
	display: inline-block;
	width: auto !important;
	height: 5em;
	font-weight: 600;
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
	letter-spacing: .1em;
	line-height: 5em;
	margin: 0;
	padding: 0 35px 0 40px;
	background: #E6ECF3;
	border-radius: 3px;
	transition: all .2s;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
	}

input[type="reset"],
p.btn button {
	position: absolute;
	top: 0;
	left: 0;
	width: auto !important;
	height: auto;
	padding: 0;
	color: #999;
	text-transform: uppercase;
	}

input[type="submit"]:hover {
	color: #FFF;
	background: #131B3F;
	}

input[type="reset"]:hover,p.btn button:hover { color: #000; }

p.btn button:before {
	content: '\f0d9';
	margin-right: .5em;
	}

textarea {
	height: 15em;
	margin: -2em 0 20px;
	}


/* =.error
-------------------------------------------------------------------------*/
p.multi input.error,p.error input,textarea.error { border-color: #A5013E; }

p.multi input.error::-webkit-input-placeholder,
p.error input::-webkit-input-placeholder,
textarea.error::-webkit-input-placeholder { color: rgba(167,0,61,.5); }

p.multi input.error::-moz-placeholder,
p.error input::-moz-placeholder,
textarea.error::-moz-placeholder { color: #A5013E; }

p.multi input.error:-ms-input-placeholder,
p.error input:-ms-input-placeholder,
textarea.error:-ms-input-placeholder { color: rgba(167,0,61,.5); }


/* =.confirm
-------------------------------------------------------------------------*/
.confirm dl {
	margin: 0 0 30px;
	overflow: hidden;
	}

.confirm dt,.confirm dd { float: left; }

.confirm dt {
	clear: left;
	width: 13em;
	font-weight: 600;
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
	letter-spacing: 1px;
	}

.confirm dd { display: inline-block; }

.confirm h3 {
	font-weight: 600;
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif;
	font-size: 1.3rem;
	letter-spacing: 1px;
	margin: 0 0 2em;
	}

.confirm dt:before,
.confirm h3:before {
	content: '\f111';
	margin-right: 10px;
	}

.confirm blockquote {
	max-height: 56em;
	margin: 0 0 20px;
	padding: 0 0 1px 15px;
	border-left: 1px solid #000;
	overflow: auto;
	}

.confirm blockquote p { margin: 0 0 1em; }


/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and ( min-device-width: 721px ) {
	ol.step { top: 125px; right: 40px; }
	article>p { line-height: 2.8; }
	label { font-weight: 600; font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Roboto,'Droid Sans','Yu Gothic',Meiryo,'Meiryo UI',sans-serif; }
	.confirm dl,.confirm blockquote { margin-bottom: 4em; }
	}

@media
only screen and ( orientation: landscape ),
only screen and ( min-width: 901px ) {
	article>p { width: 50%; margin: 0 0 40px 50%;  }
	.pkg { position: relative; width: 100%; margin: 0; }
	.pkg span { position: relative; top: 0; left: 0; bottom: 0; }
	.pkg form,#contact .pkg>p { width: 50%; }
	}

@media only screen and ( min-width: 1025px ) {
	article>p { 
		padding: 0;
		margin: 20px 0;
	}
	.confirm dl,.confirm blockquote { margin-bottom: 6em; }
	.upper{
		display: flex;
		align-items: center;
    column-gap: 100px;
	}
	.upper p{
		margin: 0;
	}
	.upper ol.step{
		position: static;
	}
}
ol.step li.current{
	font-weight: bold;
}
@media only screen and ( min-width: 1025px ){
	.sponly{
		display: none !important;
	}
}


/* EOF
-------------------------------------------------------------------------*/