@charset "utf-8";

/* --------------------
  contact page styles
  --------------------- */
.pg_contact_recycling .contactSection .commonTbl {
    margin: 2.5em auto 0;
}

.pg_contact_recycling .commonTbl th,
.pg_contact_recycling .commonTbl td {
    border: 1px solid #6398c0;
    padding: 1.25em;
}

.pg_contact_recycling .commonTbl th,
.pg_contact_recycling .commonTbl .th {
	color: #0a3d64;
}

.pg_contact_recycling .commonTbl thead th {
    background: #e1e7ef;
    font-weight: bold;
    width: 25%;
	text-align: center;
}

.pg_contact_recycling .commonTbl th:first-child {
    width: 22%;
}

.pg_contact_recycling .commonTbl th:nth-child(2) {
    width: 39%;
}

.pg_contact_recycling .commonTbl th:last-child {
    width: 39%;
}

.pg_contact_recycling .commonTbl .th {
    background: #f7f9fa;
    font-weight: bold;
}


.pg_contact_recycling .commonTbl thead {
    background: #e1e7ef;
}

@media print, screen and (max-width: 767px) {
    .pg_contact_recycling .commonTbl {
        
    }
    .pg_contact_recycling .commonTbl thead  {
        border-top:  1px solid #6398c0;
        border-bottom:  1px solid #6398c0;
    }

    .pg_contact_recycling .commonTbl thead th {
        padding: 10px 0;
    }


    .pg_contact_recycling .commonTbl tr {
        padding: 0;
    }
    
    .pg_contact_recycling .commonTbl th,
    .pg_contact_recycling .commonTbl td {
        border: 0;
        align-items: center;
    }
    
    .pg_contact_recycling .commonTbl .th {
        padding:10px;
        font-size: 1.1em;
    }

    .pg_contact_recycling .commonTbl .th:before {
        display: none;
    }
}



.pg_contact_recycling .flowFrame,
.pg_form .flowFrame {
	margin: 2em 0;
	max-width: 300px;
	overflow: hidden;
}

.pg_contact_recycling .flowFrame.m-auto,
.pg_form .flowFrame.m-auto {
	margin: 2em auto;
}

.pg_contact_recycling .flowFrame ul,
.pg_form .flowFrame ul {
	display: flex;
	justify-content: space-between;
}

.pg_contact_recycling .flowFrame li,
.pg_form .flowFrame li {
	counter-increment: idx;
	position: relative;
	font-size: .8em;
	line-height: 1;
	text-align: center;
	z-index: 1;
}

.pg_contact_recycling .flowFrame li {
	/*font-size: 1.4rem;*/
}

@media print, screen and (max-width: 767px) {
	.pg_contact_recycling .flowFrame li {
		font-size: .9em;
	}

	.pg_contact_recycling .flowFrame {
		margin-bottom: 0;
		max-width: 240px;
	}
}

.pg_contact_recycling .flowFrame li:before,
.pg_form .flowFrame li:before {
	content: counter(idx);
	display: block;
	box-sizing: border-box;
	margin: 0 auto .5em;
	width: 2em;
	height: 2em;
	line-height: 2em;
	font-size: 1.35em;
/*	background: #fff;
	border: 1px solid var(--keyColor);*/
	background: #ccc;
	border-radius: 50%;
/*	color: var(--keyColor);*/
  color: #fff;
	text-align: center;
}

.pg_contact_recycling .flowFrame li:not(:last-of-type):after,
.pg_form .flowFrame li:not(:last-of-type):after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: calc(1.5em - 2px);
	width: 227%;
	height: 3px;
/*	background: var(--keyColor);*/
	background: #ccc;
	transform: translate(0, -50%);
	z-index: -1;
}

.pg_contact_recycling .flowFrame li:not(:last-of-type):after{
	width: 300%;
	height: 1px;
}

.pg_contact_recycling .flowFrame .current,
.pg_form .flowFrame .current {
	font-weight: bold;
	color: var(--keyColor);
}

.pg_contact_recycling .flowFrame .current:before,
.pg_form .flowFrame .current:before {
	color: #fff;
	background: var(--keyColor);
	font-weight: normal;
}

.pg_contact_recycling .formTbl {
	margin: 2.5em auto;
	width: 100%;
}

.pg_contact_recycling .formTbl th,
.pg_contact_recycling .formTbl td {
	padding: 1em;
}

.pg_contact_recycling .formTbl th {
	width: 18em;
	padding-left: 0;
	text-align: left;
	font-weight: normal;
}

.pg_contact_recycling .formTbl .no-req,
.pg_contact_recycling .formTbl .req {
	display: inline-block;
	width: 3em;
	height: 1.75em;
	line-height: calc(1.75em - 2px);
	margin: 0 1em 0 0;
	font-size: .75em;
	color: #009688;
	border: 1px solid #009688;
	border-radius: 2px;
	text-align: center;
}

.pg_contact_recycling .formTbl .req {
	color: var(--keyColor);
	border: 1px solid var(--keyColor);
}

.pg_contact_recycling .formTbl .label {
	display: inline-block;
	margin-right: 2em;
}

.pg_contact_recycling .formTbl .guide {
	display: inline-block;
	font-size: .9em;
	color: #666;
}

.pg_contact_recycling .formTbl .guide:not(:first-child) {
	margin-left: 1em;
}

@media print, screen and (max-width: 767px) {
	.pg_contact_recycling .formTbl th,
	.pg_contact_recycling .formTbl td {
		padding: 1.25em 0
	}
	.pg_contact_recycling .formTbl th {
		padding-bottom: 0;
	}

	.pg_contact_recycling .formTbl td {
		padding-top: .75em;
	}
}


/* form page styles */
.pg_form .formSection .container {
	max-width: 900px;
}

.pg_form .formWrap {
	background: #f6f6f6;
	padding: 5% 8%;
}

.pg_form .formList .no-req,
.pg_form .formList .req {
	position: relative;
	top: -.1em;
	display: inline-block;
	width: 3.25em;
	height: 1.75em;
	line-height: 1.75em;
	margin: 0 0 0 1em;
	font-size: .8em;
	color: #fff;
	background: #bbb;
	border-radius: .25em;
	text-align: center;
	vertical-align: middle;
}

.pg_form .formList .req {
	background: #ff9900;
}

.pg_form .formList:not(.commonList) .tr {
	padding: .75em 0;
}

.pg_form .formList:not(.commonList) .th {
	font-size: .9em;
	font-weight: bold;
	margin: 0 0 .5em;
}

.pg_form .formList input[type="text"],
.pg_form .formList input[type="tel"],
.pg_form .formList input[type="email"],
.pg_form .formList input[type="password"],
.pg_form .formList input[type="date"],
.pg_form .formList select,
.pg_form .formList textarea {
	background: #fff;
}