@charset "utf-8";
@import url("pickadate.customize.css");
@import url("pickadate.date.customize.css");
@import url("color-green.css");


/* ===================================================================
CSS information
=================================================================== */

html,body{
	padding:0;
	margin:0;
	color:#505050;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	}
ul{padding:0; margin:0;}
ul:after{ content:""; display:block; clear:both;}
li{padding:0; margin:0; list-style:none;}
.fl{ float:left;}
.fr{ float:right;}
.pc{ display:block;}
.sp{ display:none;}
input,textarea{
	background:#f7f7f7;
	border:1px solid #ccc;
	}
.pt0 { padding-top:0 !important;}
.pb0 { padding-bottom:0 !important;}
.pb5 { padding-bottom:5px !important;}
.pb10{ padding-bottom:10px;}
.mt50{ margin-top:50px !important;}
@media screen and (max-width:480px){
	.mt50{ margin-top:0px !important;}

	.pc{ display:none;}
	.sp{ display:block;}
	}


/*=======================

	FONT 関連

=======================*/

h1{ font-size:24px; padding:0; margin:0; font-weight:normal;}

h2{ background:url(../img/h2_icon_blue.png) no-repeat left top 3px;
	padding:0 0 0 25px;
	margin:50px 0 0 0;
	color:#237bc5;
	font-size:18px;
	font-weight:normal;
	position:relative;
	}

p { font-size:14px; line-height:24px; padding:0; margin:0; font-weight:normal;}
.caution{ font-size:10px; color:#999; font-weight:normal; line-height:1.6; margin-top:0.6em;}
.asterisk {
  display: block;
  padding-left: 1.2em; }
  .asterisk::before {
    content: "※";
    display: inline-block;
    margin-left: -1.2em;
    width: 1.2em;
    text-align: left; }
    
  

@media screen and (max-width:480px){
	p{padding:5px 0 0;}
	h1{ font-size:20px; width:100%; }
	h2{ margin:0;}
	@media screen and (-webkit-min-device-pixel-ratio:0){
		h2{background:url(../img/h2_icon_blue.png) no-repeat left center;}
		}
	}


/*=======================

	カテゴリ・項目

=======================*/
/*各カテゴリ*/
.category{ width:100%; padding:0; margin:0;}
/*各項目を入れるbox*/
.inner{ width:960px; margin:auto; position:relative;}
@media screen and (max-width:480px){
	.inner{ width:auto; padding:20px;}
	.question{ padding:0px 20px; }
	}


/*=======================

	header

=======================*/
header{ width:100%; padding:10px 0; margin:0;}
/*header li.fl img, header li.fr img {height:27px;}*/
@media screen and (max-width:480px){
	header{ padding:0;}
	header .inner{ width:auto; padding:10px;}

	}


/*=======================

 imgbox共通ヘッダー画像

=======================*/
.imgbox{ width:100%; padding:0; margin:0;}
.imgbox .inner{ width:960px; padding:0; margin:auto;}
.imgbox .inner img.pc{ width:100%; }
@media screen and (max-width:480px){
	.imgbox .inner{ width:100%; padding:0; margin:0;}
	.imgbox img{ width:100%;}
	}


/*04 lead 応募要項テキスト*/
.lead{
	padding:25px 30px 25px;
	margin:0;
	}
@media screen and (max-width:480px){
	.lead{ padding:0; font-size:12px; line-height:18px;}
	}

/*柄パターン*/
.pt1{ background:url(../img/bg_pattern1.png); }
.pt2{ background:url(../img/bg_pattern2.png); }
.pt3{ background:url(../img/bg_pattern3.png); }
.pt4{ background:url(../img/bg_pattern4.png); }
.pt5{ background:url(../img/bg_pattern5.png); }
.pt6{ background:url(../img/bg_pattern6.png); }
.pt7{ background:url(../img/bg_pattern7.png); }
.pt8{ background:url(../img/bg_pattern8.png); }


/*=======================

		パンくず

=======================*/
/*flex box形式*/
#ttl_area .inner			{ display:flex; flex-wrap: wrap; justify-content: space-between;}
#ttl_area .inner h1			{ flex-grow:0;}


#ttl_area .inner ul.pan		{ flex-grow:0;}
#ttl_area .inner ul.subttl	{ flex-grow:1;width:80%;}
@media screen and (max-width:480px){
	#ttl_area .inner ul.pan	{ flex-grow:1; }
	}

#ttl_area ul.subttl{margin-top:20px;}
#ttl_area li.ttl{ background:#3d89c9; padding:7px 14px; text-align:center; margin:0; color:#fff; min-width:16%; }
#ttl_area li.subttl_txt{ width:80%; }
@media screen and (max-width:480px){
#ttl_area li.subttl_txt {
width: auto;
}}

#ttl_area li{float:left;}
#ttl_area li p{ padding:2px 0 2px 20px; margin:0; line-height:18px;}
ul.pan{  padding-top:0px;}
.pan span{ display:inline-block;}
.pan li:first-child{ background:url(../img/pan_dott.png) -25% top no-repeat}
.pan li:last-child{ background:url(../img/pan_dott.png) 125% top no-repeat}
.pan li{
	float:left;
	width:80px;
	text-align:center;
	font-size:12px;
	background:url(../img/pan_dott.png) center top no-repeat
	}
.pan li p{
	background:url(../img/pan_icon.png) center top no-repeat;
	padding:20px 0 0 0 !important;
	line-height:14px;
	font-size:12px;
	}
.pan li.active p{
	background:url(../img/pan_icon_active.png) center top no-repeat;
	color:#237bc5;
	}


@media screen and (max-width:480px){
	#ttl_area li.ttl{ display:none; width:auto;}
	#ttl_area li p{ padding:2px 0;}
	#ttl_area li p br{display:none;}
	.pan{ position:inherit; margin-top:30px;}
	.pan li{ width:24%;}
	}


/* #contact */
#contact .box li span{ font-size:10px;}
#contact textarea{ width:500px; height:90px;}
.input-textarea-area textarea{ width:500px; min-height:90px;}
@media screen and (max-width:480px){
	#contact .box ul{ padding:0;}
	#contact .box li br{display:none;}
	#contact .box li textarea{ width:96%; height:100px;}
	}

/*06 お問い合わせ項目*/
.box{ border-bottom:1px #ccc dashed; padding:20px 0;}
/*.alert{background-color:#FFCCCC !important}*/
.box ul{ padding:0 0 0 60px; margin:0;}
.box li{ padding:0; margin:0; float:left;}
.box li:nth-child(odd){ width:30%; clear:both;}
.box li:nth-child(even){ width:70%;}
.box li:nth-child(odd) p{ padding:9px 9px 0 0 ; font-weight:bold;}
.box li:nth-child(odd) p .popup-help-button { transform: translateY(-3px); }
.box li:nth-child(odd) > div { padding: 0 9px 0 0; }
table{ border-spacing:0;}
.box li table th{ width:40px; font-size:14px; font-weight:normal;}
.box li table td{ width:220px;}

#kakunin .box li:nth-child(odd) p{ padding-top:0px;}

@media screen and (max-width:480px){
	.box li{ float:none;}
	.box li:nth-child(odd){ width:auto;}
	.box li:nth-child(even){ width:auto;}
	.box li table th{ width:50px; font-size:12px;}
	.box li table td{ width:220px;}

	#kakunin .box ul{ padding:0 0 0 20px; margin:0;}
	}


/* フォーム */
.box li { font-weight:bold; }
.box li span{ font-weight:normal; font-size:10px;}
.box li span.sub{ color:#999;line-height: 10px;}
.box input{ height:30px; padding: 3px 8px 3px 8px; font-size:14px; width:180px;}
.input-textbox-area .box input{width:488px;}
@media screen and (max-width:480px){
	.box input{ width:70%;}
	.input-textbox-area .box input{ width:90% !important;}
	.box textarea { width:90%; height:80px; }
	}


/*ラヂオボタン*/
.radio { font-size:14px; font-weight:normal; padding-top:5px !important;}
.radio input{ width:25px; height:auto;}
.radio label{ padding-right: 20px; font-weight:normal; cursor:pointer;}
.radio input[type=radio], .radio input[type=checkbox]{ cursor: pointer;}

/*フォーム必須・OK・任意*/
.hissu { background:url(../img/icon_hissu.png) no-repeat left 10px;}
.hisok { background:url(../img/icon_ok.png) no-repeat left 10px; }
.ok    {/* background:url(../img/icon_ok.png) no-repeat left 10px; */}
.ninni { background:url(../img/icon_ninni.png) no-repeat left 10px; }


/* 住所 */
#address li:nth-child(odd){ width:12%;}
#address li:nth-child(even){ width:88%;}
#address ul.inn{ padding:0 0 0 0px; margin:0;}
#address ul.inn li{ float:left; margin-bottom:10px;}
#address ul.inn li:nth-child(odd){ width:14%; font-size:14px; font-weight:normal; text-align:left; padding:14px 0 10px 7%; line-height:14px;}
#address ul.inn li:nth-child(even){ width:79%; padding-top: calc(14px - 5px);}
#address ul.inn li:nth-child(even) input{ width:488px;}
/*自動入力*/
#address ul.inn .post th{ width:25px; font-size:13px; text-align:center;}
#address ul.inn .post td{ width:90px;}
#address ul.inn .post td.btn { width:auto;}
#address ul.inn .post td.btn a{ display:block; padding:6px 5px; background:#c1c1c1; text-decoration:none; color:#000; margin-left:20px;}
#address ul.inn .post td.btn button{ display:block; padding:6px 5px; background:#c1c1c1; text-decoration:none; color:#000; margin-left:20px; cursor:pointer; border:none;}
#address ul.inn .post td.btn p{ width:170px; padding:0px; text-align:center; font-weight:normal; font-size:12px; background:url(../img/icon_cursor.png) no-repeat left 6px center; position:relative;}
#address ul.inn .post td.btn span{ font-size:12px;}
#address ul.inn .post td input{ width:65%;}

/*TEL*/
#tel th{ width:13px; font-size:13px; text-align:center;}
#tel td{ width:80px;}
#tel td input {width:75px;}
/*任意*/
#address li.ninni{ position:relative;}
#address li.ninni img{ display:none;}
@media screen and (max-width:480px){
	#address li.ninni{ background:none;}
	#address li.ninni img{ position:absolute; left:-60px; top:6px; display:block;}
  }

/*mail*/
#mail input,
#mail_confirm input{ width:488px;}
#mail_confirm{ margin-top:20px;}

@media screen and (max-width:480px){
	#address ul.inn .post td{ width:40px;}
	#address ul.inn .post td input{ width:40px !important;}
	#address ul.inn .post td.btn{ padding-left:10px;}
	#address ul.inn .post td.btn p{ width:80px;}
	#address ul.inn .post td.btn span{ display:none;}
	#address ul.inn .post td.btn a{ margin-left:0px;}

	#address li:nth-child(odd),#address li:nth-child(even){ width:auto;}
	#address ul.inn li:nth-child(odd){ padding:10px 0 0px 7%;}

	#address ul.inn li{ float:none;}
	#address ul.inn li br{ display:none;}
	#address ul.inn li:nth-child(odd){ width:auto; padding-left:0; font-weight:bold;}
	#address ul.inn li:nth-child(even){ width:auto;}

	#address ul.inn li:nth-child(even) input{ width:90%;}

	#tel li,#tel table{ width:100%;}
	#tel th{ width:7%;}
	#tel td{ width:25%;}
	#tel td input {width:66%;}

	#mail input,
	#mail_confirm input{ width:90%;}
  }


/*=======================

	submitボタン

=======================*/

.submit_btn {
	padding:0;
	margin:50px auto;
	text-align:center;
	width:350px;
	background-color:#106ab6;
	color:#fff;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
	}


.submit_btn:hover, .submit_btn:focus, .submit_btn:active {
	background-color: #74bfff;
	color: white;
	}
.submit_btn a{
	color:#fff;
	text-decoration:none;
	display:block;
	padding:10px 0;
	}
.submit_btn button{
	color:#fff;
	text-decoration:none;
	display:block;
	padding:10px 0;
	background-color: transparent;
	width:100%;
	cursor: pointer;
	border: none;
	}
.submit_btn p{ background:url(../img/icon_cursor2.png) no-repeat left 60px top 7px; position:relative;}
@media screen and (max-width:480px){
	.submit_btn{ margin:0 auto; width:90%;}
	.submit_btn p{ background:url(../img/icon_cursor2.png) no-repeat left 30px top 12px;}
	}




/*=======================

	SELECTプルダウン

=======================*/
.w_s{ width:240px;}
.w_l{ width:500px;}
.cp_ipselect {
	overflow: hidden;
	text-align: center;
	}
.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	}
.cp_ipselect select::-ms-expand {
    display: none;
	}
.cp_ipselect.cp_sl01 {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #ffffff;
	}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 1em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
	}
.cp_ipselect.cp_sl01 select {
	padding: 10px 38px 10px 20px;
	color: #666666;
	background-color:#f7f7f7;
	font-size:13px;
	}

/*=======================

	アンケート #enq

=======================*/
#enq .box input{ width:20px; height:inherit;}
#enq .box li table { margin-top:15px;}
#enq .box li table th{ width:70px; font-size:14px; font-weight:normal;}
#enq .box li table td{ width:180px; height:30px; padding: 3px 10px 3px 15px;}
#enq .box li table td input{ width:72%;}
#enq .box .buildPlanKind p{ padding-bottom:15px;}
#enq .box .buildPlanKind p:hover{ color:#999;}
#enq textarea{ width:500px; height:80px; padding: 10px 10px 10px 15px;}
@media screen and (max-width:480px){
	#enq br{display:none;}
	#enq .box li table td{ width:180px; height:30px; padding: 3px 10px 3px 0px;}
	#enq table,#enq tr,#enq tbody,#enq th,#enq td {
	display: block;
	max-width: 100%;
	}
	#enq td{ width:94% !important;height:30px; margin-bottom:20px;}
	#enq td input{ width:94% !important; height:30px; padding: 3px 10px 3px 15px;}
	#enq .box .buildPlanKind p{ padding-bottom:10px;}
	#enq textarea{ width:90%; height:80px;}
	}

