@charset "UTF-8";
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}*{box-sizing:border-box;}

html{
	width:100%;
	height:100%;
	-webkit-text-size-adjust:none;
	font-size:62.5%;
	@media screen and (max-width:700px){
		font-size:1.35vw;
	}
}
body{
	width:100%;
	font-family:-apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴPro", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
	line-height:1.8em;
	font-size:1.5rem;
	color:#000;
}
h1,h2,h3,h4,h5,h6{
	font-weight:normal;
}
a{
	/*color:#1d77a3;*/
	color:#595959;
	cursor:pointer;
	transition:opacity 0.2s ease 0s, color 0.2s ease 0s;
	/*text-decoration:none;*/
	text-decoration:underline;
}
a:hover{
	color:#d69d00;
	opacity:0.7;
}
img{
	vertical-align:top;
}
small{
	font-size:0.9em;
}
.text_center{
	text-align:center;
}
.text_heavy{
	font-family:'Noto Sans JP';
	font-weight:900;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
}
img{
	display:block;
	max-width:100%;
	min-height:auto;
}
img.inline{
	display:inline-block;
}
.img_icon{
	display:inline-block;
	width:100%;
	max-width:1em;
	margin:0 4px 0 0;
	vertical-align:middle;
	position:relative;
	top: -0.1em;
}
.alpha{
	backface-visibility:hidden;
	transition:opacity 0.2s ease 0s;
	zoom:1;
}
.alpha:hover{
	opacity:0.6;
}
.bn_cta{
	display:inline-block;
	width:100%;
	max-width:400px;
	box-sizing:border-box;
	padding:1.2em 1em 1.2em 1.6em;
	position:relative;
	z-index:1;
	top:0;
	overflow:hidden;
	color:#fff !important;
	vertical-align:middle;
	font-weight:bold;
	font-size:1.8rem;
	border-radius:2em;
	border:solid 2px #01a699;
	line-height:1;
	letter-spacing:0.03em;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	font-feature-settings:"palt" 1;
	letter-spacing:0.05em;
	background:#fff;
	box-shadow:1px 4px 0px 0px rgba(0,0,0,0.05);
	transition:top 0.2s ease 0s, opacity 0.2s ease 0s, box-shadow 0.2s ease 0s, border 0.4s ease 0s, color 0.1s ease 0s, background 0.2s ease 0.2s;
	&:hover{
		top:-3px;
		opacity:1;
		box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.5) !important;
		color:#fff !important;
		border:solid 2px #01a699;
	}
	&:before{
		content:"";
		display:block;
		background:#00cea6;
		width:100%;
		height:100%;
		opacity:1;
		position:absolute;
		left:-100%;
		top:0;
		z-index:-1;
		border-radius:2em;
		transition:left 0.3s ease 0s, opacity 0s ease 0.3s;
	}
	&:hover:before{
		width:100%;
		left:0;
	}
	_:-ms-lang(x)::-ms-backdrop, .bn_cta:before{
		display:none;
	}
	_:-ms-input-placeholder, :root .bn_cta:before{
		display:none;
	}
	&:after{
		content:"";
		display:block;
		width:0.8em;
		height:0.8em;
		position:absolute;
		right:0.5em;
		top:50%;
		margin-top:-0.4em;
		background:url(../img/icon_arrow_yellow.svg) no-repeat center center/contain;
	}
	&:hover:after{
		background-image:url(../img/icon_arrow_white.svg);
	}
}
.bn_cta.green{
	background-color:#01a699;
	border:none;
	box-shadow:1px 4px 0px 0px rgba(0,109,96,0.9);
	color:#fff !important;
	&:hover{
		box-shadow: 0px 4px 7px 0px rgba(0,109,96,0.9);
	}
	&:before{
		background:#00cea6;
	}
	&:hover:before{
		left:0 !important;
	}
	&:after{
			background-image:url(../img/icon_arrow_white.svg);
	}
}
.bn_cta.red{
	background-color:#f55447;
	border:none;
	box-shadow:1px 4px 0px 0px rgba(170,62,57,0.9);
	color:#fff !important;
	&:hover{
		box-shadow: 0px 4px 7px 0px rgba(170,62,57,0.9);
	}
	&:before{
		background:#ff6f6c;
	}
	&:hover:before{
		left:0 !important;
	}
	&:after{
			background-image:url(../img/icon_arrow_white.svg);
	}
}
.bn_cta.taryo{
	padding: .8em 1em .8em 1.6em;
	background-color:transparent;
	border-color:#fff;
	box-shadow:none;
	color:#fff !important;
	&:hover{
		opacity:0.6;
		box-shadow: 0px 4px 7px 0px rgba(0,109,96,0.9);
	}
	&:before{
		display:none;
	}
	&:after{
		background-image:url(../img/icon_arrow_white.svg);
	}
	.img_icon{
		max-width: 2.5em;
	}
}

