@charset "utf-8";


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


@media only screen and (max-width:640px) {
	html {
		  font-size: 62.5%; /* 10px */
		  -webkit-text-size-adjust: 100%;
	}

	.page {
		min-width: inherit;
		font-size: 12px;
	}
	.wrap {
		width: inherit;
		padding: 0 20px;
	}

	#container {
		padding: 20px 0 40px;
	}

	body #gHeader {
		padding: 13px 20px;
		border-bottom: 1px solid #ebebeb;
		-webkit-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.05);
		-moz-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.05);
		box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.05);
	}

	.site_title {
		float: none;
		font-size: 18px;
		letter-spacing: -.2px;
		text-align: center;
	}

	#gHeader .mail,
	#gHeader .menu {
		position: absolute;
		display: block;
	}

	#gHeader .mail {
		top: 16px;
		left: 20px;
	}

	#gHeader .menu,
	#gHeader .menu span {
		display: inline-block;
		box-sizing: border-box;
	}
	#gHeader .menu {
		top: 19px;
		right: 20px;
		width: 22px;
		height: 17px;
	}
	#gHeader .menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		margin-bottom: 0;
		background-color: #222;
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
	}
	#gHeader .menu span:nth-of-type(1) {
		top: 0;
	}
	#gHeader .menu span:nth-of-type(2) {
		top: 50%;
		margin-top: -1.5px;
	}
	#gHeader .menu span:nth-of-type(3) {
		bottom: 1px;
	}


	#gHeader .menu.menu-state-on {
		z-index: 1001;
	}
	#gHeader .menu.menu-state-on span {
		background-color: #fff;
	}
	#gHeader .menu.menu-state-on span:nth-of-type(1) {
		top: 0;
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	#gHeader .menu.menu-state-on span:nth-of-type(3) {
		top: 8px;
		-webkit-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}
	#gHeader .menu.menu-state-on span:nth-of-type(2) {
		opacity: 0;
	}

	body #gNav {
		float: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 60%;
    background-color: #222;
    padding-top: 54px;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
    z-index: 1000;
	}
	body #gNav.gNav-state-on {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	#gNav ul li {
		float: none;
		margin-left: 0;
		border-bottom: 1px solid #292929;
	}
	#gNav ul li.on {
		background-color: #292929;
	}
	#gNav ul li a {
		display: block;
		color: #fff;
		padding: 15px 20px;
	}
	#gNav ul li strong {
		font-weight: normal;
	}
	#gNav ul li a::before,
	#gNav ul li strong::before {
		display: none;
	}


/* Footer */
	body #gFooter {
		min-width: inherit;
		height: 72px;
	}
	#gFooter .bg-left,
	#gFooter .bg-center,
	#gFooter .bg-right {
		height: 72px;
	}
	#gFooter .bg-left {
		width: 77px;
		background-image: url(../imgs/sp/bg-ftr_left.jpg);
		background-size: 70%;
	}
	#gFooter .bg-center {
		width: 100%;
		background-image: url(../imgs/sp/bg-ftr_center.jpg);
		background-size: 25%;
	}
	#gFooter .bg-right {
		width: 103px;
		background-image: url(../imgs/sp/bg-ftr_right.jpg);
		background-size: cover;
	}

	#profile #gFooter .bg-left {
		background-image: url(../imgs/sp/bg-ftr_left02.jpg);
	}
	#profile #gFooter .bg-center {
		background-image: url(../imgs/sp/bg-ftr_center02.jpg);
	}
	#profile #gFooter .bg-right {
		background-image: url(../imgs/sp/bg-ftr_right02.jpg);
	}


	#portfolio #gFooter .bg-left {
		background-image: url(../imgs/sp/bg-ftr_left03.jpg);
	}
	#portfolio #gFooter .bg-center {
		background-image: url(../imgs/sp/bg-ftr_center03.jpg);
	}
	#portfolio #gFooter .bg-right {
		background-image: url(../imgs/sp/bg-ftr_right03.jpg);
	}


	#contact #gFooter .bg-left {
		background-image: url(../imgs/sp/bg-ftr_left04.jpg);
	}
	#contact #gFooter .bg-center {
		background-image: url(../imgs/sp/bg-ftr_center04.jpg);
	}
	#contact #gFooter .bg-right {
		background-image: url(../imgs/sp/bg-ftr_right04.jpg);
	}

	.copyright {
		left: 60px;
		bottom: 10px;
		font-size: .7rem
	}
	.copyright br {
		display: block;
	}

}