/*=======================

	カタログ請求
	（ハイグレード版有)

=======================*/
.conf-catalog-area .parent input{position:absolute; left:-30px; top:0; height:auto; width: 20px; padding:0;}
.conf-catalog-area .parent label{ padding:0;}
.conf-catalog-area .parent h3{ font-size:14px; font-weight:bold; padding:0 0 15px; margin:0;}
.conf-catalog-area .parent p{ padding:15px 10px 0 0 !important; line-height:20px;}
.conf-catalog-area .box ul{ padding:0 0 0 60px; margin:0 auto;}
.conf-catalog-area .box li:nth-child(odd){ clear:inherit;}

.conf-catalog-area .parent { display: flex; }
/*.conf-catalog-area .child:hover { opacity:0.6;}*/

.conf-catalog-area .around,
.conf-catalog-area .around2 {
	justify-content: space-around;
	padding: 0px 0px 20px 0px;		/* 確認画面 カタログ行の行間 */
}
.conf-catalog-area .child {
	width: 280px;
	height: auto;
	position:relative;
	}
@media screen and (max-width:480px){
	.conf-catalog-area .parent { display:block; }
	.conf-catalog-area .child {
		width:84%;
		margin:0 auto 30px;
		}
	.conf-catalog-area .child  img{ width:100%;}
	.conf-catalog-area .parent p{ padding:10px 0 0 0 !important;}
	}

