@charset "utf-8";
#page.contact #contents{
  margin-top: 100px;
  padding:0 0 100px;
}
#page.contact #contents .form{
	padding:20px 0 40px 0;
	margin:0 auto;
	display:table;
  width:100%;
}
#page.contact #contents .description p{
	display:table;
	margin:25px auto;
}

#page.contact #contents .form dl{
	width:100%;
	max-width:840px;
	margin:0 auto;
	padding: 20px 0 20px 0;
	border-bottom:1px solid #ccc;
	display:table;
}
	#page.contact #contents .form dl dt{
		display:table-cell;
		width: 14em;
		text-align: left;
		vertical-align:middle;
		margin:0;
		padding: 0 20px 0 20px;
		font-weight: normal;
		white-space: nowrap;
	}
	#page.contact #contents .form dl dd{
		display:table-cell;
		text-align:left;
		vertical-align:middle;
		padding:0;
		font-weight:normal;
	}

  #page.contact.application #contents .form dl{
  	max-width:940px;
  }
  #page.contact.application #contents .form dl dt{
		width: 280px;
	}
  #page.contact.application #contents .form dl dt span{
		color: #cc3300;
	}

#page.contact #contents .form dl.r1{display:block;}
#page.contact #contents .form dl.bnon{border:none !important;}
	#page.contact #contents .form dl.r1 dt{
		display:block;
		width: 100%;
		padding: 0 0 20px 0;
	}

	#page.contact #contents .form dl dd select{
		line-height: 1.6;
		border-radius:4px;
		padding:10px;
	}
	#page.contact #contents .form dl dd textarea{
		width:100%;
		height:220px;
		padding:10px;
		display:table-cell;
		border:none;
    background-color: #f9f9f9;
	}

	#page.contact #contents .form dl dd select,
	#page.contact #contents .form dl dd input,
	#page.contact #contents .form dl dd textarea{
		margin:0;
		box-sizing: border-box;
		border:1px solid #ccc;
		padding:10px;
    font-size:16px;
    line-height:1.6;
    background-color: #f9f9f9;
	}
	#page.contact #contents .form dl dd input#postnumber01{
		width:60px;
	}
	#page.contact #contents .form dl dd input#postnumber02{
		width:70px;
	}
	#page.contact #contents .form dl dd input.textbox{
		width:100%;
	}
	#page.contact #contents .form dl dd .waku.on input,
	#page.contact #contents .form dl dd .waku.on textarea{background-color:#FFE6E7;}
	#page.contact #contents .form option{color:#333333;}
  #page.contact #contents .form dl dd div{
    line-height: 1.6;
  }

	#page.contact #contents .form dl dd #prefid{
    width:15em;
    display:block;
    margin-bottom:15px;
  }

  .radiobox{
  	display: none !important;
  }
    .radio-parts{
    	padding-left: 25px;
    	position:relative;
    	display: block;
    	margin:0 auto;
    }
    .radio-parts::before{
    	content: "";
    	display: block;
    	position: absolute;
    	top: -3px;
    	left: 0;
    	width: 20px;
    	height: 20px;
    	border: 1px solid #999;
    	border-radius: 10px;
    }
    .radiobox:checked + .radio-parts{
    	color: #000;
    }
    .radiobox:checked + .radio-parts::after{
    	content: "";
    	display: block;
    	position: absolute;
    	top: 0px;
    	left: 3px;
    	width: 14px;
    	height: 14px;
      border-radius: 8px;
      background-color:#009a9a;
    }
  		#page.contact #contents .form dl .radio:checked + label{
  		  color: #000;
  		}
  		#page.contact #contents .form dl .radio:checked + label::after{
  		  content: "";
  		  display: block;
  		  position: absolute;
        top: 0px;
      	left: 3px;
      	width: 14px;
      	height: 14px;
        border-radius: 8px;
        background-color:#009a9a;
  		}

	.checkbox{
	  display: none !important;
	}
		.chk-parts{
		  padding-left: 25px;
		  position:relative;
      display: block;
      margin:0 auto;
		}
		.chk-parts::before{
		  content: "";
		  display: block;
		  position: absolute;
		  top: -4px;
		  left: 0;
		  width: 16px;
		  height: 16px;
		  border: 1px solid #999;
		  border-radius: 4px;
		}
		.otoiawase .chk-parts::before{
		  border-radius: 8px;
		}
		.checkbox:checked + .chk-parts{
		  color: #000;
		}
		.checkbox:checked + .chk-parts::after{
		  content: "";
		  display: block;
		  position: absolute;
		  top: -2px;
		  left: 5px;
		  width: 7px;
		  height: 14px;
		  transform: rotate(40deg);
		  border-bottom: 3px solid #009a9a;
		  border-right: 3px solid #009a9a;
		}
	#page.contact #contents .form .errbox{
		display:block;
		width:100%;
		color:#cc3300;
		font-weight:bold;
		clear:both;
		padding:5px 0 0;
	}
  #page.contact #contents .form select.error,
  #page.contact #contents .form input.error,
  #page.contact #contents .form textarea.error,
  #page.contact #contents .form .chk-parts.error::before,
  #page.contact #contents .form .radio-parts.error::before{
  	background-color:#ffd7d7;
    border:1px solid #aa6161;
  }



