/****************
- order.cssl
- 業務依頼手続き
****************/






/**************************************
** 業務依頼手続き - #front
*/




/*
#front #order-attention {
	margin-bottom:55px;
	border-left: 13px solid #323232;
	padding: 34px 13px; 
}
*/

#order-front ul{
	margin-left:0;
}


/*
#order-front address {
	display: inline-block;
	padding: 13px;
	border: 1px solid #919191;
	border-left: 5px solid #323232;
	margin-top:34px;
}
*/
#order-front address {
	margin-top:13px;
}


#front address p {
	margin-bottom: 8px;
}

#order-attention {
	margin-top:23px;
}

/* reset  */
#order-attention h2 {
	border: none;
	margin:0;
	padding: 0;
	margin-bottom:8px;
	color:#d1474c;
}
.front #order-attention h2::after,
.front #order-attention h2::before {
	display:none;
}

/*
#front #order-attention {
	border:2px solid #d1474c;
	padding:13px;
	background-color:#fefff9;margin-bottom:33px;
}*/
/*
#front #order-attention {
	margin-bottom:21px;
	border-left: 5px solid #d1474c;
	padding: 13px 21px; 
	position:relative;
}
#front #order-attention::before {
	content:"";
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	border-left: 1px solid #d1474c;
	left:3px;
	top:0;
}
#front #order-attention h2 {
	border:0px solid #323232;
	font-size:1rem;
	margin:0;
	padding:0;
	margin-bottom:8px;
}
#front #order-attention h2::after,
#front #order-attention h2::before {
	display:none;
}
*/




/**************************************
** 業務依頼受付フォーム - #form
*/

span.underline {
	border-bottom: 2px solid #323232;
  }

div.form-link {
    background-color: #e9fbfb;
    width: 300px;
    margin: 34px  auto;
    border: 1px solid #1555bc;
    text-align: center;
}
	div.form-link:hover {
    	background-color: #aef1f1;
	}

	div.form-link a, div.form-link a:visited,div.form-link a:hover {
		text-decoration: none;
	}
	div.form-link a {
    	color: #0044cc;
    	font-size: 1.2rem;
    	line-height: 2rem;
	}


div#contact {
	border-left: 13px solid #323232; 
	padding: 13px;
	margin-top: 34px;
}




/* ご依頼の流れ  */
#order-flow .contact{
    margin-bottom: 13px;
}

#order-flow div#p{ 
	padding:5px 5px;
}


#order-flow div#wrap{
    padding:15px;
}

	#order-flow  div.container{
        display:flex;
		width:700px;
        margin-bottom:50px;
        position: relative;
    }

	#order-flow div.container_v2{
        width:700px;
    	margin-bottom:50px;
        position: relative;
        border:2px solid rgb(58, 56, 56);
		/* p に対して*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
	@media screen and (max-width:549px){
		#order-flow div.container_v2,
		#order-flow  div.container {
			width:100%;
		}
	}

	#order-flow .next:after{
                /* 
                * 参考
                * https://www.granfairs.com/blog/staff/use-triangle-with-css
                */
                content: "";
                position: absolute;
                right: 0;
                bottom: -35px;
                left: 0;
                width: 0px;
                height: 0px;
                margin: auto;
                border-style: solid;
                border-color: rgb(175, 166, 166) transparent transparent transparent;
                border-width: 18px 25px 0 25px;
            }

        #order-flow .f-label {
        	width:200px;
            border:2px solid rgb(58, 56, 56);
            border-radius: 10px 0px 0px 10px;
            /* p に対して*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            }

			@media screen and (max-width:549px){
				#order-flow .f-label {
					width:100px;
				}
			}

        #order-flow .f-content{
            flex:1;
            border:2px solid rgb(58, 56, 56);
            border-radius: 0px 10px 10px 0px;
            border-left: none;
            padding:13px 13px;
        }

            #order-flow .client{
                border-color:rgb(170, 24, 80);
            }

            #order-flow .f-content p:first-child{
                font-weight:bold;
            }
            
            #order-flow a{
            	color:#0044cc;
            }
            #order-flow a:visited{
            	color:#0044cc;
            }
            
            
            			
			#order-flow label{
			  display:inline-block;
			}

		/* 所見の入力 popup */
		#order-flow #f-popup{
			z-index:100;
			background:#fff;
			border:2px solid #4a4a4a;
			border-radius:30px;
			padding:34px;
			text-align:center;
			box-sizing:border-box;
			display:none;
			position: absolute;
			top:-30px; /*基準は上のdiv*/
			left:230px;
			}


			
			#order-flow  img{
			  width:350px;
			}
			#f-popup a:hover{ text-decoration:underline;}
			
			@media screen and (max-width:549px){
				#order-flow #f-popup {
					left:-100px;
				}
				#order-flow  img{
					width:250px;
				  }
			}


			/*ボタンの装飾*/
			label span#f-popup-label{
				position: relative;
				padding-right:23px;
				color:#0044cc;
			}
			label span#f-popup-label:after{
				display: inline-block;
    			position: absolute;
    			top: 1px;
    			right:-1px;
    			background-image: url(/../img/question.svg);
    			background-size: contain;
    			width: 20px;
    			height: 20px;
    			content: "";
			}
				
			#order-flow label span:hover{
			  cursor:pointer;
			}
			#order-flow input[type="checkbox"]{
			  display:none;
			}
			#order-flow input[type="checkbox"]:checked + #f-popup{
			  display:block;
			}

			#order-flow  #f-pop-fixed{
				position: relative;
			}