.conf-catalog-area .box ul.hissu,
.conf-catalog-area .box ul.hisok {
	height: 40px;
	padding: 0 0 20px 60px;
}
.conf-catalog-area .box ul.ok {
	display: none;
}

.catalog .parent input{position:absolute; left:-30px; top:0; height:auto; width: 20px; padding:0; cursor: pointer;}
.catalog .parent label{ padding:0; cursor:pointer;}
.catalog .parent h3{ font-size:14px; font-weight:bold; padding:0 0 15px; margin:0;}
.catalog .parent p{ padding:15px 10px 0 0 !important; line-height:20px;}
.catalog .box ul{ padding:0 0 0 60px; margin:0 auto;}
.catalog .box li:nth-child(odd){ clear:inherit;}

.catalog .parent { display: flex; }
.catalog .child:hover { opacity:0.6;}
.catalog .around,
.catalog .around2 {
	justify-content: space-around;
	padding: 0px 0px 20px 0px;		/* 入力画面 カタログ行の行間 */
}

.catalog .child {
	width: 280px;
	height: auto;
	position:relative;
}
@media screen and (min-width:481px){
	/* 3列表示用 */
	.col3 .child img {
		max-width: 280px;
	}
	/* 4列表示用 */
	.col4 .child img {
		max-width: 194px;
	}
}
@media screen and (max-width:480px){
	.catalog .parent { display:block; }
	.catalog .child {
		width:84%;
		margin:0 auto 30px;
	}
	.catalog .child  img{ width:100%;}
	.catalog .parent p{ padding:10px 0 0 0 !important;}
}