/*---------- input制御 ----------*/
#page.contact.application #contents .form .name input {width: 60%;}
#page.contact.application #contents .form .furigana input {width: 60%;}
#page.contact.application #contents .form .tel input {width: 60%;}
#page.contact.application #contents .form .qualifications-held textarea,
#page.contact.application #contents .form .self-promotion textarea,
#page.contact.application #contents .form .reason textarea,
#page.contact.application #contents .form .message textarea{
  height:180px;
}


/*---------- input制御 ----------*/

/*---------- waku制御 ----------*/
  #page.contact #contents .form .waku{
    display:table;
    margin-bottom:15px;
    width:100%;
  }
  #page.contact #contents .form .waku:last-child{
    margin-bottom:0;
  }
  #page.contact #contents .form .academic-background .waku > div:nth-child(1),
  #page.contact #contents .form .work-history .waku > div:nth-child(1){
    width:80px;
    margin-right:10px;
    float:left;
  }
  #page.contact #contents .form .academic-background .waku > div:nth-child(2),
  #page.contact #contents .form .work-history .waku > div:nth-child(2){
    width:70px;
    margin-right:10px;
    float:left;
  }
  #page.contact #contents .form .academic-background .waku > div:nth-child(3),
  #page.contact #contents .form .work-history .waku > div:nth-child(3){
    width:470px;
    float:left;
  }

  #page.contact #contents .form .waku.title{
    margin-bottom: 0;
  }
  #page.contact #contents .form .academic-background p,
  #page.contact #contents .form .work-history p{
    margin: 5px 0;
  }
  #page.contact #contents .form .waku.title > div{
    text-align: center;
  }

  #page.contact #contents .form .sex .waku > div{
    float:left;
    margin-right:40px;
  }

  #page.contact #contents .form .address .waku span.sp01{
    margin-right:10px;
    padding: 0;
  }
  #page.contact #contents .form .address .waku span.sp02{
    margin:0 10px;
    padding: 0;
  }
  #page.contact #contents .form .address .waku span.sp03{
    margin-left:20px;
    padding: 0;
  }
  #page.contact.application #contents .form .birthday dd span{
    display:inline-block;
    padding-left:5px;
    padding-right:15px;
  }
  #page.contact.application #contents .form .birthday dd span:first-child{
    padding-left:0;
  }

  #page.contact.application #contents .form .academic-background dd div,
  #page.contact.application #contents .form .work-history dd div{
    display:table;
  }
  #page.contact.application #contents .form .academic-background dd div span,
  #page.contact.application #contents .form .work-history dd div span{
    display:table-cell;
  }
  #page.contact.application #contents .form .academic-background dd .waku div:nth-child(3) span,
  #page.contact.application #contents .form .work-history dd .waku div:nth-child(3) span{
    text-align: right;
    padding-right:10px;
    width:60px;
  }
  #page.contact.application #contents .form .academic-background dd div span:last-child,
  #page.contact.application #contents .form .work-history dd div span:last-child{
    padding-left:5px;
  }

/*---------- waku制御 ----------*/


	#page.contact #contents .form .btn{
		margin:40px auto 40px;
	}
	#page.contact #contents .form .buttonBox{
    margin:40px auto 0;
  }


#page.contact #contents #pleasecontact .box.gry{
	border-top:1px dotted #333333;
}
#page.contact #contents #pleasecontact .box.gry div{
	border-bottom:1px dotted #333333;
	padding:15px 20px;
	font-size:1.2em;
	text-align:center;
}
#page.contact #contents #thanks{padding:0 0 200px;}

