@charset "shift_jis";
/* CSS Document */
/* 入居者様へ */
.op_leave_form .pagettl_form {
background-image:url(../images/bg_leave_pagettl.jpg)/* 見出し背景画像 */;
}
/* 売却依頼 */
.op_sell_form .pagettl_form {
background-image:url(../images/bg_sell_pagettl.jpg)/* 見出し背景画像 */;
}
/* 賃貸管理 */
.op_rent_form .pagettl_form {
background-image:url(../images/bg_rent_pagettl.jpg)/* 見出し背景画像 */;
}
/* --------

@_ reset & default

-------- */

html { height:100%; }
body {
	background:#FFF;
	color:#333;
	font:10px/1.5 "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic";
	text-align:center;
}
*+html body { font-family:'ＭＳ ゴシック'; font-size:62.5%; } /* for IE7 */
* html body { font-family:'ＭＳ ゴシック'; font-size:62.5%; } /* for IE6 */
a {
	color:#06C;
	cursor:pointer;
	text-decoration:none;
	outline:none;
}
a:link { color:#06C; }
a:visited { color:#999; }
a:hover { text-decoration:underline; }
a img { border:0; }
img { vertical-align:bottom; }
body, div, dl, h1, h2, h3, h4, h5, h6, 
ol, ul, p, pre, span, td, th {
	margin:0;
	padding:0;
}
ul, ol, dl {
	margin:-3px 0 -3px;
}
li, dt, dd {
	margin:0;
}
dt{
	margin-bottom: 5px;
}
table {
	border:1px solid #CCC;
	border-collapse:collapse;
	border-spacing:0;
	border-top:none;
	font-size:100%;
	width:100%;
}
th {
	font-weight:normal;
	text-align:left;
}

/* clearfix */
.group:after {
	clear:both;
	content:" ";
	display:block;
	font-size:0;
	height:0;
	visibility:hidden;
}
* html .group { zoom:1; } /* for IE6 */
*:first-child+html .group { zoom:1; } /* for IE7 */

/* --------

@_ form default

-------- */

button, fieldset, form, input, label, legend, select, textarea {
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	line-height:inherit;
	margin:0;
	vertical-align:middle;
}
input[type="text"], .input_text {
	vertical-align:middle;
}
.input_min { width:2em; }
.input_S { width:4em; }
.input_R{ width:8em; }
.input_M { width:14em; }
.input_L { width:20em; }
.input_X { width:28em; }
.input_max { width:95%; }
/*
.input_num { text-align:right; }
*/
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner,
a::-moz-focus-inner,
button::-moz-focus-inner { border:none; padding:0; margin:0; }
textarea { line-height:1.5; width:20em; }
select { cursor:pointer; }
label { cursor:pointer; vertical-align:middle; }

/* --------

@_ common class

-------- */

.wrapper {
	font-size:120%; /* -- font-size -- */
	margin: 0 auto;
	text-align:left;
	width: 100%;
}
.formHead {
	background:#FFF;
	border:3px solid #EEE;
	padding:9px 12px;
	margin-bottom:36px;
}
.formGroup_title,
.formTitle {
	padding: 4px 0 4px 15px;
	margin: 20px 0;
	border-bottom: none;
	color: #333;
	border-left: solid 5px #333;
	font-size: 18px;
	font-weight: bold;
}

/* -- 項目のグループ分け -- */
.formGroup {
	width: 100%;
}
.formGroup_title {
	color:#fff;
	font-size:14px;
	font-weight:normal;
	margin:15px 0;
	padding:5px 12px;
	background-color:#64645F;
}
.formTable th { background:#F4F4F4; }
th.required { font-weight:bold; }
.required_mark { color:#C00; }
.notice { padding:9px 0; }

/* -- マーカーなしのリスト -- */
ol.noMarkList, ul.noMarkList { list-style:none outside; }

/* -- 横並びのリスト -- */
.inlineList { list-style:none outside; }
.inlineList li, 
.inlineList dt, 
.inlineList dd {
	display:inline-block;
	*display:inline;
	*zoom:1;
}

/* -- ボタンを囲う -- */
.submitWrapper {
	padding:0 12px;
	text-align:center;
	margin-bottom:36px;
}

/* --------

@_ input

-------- */

/* -- ラジオボタンのリスト -- */
.radioList li { margin-right:4px; }
fieldset, .fieldset { border:1px solid #CCC; padding:8px 11px; }

/* -- プライバシーポリシー -- */
.pp_text { padding:15px 15px; }
.pp_title { font-size:100%; font-weight:bold; padding:0 0 9px; }
.pp_list { list-style:none outside; margin:0 6px; }
.pp_list > li { padding:9px 0; }
.pp_list > li + li { border-top:1px solid #EEE; }
.pp_list > li > h4 { font-size:100%; font-weight:bold; margin-bottom:3px; }
.pp_massage_intro { padding: 0 6px 9px ; text-align:left; }
.pp_massage_submit { padding: 3px 0 ; text-align:center; margin-bottom:30px; }

#error .formTitle {background:url(../images/icon_attention.jpg) no-repeat left center;padding-left:32px;border: none;}
.error_message { margin-bottom:36px; padding:8px 0; }
#complete .formTitle {background:url(../images/icon_complete.jpg) no-repeat left center;padding-left:32px;border: none;}
.complete_message { margin-bottom:36px; padding:8px 0; }

#formGroup_privacy {
	font-size:120%;
	text-align:left;
}
#err_box ul {
	padding:9px 12px;
	list-style:disc inside;
	margin:9px 0 18px;
}
#kenri li {
	float: left;
}
.inlineList li {
	float: left;
}
#car li {
	float: left;
}
.station_area {
	list-style: none;
}

/* 横並び設定 */
.d_flex{
	display: flex;
}

.jc_center{
	justify-content: center;
}

.ai_center{
	align-items: center
}

/* タイトル・キャッチ */

.pagettl_form{
	margin-bottom: 40px;
	padding: 30px 0 30px 30px;
	border: 1px solid #CCC;
	background: no-repeat center right;
}

.pagettl_form h1{
	line-height: 1;
	font-size: 40px;
	text-shadow: 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF;
}

.pagettl_form p{
	font-size: 24px;
	margin-top: 10px;
	text-shadow: 0 0 10px #FFF,0 0 10px #FFF,0 0 10px #FFF,0 0 10px #FFF;
}

.pagettl_inner{
	padding: 5px 0 5px 20px;
	border-left: 6px solid #A19276;
}

.content_trouble{
	position: relative;
	width: 680px;
	margin: 0 auto 30px;
	border: 5px solid #BEAF87;
}

.content_trouble::after{
	content: "";
	position: absolute;
	display: block;
	left: 50%;
	transform: translateX(-50%);
	border-top: 20px solid #beaf87;
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
}

.trouble_list{
	display: flex;
	flex-wrap: wrap;
	padding: 35px 0 0 55px;
}

.trouble_list li{
	margin-right: 40px;
	padding-left: 50px;
	line-height: 40px;
	font-size: 20px;
}

.trouble_list li:nth-child(1){
	background: url(../images/trouble_icon1.png) no-repeat left center;
}

.trouble_list li:nth-child(2){
	background: url(../images/trouble_icon2.png) no-repeat left center;
}

.trouble_list li:nth-child(3){
	margin-right: 0;
	background: url(../images/trouble_icon3.png) no-repeat left center;
}

.trouble_list li:nth-child(4){
	margin: 20px 0 35px;
	background: url(../images/trouble_icon4.png) no-repeat left center;
}

.catch{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 40px;
	font-weight: bold;
	font-size: 35px;
}

.catch::before,
.catch::after{
	content:"";
	display: block;
	border-right: 5px solid transparent;
	border-top: 60px solid #beaf87;
	border-left: 10px solid transparent;
	margin-right: 25px;
	transform: rotate(-20deg);
}
.catch::after {
	
transform: rotate(20deg) scale(-1, 1);
}
.form_ttl{
	height: 50px;
	margin-bottom: 26px;
	padding-left: 20px;
	line-height: 50px;
	font-weight: normal;
	color: #FFF;
	background: url(../images/bg_form_ttl_r.png) no-repeat right bottom #BEAF87;
}

.form_ttl::after{
	content: '';
	display: block;
	margin-left: -20px;
	width: 16px;
	height: 16px;
	background: url(../images/bg_form_ttl_b.png) no-repeat left bottom;
}
.name_input label{
margin-top: auto;
    margin-right: 10px;
    display: inline-block;
	}
/* プライバシーポリシー上書き */
.content_pp{
	height: 150px;
	margin: 0 auto 40px;
	padding: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
	border: 1px solid #CCC
}

.content_pp h3{
	text-align: center;
}

/* 必須マーク */
.required::after,
.required_contact::after{
	content: "[必須]";
	margin-left: 0.5em;
	font-weight: bold;
	color:#CF4430;
}
.required.either::after{
	content: "[どちらか必須]";
	margin-left: 0.5em;
	font-weight: bold;
	color:#304bcf;
}

/* デザイン変更 */

.form_ttl h1,
.form_ttl h2{
	margin-bottom: 20px;
	text-align: center;
}

.form_ttl h2{
	color: #00396A;
}

th, td {
	border:1px solid #CCC;
	padding: 15px 15px;
}

textarea{
	width: 97%;
}

.radioList li{
	margin-right: 20px;
}

label{
	display: block;
	margin-bottom: 10px;
}

input[type="text"], .input_text {
	padding: 5px;
}

.formGroup {margin:0 0 40px;}

.formTable th {
	width: 15em;
	font-weight: bold;
	font-size: 15px;
}

.wrapper {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	font-size: 15px
}



.input_mb{
	margin-bottom: 10px;
}

.arrangeList li{
	min-width: 102px;
}

/* -- ボタン -- */
.buttonLook {
	width: 90%;
	height: 70px;
	margin: 0 auto 20px;
	font-weight: 900;
	font-size: 21px;
	border: none;
	/* -- CSS3 -- */
	background-color: #6fba2c;
	box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.2) inset;
	display: flex;
	text-decoration: none;
	align-items: center;
	justify-content:center;
	color: #FFF;
	border-radius: 5px;
	transition: 0.3s;
	padding-bottom: 2px;
	letter-spacing: 0.6em;
}

.buttonLook:hover {
	opacity:0.7;
	cursor: pointer;
}

a.buttonLook{
	display: block;
	margin: 0 auto;
	line-height: 80px;
	color: #FFF;
}

a.buttonLook:hover{
	text-decoration: none;
	color: #FFF;
}

a.buttonLook:visited{
	color: #FFF;
}

#button_return{
	background: #666;
}