.catalog .box ul.hissu,
.catalog .box ul.hisok {
	height: 40px;
	padding: 0 0 20px 60px;			/* カタログの必須行の行間 */
}
.catalog .box ul.ok {
	display: none;
}

/*=======================

	修正するボタン

=======================*/
#kakunin .shusei{
	position:absolute;
	right:0;
	top:0;
	padding:0px;
	width:110px;
	background:#8c8c8c;
	text-align:center;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
	cursor: pointer;
	border: none;
}
#kakunin .shusei:hover, #kakunin .shusei:focus, #kakunin .shusei:active {
	background-color: #74bfff;
	color: white;
	}
#kakunin .shusei:hover{ background-color:#555;}
#kakunin .shusei p{ color:#fff; font-size:12px; padding:0 0 0 5px; margin:0; background:url(../img/icon_cursor.png) no-repeat left 10px top 8px; position:relative;}
@media screen and (max-width:480px){
	#kakunin .shusei{ width:72px; padding:0;}
	#kakunin .shusei p{ font-size:11px; padding:0 0 0 5px; margin:0; background:url(../img/icon_cursor.png) no-repeat left 4px top 8px;}
	}




/*=======================

	受付完了画面（ハイグレード版有)

=======================*/
#thanks .box {
    min-height: 355px; } 