#page.contact #contents .form .agreement{margin:40px auto 0;width:76%;}

#page.contact #contents .form .agreement .include{padding:20px 25px;height:200px;overflow-y: scroll;margin:20px 0 20px 0;border:1px solid #ccc;}
#page.contact #contents .form .agreement .include h2{margin:25px 0 5px;font-weight:bold;}
#page.contact #contents .form .agreement .include h2:first-child{margin:0 0 5px;}
#page.contact #contents .form .agreement .include p{margin: 0;}
#page.contact #contents .form .agreement .include address{font-style:normal;margin:40px 0 20px;}
#page.contact #contents .form .agreement .include h3{font-weight:bold;;}
#page.contact #contents .form .agreement .include .sine{float:right;text-align: right;}
#page.contact #contents .form .agreement .include ol{margin: 0;padding:0;}
#page.contact #contents .form .agreement .include li{
  list-style: none;
  margin-left: 0;
  margin-bottom: 0.8em;
  padding-left: 0;
}
#page.contact #contents .form .agreement .consent{
  display:table;
  width:auto;
  margin:0 auto 40px;
}
  #page.contact #contents .form .agreement .consent label{
    display:table;
    padding-bottom:10px;
  }



#page.contact.top #contents .form .type .waku label{
  display:table;
  margin-bottom:10px;
}
#page.contact.top #contents .form .type .waku label:last-child{
  margin-bottom:0;
}

#page.contact.top #contents .form .buttonbox{
  margin:40px auto 0;
}





#page.contact.check #contents .form .academic-background .waku > div:nth-child(1),
#page.contact.check #contents .form .work-history .waku > div:nth-child(1){
  width:auto;
  margin-right:5px;
  margin-bottom:0;
}
#page.contact.check #contents .form .academic-background .waku > div:nth-child(2),
#page.contact.check #contents .form .work-history .waku > div:nth-child(2){
  width:auto;
  margin-right:5px;
  margin-bottom:0;
}
#page.contact.check #contents .form .academic-background .waku > div:nth-child(3),
#page.contact.check #contents .form .work-history .waku > div:nth-child(3){
  text-align: left;
}
#page.contact.check #contents .form .academic-background dd .waku div:nth-child(3) span,
#page.contact.check #contents .form .work-history dd .waku div:nth-child(3) span {
    padding-right: 0;
    padding-left: 20px;
    width: 70px;
    text-align: left;
}


.thanks #page.contact #contents{margin-bottom:40px;}
.thanks #page.contact #contents .form .agreement .description{margin:100px auto 150px;}



