@charset "UTF-8";

@media screen and ( max-width:640px ) {
	body {
		min-width: 320px;
		width: 100%;
	}
	.onlySp,
	nav.gNav ul.menu li.onlySp {
		display: inline-block;
	}
	.onlyPc {
		display: none;
	}

	/*---- ヘッダー ----*/
	header {
		width: 100%;
		padding: 30px 5%;
		border-bottom: 2px solid #07569e;
	}
	h1 {
		width: 70%;
	}
	h1 img {
		max-width: 200px;
		width: 100%
	}
	header h2,
	#headerContact {
		display: none;
	}

	/*---- グローバルナビ ----*/
	.navButton {
		display: block;
		cursor: pointer;
	}
	.gNav.open {
	  display: block;
	  padding: 20px 0 0;
	}
	.gNav.close {
	  display: none;
	}
	nav.gNav {
		position: fixed;
		left: 0;
	    top: 0;
	    display: none;
	    z-index: 10;
	    background-color: rgba(0, 175, 235, 0.9);
	    width: 100%;
	    height: 100%;
		border: none;
	}
	.nav {
		height: 100%;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
	}
	nav.gNav ul.menu {
		width: 90%;
	}
	nav.gNav ul.menu li {
		display: block;
		width: 100%;
		border: none;
		font-size: 2.0rem;
		font-weight: 500;
		text-align: left;
	}
	nav.gNav ul.menu li + li {
		border: none;
	}
	nav.gNav ul.menu li a {
		color: #fff;
	}
	nav.gNav li.current a {
		border-bottom: none;
	}
	/*---- グローバルナビボタンのエフェクト ----*/
	.navButton,
	.navButton span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	}
	.navButton {
		z-index: 20;
		position: relative;
		width: 38px;
		height: 28px;
	}
	.navButton span {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 3px;
		background-color: #000;
		border-radius: 4px;
	}
	.navButton span:nth-of-type(1) {
		top: 0;
	}
	.navButton span:nth-of-type(2) {
		top: 12px;
	}
	.navButton span:nth-of-type(3) {
		bottom: 0;
	}
	.navButton.active span:nth-of-type(1) {
		background-color: #fff;
		-webkit-transform: translateY(13px) rotate(-45deg);
		transform: translateY(13px) rotate(-45deg);
	}
	.navButton.active span:nth-of-type(2) {
		opacity: 0;
	}
	.navButton.active span:nth-of-type(3) {
		background-color: #fff;
		-webkit-transform: translateY(-12px) rotate(45deg);
 		transform: translateY(-12px) rotate(45deg);
	}

	/*---- メインコンテンツ ----*/
	article {
		display: block;
		width: 90%;
		margin: 60px auto 0;
	}
	article h1 {
		width: 100%;
		margin: 0 0 40px;
		border-right: none;
		border-bottom: 2px solid #000;
		text-align: center;
	}
	article > div {
		width: 100%;
		padding: 0;
	}
	article > div p {
		line-height: 1.4;
	}
	article > div dl {
		display: block;
	}
	article > div dl dd {
		margin: 20px 0 0;
	}
	.contactUs {
		width: 90%;
		margin: 60px auto;
		padding: 4% 2% 6%;
		border: 4px solid #000;
	}
	.contactUsIn img {
		width: 100%;
	}
	.contactUsIn .subject {
		margin: 10px 0 40px;
		font-size: 1.8rem;
		line-height: 1.4;
	}
	.contactUsIn .subject span {
		font-size: 2.8rem;
	}
	.contactUs .tel {
		font-size: 3.6rem;
	}
	.contactUs .tel i {
		padding: 0 2px 4px 0;
		font-size: 2.8rem;
	}
	.contactUs .tel p:first-child {
		font-size: 2.0rem;
	}
	.contactUs .contactEmail {
		margin: 10px 0 0;
		font-size: 2.0rem;
		line-height: 1.6;
	}

	/*---- フッター ----*/
	.footerNav ul {
		width: 100%;
		padding: 0 5%;
	}
	.footerLogo {
		margin: 0 0 60px;
		text-align: center;
	}
	.footerLogo img {
		max-width: 280px;
	}
	.footerNav ul li {
		display: block;
		margin: 0;
		padding: 20px 0;
	}
	.footerNav ul li a {
		display: inline-block;
		width: 100%;
	}
	.footerNav ul li.onlySp {
		display: block;
	}
	.footerNav ul li.onlyPc {
		display: none;
	}
	.footerNav > ul > li + li {
		border-top: 1px solid #fff;
	}
	#footerDetailIn {
		display: block;
		width: 90%;
	}
	.comName {
		margin: 0 0 20px;
		font-size: 2.5rem;
	}
	.comInfo .tel {
		margin: 20px 0 0;
		line-height: 0.7;
	}
	.contactEmail {
		padding: 20px 0 0;
		font-size: 2.0rem;
	}
	#footerContact,
	.otherEx {
		width: 100%;
		margin: 40px 0 0;
		text-align: center;
	}
	#footerContact h2 {
		color: #00aeeb;
	}
	#footerContact ul,
	.otherEx ul {
		display: flex;
		display: -ms-flexbox; /* IE10 */
		display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
		display: -webkit-flex; /* Safari6.1以降 */
		justify-content: center;
		margin: 0 auto;
	}
	#footerContact li + li {
		margin: 0 0 0 5%;
	}
	#footerContact li img {
		width: 45px;
		height: auto;
	}
	#footerContact .payment {
		margin: 30px 0 0;
		padding: 5px 25px;
	}

	/*---- トップページ ----*/
	.mainContent {
		margin: 0 auto;
		padding: 0;
		background-image: none;
		background-position: 0 200px;
		background-size: contain;
	}
	.mainContent::before {
		content: "";
		display: block;
		position: fixed;
		top: 30%;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: 50% 100%;
		background-image: url(../images/bg.jpg);
		background-size: cover;
	}
	.mainContentIn {
		display: block;
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	#top .feature {
		width: 100%;
		text-align: center;
	}
	#top .feature img {
		width: 100%;
	}
	#top .support {
		line-height: 1.6;
	}
	#top .feature .machine {
		width: 80%;
		margin: 20px 0 40px;
	}
	#top .carbon {
		display: block;
		width: 100%;
		padding: 60px 5%;
		background-color: #e5f7fd;
		box-shadow: none;
	}
	#top .aboutCarbon {
		width: 100%;
	}
	#top .aboutCarbon h3 {
		margin: 0 0 20px;
		font-size: 2.4rem;
	}
	#top .aboutCarbon .bus {
		width: 100%;
		margin: 0 0 40px;
	}
	#top .aboutCarbon h4 {
		font-size: 2.0rem;
	}
	#top #aboutWork {
		width: 100%;
		margin: 0;
		padding: 60px 0;
		background-color: #e1ebf3;
		box-shadow: none;
	}
	#top .aboutWorkIn {
		padding: 5%;
	}
	#top .aboutWorkIn > div > p {
		margin: 0 0 20px;
		padding: 10px;
	}
	#top .aboutWorkIn > div img {
		width: 100%;
	}
	#top #aboutWork h3 {
		margin: 0;
		padding: 4% 0;
		line-height: 1.6;
		text-align: center;
	}
	#top .aboutWorkIn > p {
		width: 100%;
	}
	.recommend {
		margin: 0;
		padding: 60px 0;
	}
	.recommend > div {
		width: 90%;
	}
	.recommend ul {
		display: block;
	}
	.recommend li {
		width: 100%;
		margin: 4% 0 0;
	}

	/*---- 施工実績ページ ----*/
	#construction article > div {
		width: 100%;
	}
	#construction article ul.thumbnail {
		display: block;
	}
	#construction .example {
		margin: 0;
	}
	.thumbnail li:nth-last-child(2) {
		margin: 0 0 40px;
	}
	.thumbnail li,
	.thumbnail li img {
		width: 100%;
		height: 100%;
	}
	.thumbnail li h2 {
		line-height: 1.4;
	}
	#construction article > div.otherEx {
		display: block;
		margin: 40px 0 0;
	}
	#construction article > div.otherEx h2 {
		margin: 0 0 10px;
		font-size: 2.4rem;
		line-height: 1.4;
	}
	#construction article > div.otherEx li {
		width: 55px;
		height: auto;
	}
	#construction article > div.otherEx li img {
		width: 100%;
	}
		
	/*---- contact ----*/
	#contact article h1 {
		padding: 0 0 20px;
		line-height: 1.4;
	}
	article .noteContact {
		border-right: none;
	}
	article .noteContact p {
		margin: 0 0 40px;
		padding: 0;
	}
	#contact article > div dl dd {
		margin: 0;
	}
	button {
		margin: 20px 0 0;
	}
	article#privacy {
		margin: 100px auto 60px;
	}

	#contact section {
		width: 100%;
	}
	#contact section p {
		line-height: 1.6;
	}
	select {
		width: 100%;
	}
	#contact .form {
		width: 100%;
	}
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	textarea {
		width: 100%;
	}
	#contact form p.toPp {
		margin: 10px 0 16px;
	}
	#contact #mailCw {
		width: 100%;
	}
	#contact #mailCw section.mail {
		width: 100%;
		margin: 0 0 90px;
		padding: 0 0 90px;
		border-right: none;
		border-bottom: 1px solid #dadadb;
	}
	#contact #mailCw section.cW {
		width: 100%;
		padding: 0;
	}
	#contact section.cW .aboutCw p {
		width: auto;
	}

	/*---- thanks ----*/
	#thanks .container {
		width: 90%;
		margin: 60px auto;
	}
	#thanks .container h1 {
		width: 100%;
		font-size: 3.0rem;
	}
	#thanks section p {
		text-align: justify;
	}
	#thanks .linkBtn {
		width: 100%;
	}
}