#thanks .box .message {
    font-size:22px;
    line-height:42px;
    padding-top: 110px;
    text-align:center;
    border-top: 1px #ccc dashed; }
#thanks .box .button-area {
    height: calc(355px - 110px - 48px);
    display: flex;
    justify-content: center;
    align-items: center; }
    #thanks .box .button-area a {
        display: inline-block;
        border: 2px solid #f00;
        border-radius: 14px;
        padding: 0.8em 1.6em;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        text-decoration: none;
        transition: all .6s; }
        #thanks .box .button-area a:hover {
            background: #ddd; }

@media screen and (max-width: 480px) {
    #thanks .box {
        padding: 0;
        min-height: 266px; }
    #thanks .box .message {
	font-size: 18px;
	line-height: 36px;
	padding-top: 40px; }
    #thanks .box .button-area {
        padding: 40px 0;
        height: auto; }
}
        

#thanks #ttl_area li p{ padding:10px 0 2px 20px; margin:0; line-height:18px;}
#thanks .bnr_area{
	display: flex;
	-webkit-justify-content: center; /* Safari */
	justify-content:         center;
	}
#thanks .bnr{
	width:286px;
	padding:0 10px;
	margin:0 15px;
	}
#thanks .bnr:hover{ opacity:0.6;}
#thanks .bnr a{ text-decoration:none;}
#thanks .bnr img{ border-radius:6px; width:286px;}
#thanks .bnr p{ padding:10px 0; }

@media screen and (max-width:480px){
	#thanks .bnr_area{
		flex-direction: column;
		}
	#thanks .bnr p{ font-size:12px; line-height:18px; margin:auto; }
	}


/*=======================

	エラーテキスト

=======================*/
p.error{
  color:#F00;
  background:url(../img/icon_error.png) no-repeat left center;
  padding-left:25px;
  margin-top:7px;
  font-weight:normal;
}
#address ul.input_area > li > p.error {
  margin-left: 166px;
}
@media screen and (max-width:480px){
  p.error{font-size:11px;}
  #address ul.input_area > li > p.error { margin-left: 0; }
}


/*=======================

	Footerエリア

=======================*/
footer h3{ font-size:16px; padding:0 0 5px; margin:0;}
footer .inner{ padding-bottom:20px;}
footer .fl{ width:82%;}
footer .fr{ width:16%; padding:0px 0;}
footer p{ font-size:12px; line-height:18px;}
footer .box:after{ clear:both; content:""; display:block;}
footer .copyright{
	padding-top:5px;
	font-size:10px;
	text-align:right;
	}
@media screen and (max-width:480px){
	footer .copyright{ text-align:center;}
	footer .fl,footer .fr{ float:none; width:100%;}
	footer .fr{ text-align:center; padding:10px 0;}
	footer .fr table{ margin:auto;}
	}

