/*============================================================================
モニター応募
============================================================================*/
@charset "utf-8";

article{
    min-height:100vh;
}

/*----------------------------------------------------------------------------
モニター募集
----------------------------------------------------------------------------*/
article h3{
    text-align:center;
    border:none;
    font-size:32px;
    line-height:24px;
    color:#ffffff;

	background:#008000;

	/*
	background:linear-gradient( 60deg,#12d6df, #f70fff,#faea3d, #fd644f);
    background-size:400%;
    animation: textAnime 15s infinite;
	*/
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
}

/*
@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
*/

article dl.recruitment_monitor{
    width:100%;
    margin:20px auto 20px auto;
    font-size:20px;
    line-height:20px;
    background:#dff6ff;
    border-bottom:solid 1px #000000;
    border-left:solid 1px #000000;
    border-right:solid 1px #000000;
}

article .recruitment_monitor{
	display:grid;
	grid-template-columns:30% 70%;
}

article .recruitment_monitor dt{
    padding:5px;
    border-top:solid 1px #000000;
}

article .recruitment_monitor dd{
    padding:5px;
    line-height:30px;
    background:#ffffff;
    border-top:solid 1px #000000;
    border-left:solid 1px #000000;
}

@media screen and (max-width:800px){
	article .recruitment_monitor{
		display:blocl;
		grid-template-columns:none;
	}
	
	article .recruitment_monitor dt{
		width:100%;
	}
	
	article .recruitment_monitor dd{
		width:100%;
		border-left:none;
	}
}

article .recruitment_monitor b.big{
    font-size:32px;
    line-height:32px;
    color:#ff0000;
}

article .recruitment_monitor ul{
    list-style:none;
    margin:0;
    padding:0;
}

article .recruitment_monitor li{
    list-style-type:disc;    
    margin-left:30px;
}


article .recruitment_monitor .kojin_joho{
    height:200px;
    overflow-y:scroll;
    line-height:20px;
}

/*----------------------------------------------------------------------------
モニター応募
----------------------------------------------------------------------------*/
article .mailform{
    display:block;
}

article .confirm{
    display:none;
}

article .endForm{
    display:none;
}

article .errorForm{
    display:none;
}

article .mailform dl,
article .confirm dl{
	display:grid;
	grid-template-columns:30% 70%;
    margin:20px auto 20px auto;
    background:#ffffc7;
    border-bottom:solid 1px #000000;
    border-left:solid 1px #000000;
}

article .confirm dl{
    background:#ffccdd;
}

article .mailform dt,
article .confirm dt{
    border-top:solid 1px #000000;
    padding:5px;
}

article .mailform dd,
article .confirm dd{
    border-left:solid 1px #000000;
    border-right:solid 1px #000000;
    border-top:solid 1px #000000;
    background:#ffffff;
    padding:5px;
}

@media screen and (max-width:800px){
	article .mailform dl,
	article .confirm dl{
		width:100%;
		display:block;
		grid-template-columns:none;
		border-right:solid 1px #000000;
	}	

	article .mailform dt,
	article .confirm dt{
		width:100%;
	}
		
	article .mailform dd,
	article .confirm dd{
		width:100%;
		border-left:none;
		border-right:none;
	}	
}

article .mailform dl.inside,
article .confirm dl.inside{
	margin:0;
	display:grid;
	grid-template-columns:110px auto;
	border:none;
	background:transparent;
}

article .mailform dl.inside dt,
article .confirm dl.inside dt{
	border:none;
	background:transparent;
	font-weight:normal;
	padding:5px 0 0 0;
}

article .confirm dl.inside dt{
	font-weight:bold;	
	padding:0 0 0 0;
}

article .mailform dl.inside dd,
article .confirm dl.inside dd{
	border:none;	
	background:transparent;
	padding:0;
}

article .mailform sup{
    color:#ff0000;
}

article .mailform .attention:before{
	content:"◆";
	font-size:12px;
	position:absolute;
	left:-16px;
}

article .mailform .attention{
	color:#1d3e99;
	font-size:18px;
	font-weight:bold;
	line-height:18px;
	margin:5px 0 5px 16px;
	position:relative;
}

article .mailform input[type='text']{
    font-size:20px;
    line-height:20px;
    width:calc(100% - 0px);
    padding:5px;
    margin:2px 0;
    border:solid 1px #a0a0a0;
    border-radius:4px;
}

article .mailform input.zipcode{
    width:40%;
}

article .mailform input.phone{
    width:46%;
}

article .mailform input.address1,article .mailform input.address2{
    width:80%;
}

article .mailform input.place{
    width:80%;
}

article .mailform input.heibei,
article .mailform input.power,
article .mailform input.id{
    width:30%;
}

article .mailform textarea.memo{
    width:100%;
	height:calc(20px * 5 + 10px);
    font-size:20px;
    line-height:20px;
    padding:5px;
    margin:2px 0;
    border:solid 1px #a0a0a0;
    border-radius:4px;
	overflow-y:scroll;
}

article .mailform input.files{
	margin-top:10px;
}

article .mailform input.error{
    background:#ffd2d2;
}

article .mailform div.error{
    display:none;
    color:#ff0000;
}

article .mailform .button,article .confirm .button{
    text-align:center;
}

article .button button{
    width:70%;
    margin:0 auto 40px auto;
    padding:20px;
    color:#000000;
    background:#e0e0e0;
    border-radius:40px;
    font-size:24px;
    line-height:24px;
    font-weight:bold;
    text-align:center;
}

article .button button:hover{
    background:#ffe0e0;
}

article .button button.return{
    width:30%;    
}

article .button button.sendmail{
    width:50%;    
}

/*============================================================================
EOF
============================================================================*/