.bg_grey{
	background: #F4F4F4;
}

.input_mr li{
	margin-right: 10px;
}

.input_mr input{
	margin-right: 5px;
}

.text_important{
	font-size: 17px;
	font-weight: bold;
}

.list_row_mb li,
.list_row_mb dd{
	margin-bottom: 10px;
}

.list_row_mb li:last-child,
.list_row_mb dd:last-child{
	margin-bottom: 0;
}

.cell_check{
	padding: 20px;
	text-align: center;
}

.visible_check{
	display: none;
}

.labelText_check{
	font-size: 17px;
	font-weight: bold;
}

.labelText_check::after{
	content:"";
	display: inline-block;
	margin-left: 1em;
	padding: 2px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	border: 2px solid #666;
	background-repeat: no-repeat;
	background-position:  center center;
	background-color: #FFF;
	background-size: 80%
}

.visible_check:checked + .labelText_check::after{
	background-image: url(../images/check_box.png);
}

.content_procedure{
	margin-bottom: 40px;
	padding: 15px;
	border: 1px solid #CCC;
	background-color: #f4f4f4;
}
.op_leave_form .content_procedure {
	margin-top:-20px;
	margin-bottom: 60px;
}
.content_procedure h3{
	margin-bottom: 8px;
	padding: 5px 0.5em;
	text-align: center;
	font-size: 17px;
	color: #ffffff;
	background: #BEAF87;
	border-bottom: 1px solid #CCC;
}

