@charset "UTF-8";

#title {
	width:100%;
	height:250px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
#main.philosophy #title {
	background-image:url(../img/sub/tit_philosophy.jpg);
}
#main.philosophy #title {
	background-image:url(../img/sub/tit_philosophy.jpg);
}
#main.recycle #title {
	background-image:url(../img/sub/tit_recycle.jpg);
}
#main.company #title {
	background-image:url(../img/sub/tit_company.jpg);
}
#main.nakashou #title {
	background-image:url(../img/sub/tit_nakashou.jpg);
}
#main.hokushou #title {
	background-image:url(../img/sub/tit_hokushou.jpg);
}
#main.nakashou_recycle #title {
	background-image:url(../img/sub/tit_nakashou_recycle.jpg);
}
#main.contact #title {
	background-image:url(../img/sub/tit_contact.jpg);
}
#main.privacy #title {
	background-image:url(../img/sub/tit_privacy.jpg);
}
#main.sitemap #title {
	background-image:url(../img/sub/tit_privacy.jpg);
}
#title h1 {
	width:360px;
	height:100%;
	min-height:100%;
	background:rgba(255,255,255,.7);
	font-size:25px;
	color:#003F76;
	line-height:1.5em;
	text-align:center;
	max-width:1200px;
	padding-top:100px;
	letter-spacing:0.5em;
	position:relative;
	box-sizing:border-box;
}
#title h1 span {
	display:block;
	font-size:16px;
	line-height:1em;
	font-family: 'Tinos', serif;
	font-style:italic;
	font-weight:100;
	letter-spacing:2px;
	padding-top:1em;
}

#contents {
	width:calc(100% - 40px);
	max-width:910px;
	margin:0 auto;
	padding:100px 0;
}

#contents a.btn,
#contents a.btn:link,
#contents a.btn:visited {
	display:block;
	width:236px;
	height:55px;
	background:url(../img/sub/btn.jpg) no-repeat center center;
	background-size:contain;
	font-size:17px;
	color:#FFF;
	font-weight:600;
	text-align:center;
	line-height:55px;
	position:relative;
	margin:0 auto;
	transition:.3s;
}
#contents a.btn .svg-inline--fa {
	position:absolute;
	right:0.7em;
	font-size:24px;
	top:calc(50% - 12px);
	transition:.3s;
}
#contents a.btn:hover{
	opacity:0.8;
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
}
#contents a.btn:hover .svg-inline--fa {
	right:0.4em;
}

#contents ul.smenu {
	letter-spacing:-0.4em;
	text-align:center;
}
#contents ul.smenu li {
	display:inline-block;
	letter-spacing:normal;
	vertical-align:top;
}
#contents ul.smenu li a,
#contents ul.smenu li a:link,
#contents ul.smenu li a:visited {
	display:block;
	font-size:14px;
	line-height:1em;
	margin:0;
	padding:0.5em 1em;
	border:1px solid #003F76;
	color:#003F76;
}
#contents ul.smenu li:nth-child(n+2) a {
	border-left:none;
}
#contents ul.smenu li a:hover {
	background:#003F76;
	color:#FFF;
}


@media screen and (max-width:1200px){
	
}

@media screen and (max-width:1024px){

#title {
	width:100%;
	height:200px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
#title h1 {
	width:300px;
	font-size:24px;
	padding-top:65px;
}
#title h1 span {
	font-size:16px;
	padding-top:0.8em;
}
	
#contents {
	padding:90px 0;
}

}

@media screen and (max-width:768px){

#title {
	height:150px;
}
#title h1 {
	width:250px;
	font-size:20px;
	padding-top:50px;
}
#title h1 span {
	font-size:15px;
	padding-top:0.5em;
}
	
#contents {
	padding:60px 0;
}

#contents ul.smenu li a:hover {
	background:none;
	color:#003F76;
}
	
}

@media screen and (max-width:640px){

#title {
	height:120px;
}
#title h1 {
	width:200px;
	font-size:18px;
	padding-top:40px;
}
#title h1 span {
	font-size:14px;
}

#contents {
	padding:45px 0;
}

}

@media screen and (max-width:480px){

#title {
	height:130px;
}
#title h1 {
	width:100%;
	height:auto;
	min-height:auto;
	background:url(../img/sub/titlebg.png) repeat-y center center;
	background-size:100% auto;
	padding:0.8em 2em;
	text-align:left;
	line-height:1;
	font-size:16px;
	color:#FFF;
}
#title h1 span {
	font-size:13px;
	display:inline-block;
	margin-left:1em;
	padding:0;
}

	

}