input.text_other {
	height: 30px;
	padding: 3px 8px 3px 8px;
	font-size: 14px;
	width: 250px;
}

input::placeholder {
  color: #aaa;
}
input::-webkit-input-placeholder {
  color: #aaa;
}
input::-moz-placeholder {
  color: #aaa;
}
input:-ms-input-placeholder {
  color: #aaa;
}

/* カタログの必須行の行間 */
p.notice {font-size:12px; color:#999; font-weight:normal !important; line-height:16px; margin-top:6px;}

/* 下線非表示用 */
.noborder {border-bottom: 0px}

/*ul連続入力箇所のマージン*/
.box ul:nth-child(2).continuous li input{ margin-top:10px;}

/*liタイトル不要時のマージン・フォント(戻し)*/
li.sub_formbox {width: 70%; margin-left: 30%;}
li.sub_formbox p.caution {font-weight:normal;}

/*=======================
お客様紹介情報用
=======================*/
/* 住所 */
.address li:nth-child(odd){ width:12%;}
.address li:nth-child(even){ width:88%;}
.address ul.inn{ padding:0 0 0 0px; margin:0;}
.address ul.inn li{ float:left; margin-bottom:10px;}
.address ul.inn li:nth-child(odd){ width:14%; font-size:14px; font-weight:normal; text-align:left; padding:14px 0 10px 7%; line-height:14px;}
.address ul.inn li:nth-child(even){ width:79%;}
.address ul.inn li:nth-child(even) input{ width:488px;}
/*自動入力*/
.address ul.inn .post th{ width:25px; font-size:13px; text-align:center;}
.address ul.inn .post td{ width:90px;}
.address ul.inn .post td.btn { width:auto;}
.address ul.inn .post td.btn a{ display:block; padding:6px 5px; background:#c1c1c1; text-decoration:none; color:#000; margin-left:20px;}
.address ul.inn .post td.btn button{ display:block; padding:6px 5px; background:#c1c1c1; text-decoration:none; color:#000; margin-left:20px; cursor:pointer; border:none;}
.address ul.inn .post td.btn p{ width:170px; padding:0px; text-align:center; font-weight:normal; font-size:12px; background:url(../img/icon_cursor.png) no-repeat left 6px center; position:relative;}
.address ul.inn .post td.btn span{ font-size:12px;}
.address ul.inn .post td input{ width:65%;}

/*TEL*/
.tel th{ width:13px !important; font-size:13px !important; text-align:center;}
.tel td{ width:80px !important;}
.tel td input {width:75px;}
/*任意*/
.address li.ninni{ position:relative;}
.address li.ninni img{ display:none;}
@media screen and (max-width:480px){
	.address li.ninni{ background:none;}
	.address li.ninni img{ position:absolute; left:-60px; top:6px; display:block;}
  }

/*mail*/
.mail input,
.mail_confirm input{ width:488px;}
.mail_confirm{ margin-top:20px;}

@media screen and (max-width:480px){
	.address ul.inn .post td{ width:40px;}
	.address ul.inn .post td input{ width:40px !important;}
	.address ul.inn .post td.btn{ padding-left:10px;}
	.address ul.inn .post td.btn p{ width:80px;}
	.address ul.inn .post td.btn span{ display:none;}
	.address ul.inn .post td.btn a{ margin-left:0px;}

	.address li:nth-child(odd),.address li:nth-child(even){ width:auto;}
	.address ul.inn li:nth-child(odd){ padding:10px 0 0px 7%;}

	.address ul.inn li{ float:none;}
	.address ul.inn li br{ display:none;}
	.address ul.inn li:nth-child(odd){ width:auto; padding-left:0; font-weight:bold;}
	.address ul.inn li:nth-child(even){ width:auto;}

	.address ul.inn li:nth-child(even) input{ width:90%;}

	.tel li,.tel table{ width:100%;}
	.tel th{ width:7%;}
	.tel td{ width:25%;}
	.tel td input {width:66%;}

	.mail input,
	.mail_confirm input{ width:90%;}
  }


/*************************************************************************
 *
 * 年月日入力欄
 *
 *************************************************************************/
.ymd-controls {
    display: flex;
    align-items: center; }
    .ymd-controls > .delimiter {
	margin: 0 0.4em;
	font-size: 1em;
	font-weight: bold; }

/*************************************************************************
 *
 * 確認画面
 *
 *************************************************************************/
#kakunin h2 {
  display: flex;
  justify-content: space-between;
  align-items: start; }
  #kakunin h2 .shusei {
    margin-left: 0.5em;
    position: static; }


/*************************************************************************
 *
 * ファイル添付
 *
 *************************************************************************/
.filearea {
    margin-bottom: 8px;
    font-weight: normal;
    font-size: 10px;
    display: flex;
    align-items: center; }
    .filearea.file-present label.file { display: none; }
    .filearea:not(.file-present) .filename { display: none; }
    .filearea:not(.file-present) .cancel { display: none; }
    .filearea input[type="file"] {
	display: none; }
    .filearea .button {
	display: inline-block;
	padding: 0.5em 1em;
	text-align: center;
	border: 1px solid #505050;
	border-radius: 0.5em;
	transition-duration: 0.3s;
        cursor: pointer; }
        .filearea .button:hover { background: #cccccc; }
    .filearea .filename {
        margin-right: 0.5em;
        word-break: break-all; }
.conf-files-area {}
    .conf-files-area p {
	word-break: break-all; }

/*************************************************************************
 *
 * 複数ファイル添付
 *
 *************************************************************************/
.multiple-file-area {}
    .multiple-file-area .button {
	display: inline-block;
	padding: 0.5em 1em;
	text-align: center;
	border: 1px solid #505050;
	border-radius: 0.5em;
	transition-duration: 0.3s;
        cursor: pointer; }
        .multiple-file-area .button:hover { background: #cccccc; }
        .multiple-file-area .button.add { background: #000; color: #fff; }
        .multiple-file-area .button.add:hover { background: #888888; }
    .multiple-file-area .filearea.hide { display: none; }
.multiple-file-area.multiple-file-no-more-field .button.add { display: none; }
        
    
/*************************************************************************
 *
 * PC用/スマートフォン用
 *
 *************************************************************************/
@media screen and (max-width: 480px) {
  .only-pc { display: none; }
}
@media screen and (min-width: 481px) {
  .only-sp { display: none; }
}


/*************************************************************************
 *
 * ログイン有無
 *
 *************************************************************************/
body:not([data-is-owner="true"]) .only-owner { display: none; }
body:not([data-is-owner="false"]) .only-guest { display: none; }


/*************************************************************************
 *
 * チェックボックス+テキスト欄
 *
 *************************************************************************/
.formbox.checkbox-and-text {
  padding-top:5px !important; }  
  .checkbox-and-text p {
    width: 65%;
    display: flex;
    justify-content: space-between; }
    .checkbox-and-text p input[type="checkbox"] {
      width: 25px;
      height: auto;
      cursor: pointer; }
    .checkbox-and-text p label {
      font-weight: normal; }
    .checkbox-and-text p label:first-child { cursor: pointer; }
    .checkbox-and-text p label:first-child .popup-help-button { transform: translateY(-4px); }
    .checkbox-and-text p label:last-child { font-size: 12px; }
      .checkbox-and-text p label:last-child input {
        font-size: 12px;
        margin-left: 4px;
        height: auto;
        width: auto; }
@media screen and (max-width: 480px) {
  .checkbox-and-text p { display: block; width: auto; }
  .checkbox-and-text label { display: block; }
  .checkbox-and-text label:last-child { text-align: right; }
}
    

/************************************************************************
 *
 *「 契約番号・契約物件番号」欄
 *
 *************************************************************************/
.formbox:not(.invalid-contract-number) .contract-validate-message-contract-number { display: none; }
.formbox:not(.invalid-contract-building-no) .contract-validate-message-contract-building-no { display: none; }
.formbox:not(.invalid-present) .contract-validate-message-present { display: none; }
.box li span.contract-validate-message-contract-number { font-size: inherit; }
.box li span.contract-validate-message-contract-building-no { font-size: inherit; }
.box li span.contract-validate-message-present { font-size: inherit; }


/*************************************************************************
 *
 * ヘルプボタン
 *
 *************************************************************************/
.popup-help-button {
  display: inline-block;
  background: #666;
  color: #fff;
  border-radius: 50%;
  line-height: 1.8;
  width: 1.8em;
  text-align: center;
  cursor: pointer; }