.content_procedure h4{
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #CCC;
}

.content_procedure h4::before{
	content:"";
	display: inline-block;
	width: 3px;
	height: 15px;
	margin-right: 5px;
	vertical-align: middle;
	background: #CCC;
}

.content_procedure p,
.content_procedure ul{
	margin-bottom: 20px;
}

.content_procedure p:last-child{
	margin-bottom: 0;
}

.content_procedure ul{
	list-style-type: none;
}

.content_procedure li{
	margin-bottom: 10px;
	margin-left: 1em;
	text-indent: -1em;
}

.content_procedure li::before{
	content:"";
	display: inline-block;
	margin-right: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #CCC;
}

.content_procedure .content_company{
	padding: 15px;
	text-align: center;
	background: #F4F4F4;
}

.content_company .company_name{
	font-size: 17px;
	font-weight: bold;
}

.content_err .mes_err{
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	color: #CF4430;
}
.op_form_comment {
	font-weight: normal;
	display: block;
	font-size: 12px;
}

/* 確認画面 */

.confirm_cheked::after{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 1em;
	vertical-align: middle;
	background-image: url(../images/check_box.png);
	background-repeat: no-repeat;
	background-position:  center center;
	background-color: #FFF;
	background-size: 100%
}

.ml_5{
	margin-left: 5px;
}

.mr_5{
	margin-right: 5px;
}

.mb_10{
	margin-bottom: 10px;
}
/* フォームフロー（入力・確認・完了） */
.form_flow {
   margin: 20px 0;
	list-style: none;
	display: flex;
 }