@media (max-width: 768px) {
  #page.contact #contents{
    margin-top: 18vw;
    padding:0 0 14vw;
  }
    #page.contact #contents .form {
			padding: 0 0 8vw;
			width:100%;
			margin:0 auto;
		}
    #page.contact #contents .form ul.check{
			padding-top:20px;
		}
    #page.contact #contents .form ul.check li {
      padding: 10px 20px;
    }
		select,
		textarea,
    input[type=text] {
      font-size: 1em;
      scale(0.8);
    }
    #page.contact #contents .form .levelbox{
			width:90%;
		}
	    #page.contact #contents .form .levelbox dt{
				display:table;
				width:auto;
			}
	    #page.contact #contents .form .levelbox dt div{
	      display: table;
	      width: 100px;
	      color: #fff;
	      font-size: 1.2em;
	      position: relative;
	      line-height: 36px;
	      text-align: center;
	      padding-right: 0;
	      padding-bottom: 10px;
	      background-image: url(../images/common/arrow_gry_bt.png);
	      background-repeat: no-repeat;
	      background-position: center bottom;
	    }
	    #page.contact #contents .form .levelbox dd{
	      display:table;
	      width : 100%;
	      width : -webkit-calc(100%) ;
	      width : calc(100%) ;
	    }
	    #page.contact #contents .form .levelbox dd .rangeslider{
	      width: 96%;
	      height:30px;
	      display: table;
	      margin: 0 auto;
	    }
    #page.contact #contents .form dl{
			width:100%;
			margin:0 auto 0;
			padding: 3vw 0;
		}
	    #page.contact #contents .form dl dt,
	    #page.contact #contents .form dl dd{
				height:auto;
				display:inline-block;
				border-bottom:none;
				padding:2vw 0 2vw;
				width:100% !important;
			}
      #page.contact #contents .form dl dt{
        font-weight:bold;
        font-size:4.2vw;
        padding:2vw 0 2vw 0;
        margin-bottom:0;
      }
	    #page.contact #contents .form dl dd{
				padding:0;
				width:100%;
			}

    #page.contact #contents .form select{
			width:100%;
		}
    #page.contact #contents .form dl dd input{
      padding:1vw 0;
			margin:0;
		}
    #page.contact #contents .form dl dd textarea{
      width:100%;
      height:40vw;
    }
    #page.contact #contents .form dl dd select,
    #page.contact #contents .form dl dd input,
    #page.contact #contents .form dl dd textarea {
      font-size: 3.6vw;
      padding:2vw 3vw;
    }
    #page.contact #contents .form dl dd input#postnumber01{
  		width:12vw;
  	}
  	#page.contact #contents .form dl dd input#postnumber02{
  		width:16vw;
  	}
    #page.contact #contents .form dl dd label{
      line-height:1;
      font-size:4vw;
      display:table;
    }
		#page.contact #contents .form dl dd input.textbox {
		   padding: 2vw 3vw;
		}
    #page.contact #contents .form dl dd .fbox{
      padding:0 0 15px 0;
      clear:both;
    }

    .radiobox{
    	position: relative;
    }
      .radio-parts{
      	padding-left: 9vw !important;
      }
      .radio-parts::before{
      	top: -1.5vw;
      	left: 0;
      	width: 6vw;
      	height: 6vw;
      	border-radius: 3vw;
      }
      .radiobox:checked + .radio-parts{
      	color: #000;
      }
      .radiobox:checked + .radio-parts::after{
      	top: 0px;
      	left: 0.5vw;
      	width: 4vw;
      	height: 4vw;
        border-radius: 2vw;
      }
    		#page.contact #contents .form dl .radio:checked + label::after{
          top: 0px;
        	left: 3px;
        	width: 14px;
        	height: 14px;
          border-radius: 8px;
          background-color:#009a9a;
    		}


		.chk-parts {
	    padding-left: 8vw;
	    position: relative;

		}
		.chk-parts::before {
		    top: -1.8vw;
		    width: 5vw;
		    height: 5vw;
		    border-radius: 0.5vw;
		}
		.checkbox:checked + .chk-parts::after {
		    top: -1vw;
		    left: 1vw;
		    width: 2.5vw;
		    height: 5vw;
		    border-bottom: 1.2vw solid #009a9a;
		    border-right: 1.2vw solid #009a9a;
		}


  /*---------- input制御 ----------*/
  #page.contact.application #contents .form .name input {width: 100%;}
  #page.contact.application #contents .form .furigana input {width: 100%;}
  #page.contact.application #contents .form .tel input {width: 100%;}
  #page.contact.application #contents .form .qualifications-held textarea,
  #page.contact.application #contents .form .self-promotion textarea,
  #page.contact.application #contents .form .reason textarea,
  #page.contact.application #contents .form .message textarea{
    height:60vw;
    margin-top:3vw;
  }

  #page.contact.application #contents .form dd span{
    display:inline-block;
    padding-left:1vw;
    padding-right:3vw;
  }
  #page.contact.application #contents .form dd span:first-child{
    padding-left:0;
  }
  /*---------- input制御 ----------*/


  /*---------- waku制御 ----------*/
    #page.contact #contents .form .waku{
      margin-bottom:5vw;
    }

    #page.contact #contents .form .academic-background,
    #page.contact #contents .form .work-history{
      border-bottom: none;
      padding:3vw 0 0;
    }
    #page.contact #contents .form .academic-background .waku:last-child > div:nth-child(2),
    #page.contact #contents .form .work-history .waku:last-child > div:nth-child(2){
      padding-bottom:0;
      border-bottom:none;
    }
    #page.contact #contents .form .academic-background .waku.top,
    #page.contact #contents .form .work-history .waku.top{
      border-top: 1px solid #ccc;
      padding-top: 4vw;
    }
    #page.contact #contents .form .sex .waku > div{
      float:left;
      margin-right:40px;
    }

    #page.contact #contents .form .academic-background .waku,
    #page.contact #contents .form .work-history .waku{
      margin-bottom:0;
      padding-top:4vw;
      padding-bottom:4vw;
      border-bottom:1px solid #ccc;
    }
    #page.contact #contents .form .academic-background .waku > div:nth-child(1),
    #page.contact #contents .form .work-history .waku > div:nth-child(1){
      width:26vw;
      margin-right:2vw;
      margin-bottom:3vw;
    }
    #page.contact #contents .form .academic-background .waku > div:nth-child(2),
    #page.contact #contents .form .work-history .waku > div:nth-child(2){
      width:18vw;
      margin-right:0;
      margin-bottom:3vw;
    }
    #page.contact #contents .form .academic-background .waku > div:nth-child(3),
    #page.contact #contents .form .work-history .waku > div:nth-child(3){
      width:100%;
      float:none;
    }


    #page.contact #contents .form .academic-background p,
    #page.contact #contents .form .work-history p{
      margin: 0 0 2vw 0;
    }
    #page.contact #contents .form .academic-background .waku.title,
    #page.contact #contents .form .work-history .waku.title{
      display: none;
    }

    #page.contact #contents .form .sex .waku > div{
      float:left;
      margin-right:10vw;
    }

    #page.contact #contents .form .address .waku span.sp01{
      margin-right:1vw;
    }
    #page.contact #contents .form .address .waku span.sp02{
      margin:0 1vw;
    }
    #page.contact #contents .form .address .waku span.sp03{
      margin-left:1vw;
    }
    #page.contact.application #contents .form .birthday dd span{
      padding-left:1vw;
      padding-right:4vw;
    }
    #page.contact.application #contents .form .birthday dd span:first-child{
      padding-left:0;
      padding-right:2vw;
    }

    #page.contact.application #contents .form .academic-background dd div span:last-child,
    #page.contact.application #contents .form .work-history dd div span:last-child{
      padding-left:2vw;
    }

    #page.contact.application #contents .form .academic-background dd .waku div:nth-child(3) span,
    #page.contact.application #contents .form .work-history dd .waku div:nth-child(3) span{
      text-align: left;
      padding-right:0;
      width:10vw;
    }
  /*---------- waku制御 ----------*/



		#page.contact #contents .form .agreement {
	      margin: 40px auto;
	      width: 100%;
	  }
	  #page.contact #contents .form .agreement .include {
	      padding: 4vw;
	      height: 35vw;
	      margin: 4vw 0 6vw 0;
        scrollbar-width: thin;
	  }

    #page.contact #contents .form .agreement .include h2{margin:6vw 0 1vw;}
    #page.contact #contents .form .agreement .include h2:first-child{margin:0 0 1vw;}
    #page.contact #contents .form .agreement .include address{margin:8vw 0 5vw;}

    #page.contact #contents .form .agreement .include h2,
    #page.contact #contents .form .agreement .include p,
    #page.contact #contents .form .agreement .include li,
    #page.contact #contents .form .agreement .include address,
    #page.contact #contents .form .agreement .include div,
    #page.contact #contents .form .agreement .include a{font-size:0.95em;}


    #page.contact #contents .form .buttonBox{
      margin:12vw auto 0;
    }

    #page.contact #contents .form .agreement .Cheak-Box{
      margin:5vw auto 10vw;
    }
      #page.contact #contents .form .agreement .Cheak-Box label{
        padding-bottom:2.5vw;
      }


    #page.contact.top #contents .form .type .waku label{
      margin-bottom:5vw;
    }

    #page.contact.top #contents .form .buttonbox{
      margin:8vw auto 0;
    }

    #page.check #contents .form div,
    #page.check #contents .form span,
    #page.check #contents .form p {
        font-size: 4.2vw;
    }
    #page.contact.check #contents .form .academic-background .waku > div:nth-child(1),
    #page.contact.check #contents .form .work-history .waku > div:nth-child(1){
      width:auto;
      margin-right:1vw;
      margin-bottom:1vw;
    }
    #page.contact.check #contents .form .academic-background .waku > div:nth-child(2),
    #page.contact.check #contents .form .work-history .waku > div:nth-child(2){
      width:auto;
      margin-right:0;
      margin-bottom:1vw;
    }
    #page.contact.check #contents .form .academic-background .waku > div:nth-child(3),
    #page.contact.check #contents .form .work-history .waku > div:nth-child(3){
      width:100%;
    }
    #page.contact.check #contents .form .academic-background dd .waku div:nth-child(3) span,
    #page.contact.check #contents .form .work-history dd .waku div:nth-child(3) span {
        padding-right: 0;
        padding-left: 0;
        width: 13vw;
    }
}