*{	box-sizing: border-box;box-sizing: border-box;}

body,html{
	padding:0;
	margin:0;
}

.inner{
	width:100%;
	max-width:880px;
	margin:0 auto;
	padding:0 20px;
	box-sizing: border-box;
}

/*	header
-------------------------------*/
header{
	background:#666;
	width:100%;
	height:50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;
	font-weight: bold;
	font-size:18px;
}

header h1{
	color:#FFF;
	font-size:22px;
}


/*	main
-------------------------------*/
main{
	padding-top:20px;
	width:100%;
	background:#f4f4f4;
	height:100vh;
}

#print{
	position:absolute;
	bottom:0;
	left:20px;
	width:40px;
	height:40px;
	border:1px solid #ccc;
	background:#fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:14px;
	user-select: none;
	cursor: pointer;
	padding:5px;
	box-shadow:3px 3px 5px #0003;
}

#print img{
	width:100%;
	height:auto;
}

#print:hover{
	background:#007E6A;
	border:none;
}

/* ################### 780px 以上 ################## */
@media(min-width:780px){

	main table{
		width:100%;
		border-collapse: collapse;
	}

	main table tr th,
	main table tr td{
		border:1px solid #ccc;
		padding:0;
		text-align: center;
		font-size:12px;
	}

	main table tr th{
		PADDING:10PX;
		background:#007E6A;
		color:#FFF;
	}

	main table th.makert{
		width:120px;
	}

	main table th.productt{
		width:200px;
	}

	main table th.count{
		width:120px;
	}

	main table tr td{
		background:#ffffff;
		color:#333;
	}

	main table select,
	main table input,
	main table span.result,
	main table span.plastic{
		padding:5px;
		font-size:14px;
	}

	main table sub {
	  font-size: 0.75em;
	  vertical-align: 0;
	}

	main table select,
	main table input{
		border:1px solid #ccc;
		background:#fff;
		font-size:14px;
	}

	main table select.maker{
		width:100%;
	}

	main table select.product{
		width:100%;
		min-width:150px;
	}

	main table input{
		text-align: right;
		margin-right:5px;
		width:100%;
		max-width:100px;
	}

	main table input.no{
		width:80px;
	}

	main table span.result,
	main table span.plastic{
		text-align: right;
		margin-right:5px;
		display: inline-block;
		font-size:16px;
	}

	main table span.result{
		width:CALC(100% - 60PX);
	}

	main table span.plastic{	
		width:CALC(100% - 40PX);
	}

	main td.number input{
		width:calc(100% - 30px);
	}

	main table tr#goukei td{
		height:50px;
	}

	#keip,#keir{
		text-align: right;
		padding:0 10px 0 0;
		font-size:16px;
		font-weight: bold;
	}


	#keip .result ,#keir .result{
		font-weight: bold;
	}

	#keip span,#keir span{
		font-size:24px;
		margin-right:0.5em;
	}

	#blank{
		border:none;
		background:none;
	}

	#gouketitle{
		background:#007E6A;
		color:#FFF;
		font-size:20px;
		font-weight: bold;
	}

	main .inner{
		position:relative;
	}

}

/* ################### 780px　未満 ################## */
@media(max-width:779px){
	main{
		padding-bottom:80px;
		height:auto;
	}

	main table{
		margin:0 auto;
	}

	main table tr{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:10px 20px 15px;
		border:1px solid #007E6A;
		background:#FFF;
		border-radius: 7px;
		box-shadow:3px 3px 7px #0003;
		margin-bottom:20px;
	}

	main table tr.th{
		display:none;
	}

	main table td{
		font-size:14px;
	}

	main table td sub{
		font-size:12px;
	}

	main table td.makert,
	main table td.productt,
	main table td.count{
		display:block;
		width:100%;
		margin-bottom:5px;
	}

	main table td.count{
		margin-bottom:15px;
		text-align: right;
	}

	main table td.plastic,
	main table td.result{
		width:calc(50% - 10px);
		text-align: right;
		border-bottom:1px solid #000;
		position:relative;
		font-size: 12px;
	}

	main table td.plastic:before,
	main table td.result:before{
		position:absolute;
		top:-10px;
		left:0;
		font-size:10px;
	}

	main table td.plastic:before{
		content:"プラスティック容器";
	}

	main table td.result:before{
		content:"CO2排出量";
	}


	main table td.plastic span,
	main table td.result span{
		font-size:18px;
		margin-right:5px;
		font-weight:500;
	}

	main table td select,
	main table td input{
		border:1px solid #ccc;
		background:#FFF;
		padding:5px 10px;
		border-radius:5px;
		font-size:15px;
	}

	main table td select{
		width:100%;
	}

	main table td input{
		width:100px;
		margin-right:10px;
		text-align: right;
	}


	table tr#goukei{
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		background:#007E6A;
		border-radius: 0;
		margin:0;
		border:none;
		padding:30px 20px 10px;
	}

	table tr#goukei td{
		font-size:14px;
		font-weight: bold;
		color:#FFF;
	}

	table tr#goukei td span{
		font-size:20px;
		margin-right:0.2em;
	}

	table tr#goukei td#gouketitle{
		width:50px;
		font-size:18px;
	}

	table #goukei #blank{
		display: none;
	}

	table td#keip,
	table td#keir{
		width:calc((100% - 50px) / 2 - 20px);
		position:relative;
		text-align: right;
	}

	table td#keip:before,
	table td#keir:before{
		position:absolute;
		top:-18px;
		left:0;
		font-size: 12px;
	}

	table td#keip:before{
		content:"プラスチック容器";
	}

	table td#keir:before{
		content:"CO2 排出量";
	}

	#print{
		position:fixed;
		bottom:50px;
		left:auto;
		right:20px;
		z-index:1000;
		border-radius: 5px;
	}

}



@media print {
    @page {
        size: A4 landscape;
    }

    main{
    	width:297mm;
    	height:210mm;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }

    main .inner:before{
    	content:"リサイクルカートリッジCO2排出量計算表";
    	color:#007E6A;
    	text-align: center;
    	font-size:24px;
    	display: block;
    	font-weight: bold;
    	width:100%;
    	margin-bottom:10px;
    }

    main .inner:after{
    	color:#666;
    	padding-top:5px;
    	content:"(c)一般社団法人 日本カートリッジリサイクル工業会";
    	text-align: right;
    	font-size:16px;
    	display: block;
    	width:100%;
    }

    #print{
    	display:none;
    }


}