.form_flow > li {
	width: calc(100%/3 - 10px);
	font-size: 16px;
	padding-left: 10px;
	background-color: #beaf87;
	display: flex;
	align-items: center;
	height: 40px;
	position: relative;
	font-weight:900;
	color: #FFF;
	opacity: 0.5;
}
.form_flow .selected {
	opacity:1;
}
.form_flow > li:first-child{
	z-index: 99;
}
.form_flow > li:nth-child(2){
	z-index: 98;
}
.form_flow > li:last-child{
	z-index: 1;	
	background-color: #DDD;
	width: calc(100%/3 + 10px);
}
.form_flow > li .number {

	display: flex;
	font-size: 14px;
	justify-content: center;
	align-items: center;
	background-color: #FFF;
	margin: 0 10px 0 20px;
	height: 25px;
	width: 25px;
	color: #beaf87;

}
.form_flow > li:first-child .number {
	margin: 0 10px 0 0;
}
.form_flow > li:last-child .number {
	color: #FFF;
	background-color: #333;
}
.form_flow > li:last-child {
	color :#333;
}
.form_flow > li::after {
    content: "";
    display: block;
    background-color: #beaf87;
    width: calc(40px/1.414);
    height: calc(40px/1.414);
    transform: rotate(45deg) translate(-10px, -10px);
    position: absolute;
    right: -14px;
    top:50%;
    z-index: -1;
}
.form_flow > li::before {
    content: "";
    display: block;
    background-color: #FFF;
    width: calc(40px/1.414);
    height: calc(40px/1.414);
    transform: rotate(45deg) translate(-10px, -10px)/* ie対策 */;
    position: absolute;
    left: -14px;
    top:50%;/* ie対策 */
}
.form_flow > li:first-child::before,
.form_flow > li:last-child::after
{
	display: none;
}
.formTable tr th label input[type="text"],
.formTable tr td label input[type="text"] {
	margin: auto 5px;
	padding: 5px 0;
}
.name_input input[type="text"] {
	display:block;
}
/* validation error */
.errorMessage{
	margin-bottom: 20px;
}
.errorMessage p{
	padding: 5px 0;
	text-align: center;
	font-weight: bold;
	font-size: 15px;
	color:#C00;
}
/* レスポンシブ用 */

.form_leave_date{
	display: flex;
}

.form_leave_date input{
	width: 4em;
}

@media screen and (max-width: 768px) {
	body{
		width: 100%;
	}
	
    .col2,
	.content_trouble,
	.input_L,
	.input_max,
	.buttonLook,
	.formTable,
	.formTable tbody,
	.formTable tr,
	.formTable th,
	.formTable td{
        box-sizing: border-box;
    }
	
	.wrapper{
		width: 95%;
	}
	
	.input_L,
	.input_max,
	.content_trouble,
	.formTable tr,
	.formTable th,
	.formTable td{
		width: 100%;
	}
		
	.formTable,
	.formTable tbody,
	.formTable tr,
	.formTable th,
	.formTable td{
		display: block;
	}
	
	
	.formTable th{
		border-left: none;
		border-right: none;
	}
	
	.formTable td{
		border: none;
	}
	
	.pagettl_form{
		height: auto;
		padding: 10px;
		margin-bottom: 20px;
		background-size: 60% auto;
	}

	.pagettl_form h1{
		font-size: 20px;
	}

	.pagettl_form p{
		font-size: 15px;
	}

	.pagettl_inner{
		padding: 5px 10px;
		border-left: 6px solid #A19276;
	}
	
	.form_ttl{
		height: 50px;
		padding-left: 10px;
		line-height: 50px;
		font-size: 15px;
	}
	
	.form_ttl::after{
		margin-left: -10px;
	}
	
	.trouble_list{
		flex-direction: column;
		padding: 10px;
	}
	
	.trouble_list li:nth-child(4){
		margin: 0;
	}
	
	.trouble_list li{
		display: flex;
		align-items: center;
		margin: 0 0 10px 0;
		min-height: 40px;
		line-height: 1.2;
		font-size: 15px;
	}
	
	.catch{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 20px;
		font-weight: bold;
		font-size: 16px;
	}

	.catch::before{
		margin-right: 10px;
		transform: scale(0.7) rotate(-20deg);
	}

	.catch::after{
	transform: scale(0.7) rotate(20deg) scale(-1, 1);
	}
	
	.form_leave_date input{
		width: 4em;
		box-sizing: border-box;
	}
	
	.formTable .cell_check{
		padding: 20px 10px;
		text-align: left;
		border-top: 1px solid #CCC;
	}
	
	.labelText_check{
		display: flex;
		font-size: 15px;
		font-weight: bold;
	}
	.op_form_comment {
	display: inline;
	}
}