@media screen and (max-width:768px) {
	html{
		font-size:62.5%;
	}
	.bn_cta{
		font-size:1.6rem;
	}
}


/* ============================================================
ログイン広告ページ用CSS
============================================================ */
.login_contents_wrap{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:100vh;
	padding:0 2%;
	@media screen and (max-width:768px) {
		padding: 30px 5%;
	}
}

.login_pop{
	text-align:center;
	p{
		display: inline-block;
		margin: 0 0 15px;
		position: relative;
		z-index: 1;
		padding: 0.4em 0.6em 0.5em;
		border-radius: 0.3em;
		background: #fff;
		font-size: 3rem;
		color:#000;
		line-height: 1.2em;
		filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
		&:after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 20px 20px 0 20px;
			border-color: #fff transparent transparent transparent;
			position: absolute;
			bottom: -15px;
			left: 50%;
			margin-left: -20px;
		}
	}
}
.login_title{
	margin:0 auto 1.2em;
	font-size:3.4rem;
	line-height:1.2em;
	#login_contents_erc &{
		color:#fff;
	}
	#login_contents_genbaton &{
		font-size:4.5rem;
		color:#fff;
	}
	small{
		font-size:0.6em;
		line-height:1.6em;
	}
}

.login_notice{
	margin: 1em 0 0;
	font-size:0.95em;
	line-height:1em;
}

@media screen and (min-width:769px){
	.pc_hide{
		display:none !important;
	}
}

@media screen and (max-width:768px) {
	.sp_hide{
		display:none !important;
	}
	.login_pop{
		p{
			font-size:4vw;
		}
	}
	.login_title{
		font-size:4.8vw;
	}
}

#login_contents_mainte{
		background:#f4f4f4;
}

/* login_taryo
---------------------------------------------------------------------------------------- */
#login_taryo{
	background: linear-gradient(to bottom, #d70c18 0%,#ff5c3d 50%,#ff7700 100%);
}
.login_taryo_logo,
.login_recycle_logo{
	max-width: 390px;
	margin:0 auto 10px;
}
.login_taryo_image{
	max-width: 400px;
	margin:0 auto 15px;
}
.login_taryo_title{
	margin:0 0 0.5em;
	color:#fff;
	font-size:8vw;
	line-height:1em;
	small{
		display:block;
		font-size:0.5em;
		line-height:1.2em;
	}
}
.login_cta{
	margin:15px 0 0;
}

/* login_recycle
---------------------------------------------------------------------------------------- */
#login_recycle{
	background-image:url(../img/login/img_login_recycle_bg_02.webp), url(../img/login/img_login_recycle_bg_01.webp);
	background-repeat:no-repeat, no-repeat;
	background-size:80%, cover;
	background-position:center center;
}
.login_recycle_image{
	max-width: 380px;
	margin:0 auto 15px;
}
.login_recycle_title{
	margin:0 0 0.5em;
	color:#fff;
	font-size:9vw;
	line-height:1em;
	small{
		display:block;
		font-size:0.33em;
		line-height:1.4em;
	}
}

/* login_tansomiru
---------------------------------------------------------------------------------------- */
#login_tansomiru{
	background:url(../img/login/img_login_tansomiru_bg.webp) no-repeat center center/cover #fff;
}
.login_tansomiru_image{
	max-width: 420px;
	margin:0 auto 15px;
}
.login_tansomiru_logo{
	max-width: 370px;
	margin:0 auto 20px;
}
.login_tansomiru_title{
	margin:0 0 .7em;
	font-size:5.5vw;
	line-height:1.2em;
	color:#0082e6;
}

/* login_greenfile
---------------------------------------------------------------------------------------- */
#login_greenfile{
	background:url(../img/login/img_login_greenfile_bg.webp) repeat center center/70px;
}
.login_greenfile_image{
	max-width: 360px;
	margin:0 auto 15px;
}
.login_greenfile_logo{
	max-width: 340px;
	margin:0 auto 20px;
}
.login_greenfile_title{
	margin:0 0 .7em;
	font-size:6vw;
	line-height:1.2em;
	color:#1eac4a;
}

/* login_co2media
---------------------------------------------------------------------------------------- */
#login_co2media{
	background:url(../img/login/img_login_co2media_bg.webp) no-repeat center bottom/contain #fff;
}
.login_co2media_logo{
	max-width: 490px;
	margin:0 auto 20px;
}
.login_co2media_title{
	margin:0 0 .7em;
	font-size:6vw;
	line-height:1.2em;
	color:#1eac4a;
}
.login_co2media_tm{
	display:flex;
	align-items:center;
	justify-content:space-evenly;
	gap:15px;
	padding:20px;
	margin:40px 0 0;
	border-radius:10px;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.05));
	background:#fff;
	figure{
		width:43%;
		flex-shrink:0;
	}
	.bn_cta{
		min-width: 15em;
		font-size: 1.5rem;
	}
}