@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
body {
	font-family: 'Noto Sans JP', sans-serif;
	background: #3e3a39;
	color: #fff;
}

img {
	vertical-align: bottom;
}

* {
	box-sizing: border-box;
}


@media(max-width: 767px) {
	.sp-none {
		display: none;
	}

	img {
		width: 100%;
	}

	.wrap {
		width: 95%;
		margin: 0 auto;
	}

	header {

	}

	header h1 {
		width: 21%;
		margin: 10px 0;
	}

	.sec01 {
		margin: 20px 0 0 0;
	}

	.sec01 h2 {
		font-size: 16px;
		line-height: 1.8;
		text-align: center;
		margin: 20px 0 0 0;
	}

	.sec01 p {
		font-size: 9px;
		line-height: 1.7;
		text-align: center;
		margin: 20px 0 0 0;
	}

	.cv-area {
		margin: 20px 0 0 0;
	}

	.cv-area .cv {
		padding: 35px 30px;
		background: #fff;
		border: 5px solid #898989;
		border-radius: 10px;
	}

	.cv-area .cv p {
		text-align: center;
		font-size: 10px;
		color: #000;
		font-weight: 700;
		line-height: 1.6;
		margin: 20px 0 0 0;
	}

	.cv-area .btn {
		margin: 20px 0 0 0;
	}

	.works {
		margin: 90px 0 0 0;
	}

	.works h2 {
		font-size: 16px;
		font-weight: 700;
		color: #898989;
		text-align: center;
		letter-spacing: 0.5em;
		border-top: 2px solid #898989;
		padding: 20px 0 0 0;
	}

	.works .case {
		margin: 60px 0 0 0;
	}

	.works .case h3 {
		font-size: 11px;
		text-align: center;
		line-height: 1.8;
	}

	.works .case h3 span {
		display: block;
		font-size: 12px;
	}

	.works .case .main {
		margin: 40px 0 0 0;
	}

	.works .case .sub {
		margin: 10px 0 0 0;
		display: flex;
		justify-content: space-between;
	}

	.works .case .sub li {
		width: 31%;
	}

	.works .description {
		width: 79%;
		margin: 20px auto 0 auto;
	}

	.works .description p {
		font-size: 8px;
		line-height: 1.5;
	}

	.works .description dl {
		margin: 40px 0 0 0;
		font-size: 10px;
		line-height: 1.8;
	}

	.works .description dl dt {
		background: url(../images/ico_description_arrow.png) left center no-repeat;
		padding: 0 0 0 10px;
	}

	.works .description dl dd {
		margin: 0 0 0 10px;
	}

	.works .more-case {
		margin: 80px 0 0 0;
	}

	.works .more-case h4,
	.works .more-case p {
		font-size: 10px;
		font-weight: 700;
	}

	.works .more-case h4 {
		padding: 30px 0 0 0;
	}

	.works .more-case p {
		margin: 25px 0 0 0;
	}

	.works .more-case img {
		display: block;
		width: 71%;
		margin: 15px auto 0 auto;
	}

	.works .more-case li:nth-child(1) {
		background: url(../images/img_case03_sp.jpg) 0 0 no-repeat;
		background-size: cover;
		padding: 25px 0;
	}

	.works .more-case li:nth-child(2) {
		background: url(../images/img_case04_sp.jpg) 0 0 no-repeat;
		background-size: cover;
		padding: 25px 0;
	}
	.works .more-case .circle {
		background: #fff;
		border-radius: 50%;
		width: 140px;
		height: 140px;
		margin: 0 auto;
		text-align: center;
	}

	.works .more-case .circle a {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		color: #000;
	}

	.merit {
		margin: 90px 0 0 0;
	}

	.merit h2 {
			font-size: 16px;
			font-weight: 700;
			color: #898989;
			text-align: center;
			letter-spacing: 0.5em;
			border-top: 2px solid #898989;
			padding: 20px 0 0 0;
	}

	.merit .m-img {
		margin: 20px 0 0 0;
	}

	.merit .block {
		margin: 0 auto 90px auto;
		width: 70%;
	}

	.merit .block:first-child {
		margin: 40px 0 90px 0;
	}

	.merit .block h3 {
		text-align: center;
		font-size: 16px;
		line-height: 1.7;
		border-bottom: 2px dashed #9fa0a0;
		padding: 0 0 20px 0;
		margin: 0 0 20px 0;
	}

	.merit .block h3 span {
		font-size: 50px;
		font-weight: 700;
		display: block;

	}

	.merit .block p {
		text-align: center;
		font-size: 9px;
		line-height: 1.6;
	}

	.voice {
		margin: 90px 0 0 0;
	}

	.voice h2 {
		font-size: 16px;
		font-weight: 700;
		color: #898989;
		text-align: center;
		letter-spacing: 0.5em;
		border-top: 2px solid #898989;
		padding: 20px 0 0 0;
	}

	.voice .lead {
		font-size: 10px;
		line-height: 1.8;
		margin: 45px 0 0 0;
		text-align: center;
	}

	.voice .block {
		margin: 70px 0 0 0;
	}

	.voice .block img {
		width: 42%;
		display: block;
		margin: 0 auto 0 auto;
	}

	.voice .block p {
		font-size: 9px;
		line-height: 1.6;
		text-align: center;
		margin: 40px 0 0 0;
	}

	.area {
		margin: 110px 0 90px 0;
	}

	.area h2 {
		font-size: 16px;
		font-weight: 700;
		color: #898989;
		text-align: center;
		letter-spacing: 0.5em;
		border-top: 2px solid #898989;
		padding: 20px 0 0 0;
	}

	.area dl {
		font-size: 9px;
		text-align: center;
		line-height: 1.6;
	}

	.area dl dt {
		margin: 40px 0 0 0;
	}

	footer {
		margin: 60px 0 40px 0;
	}

	footer ul {
		text-align: center;
	}

	footer ul li:first-child {
		width: 21%;
		display: block;
		margin: 0 auto;
	}

	footer ul li:last-child {
		width: 8%;
		margin: 20px auto 0 auto;
	}

	footer p {
		font-size: 11px;
		text-align: center;
		margin: 20px 0 0 0;
	}

	footer .link a {
		color: #fff;
		text-decoration: none;
	}

}

@media(min-width: 768px) {
	.pc-none {
		display: none;
	}

	a {
		transition: all .4s;
	}

	a:hover {
		opacity: .6;
	}

	header {
		margin: 10px 0;
	}

	.wrap {
		max-width: 1000px;
		margin: 0 auto;
	}

	.mv {
		max-width: 1000px;
		margin: 0 auto;
	}

	.sec01 {
		margin: 80px 0 0 0;
	}

	.sec01 img {
		display: block;
		width: 100%;
		margin: 0 auto 40px auto;
	}

	.sec01 h2 {
		margin: 40px 0 0 0;
		text-align: center;
		font-size: 24px;
		line-height: 1.8;
	}

	.sec01 p {
		text-align: center;
		font-size: 16px;
		line-height: 1.8;
		margin: 20px 0 0 0;
	}

	.cv-area {
		border: 10px solid #898989;
		max-width: 1000px;
		margin: 80px auto 0 auto;
		border-radius: 20px;
		background: #fff;
		padding:40px;
		color: #000;
		display: flow-root;
	}

	.cv-area img {
		display: block;
		width: 40%;
		float: left;
	}

	.cv-area .right {
		width: 55%;
		float: right;
	}

	.cv-area p {
		font-size: 24px;
		line-height: 1.8;
		font-weight: 700;
	}

	.cv-area .db {
		margin: 2em 0 0 0;
	}
	.cv-area .btn {
		width: 100%;
		margin: 30px 0 0 0;
	}

	.cv-area .btn img {
		width: 100%;
	}

	.works {
		margin: 120px 0 0 0;
	}

	.works h2 {
		font-size: 32px;
		font-weight: 700;
		color: #898989;
		text-align: center;
		letter-spacing: 0.5em;
		border-top: 4px solid #898989;
		padding: 20px 0 0 0;
	}

	.works .case {
		margin: 80px auto 0 auto;
		max-width: 1000px;
	}

	.works .case img {
		width: 100%;
		margin: 60px 0 0 0;
	}

	.works .case h3 {
		text-align: center;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.8;
	}

	.works .case h3 span {
		display: block;
		font-size: 28px;
	}

	.works .case .sub {
		margin: 20px 0 0 0;
		display: flex;
		justify-content: space-between;
	}

	.works .case .sub img {
		margin: 0;
	}

	.works .case .sub li {
		width: 320px;
	}

	.works .case .description {
		margin: 60px 10% 0 10%;
	}

	.works .case .description p {
		font-size: 18px;
		line-height: 1.8;
	}

	.works .case .description dl {
		margin: 60px 0 0 0;
		font-size: 18px;
		line-height: 1.8;
	}

	.works .case .description dl dt {
		background: url(../images/ico_description_arrow.png) left center no-repeat;
		padding: 0 0 0 1em;
	}

	.works .case .description dl dd {
		padding: 0 0 0 1em;
	}

	.works .more-case {
		margin: 60px 0 0 0;
		margin: 60px 0 0 0;
	}

	.works .more-case li {
		padding: 80px 0;
	}
	.works .more-case li:first-child {
		background: url(../images/img_case03_pc.jpg) center top no-repeat;
		background-size: cover;
	}

	.works .more-case li:last-child {
		background: url(../images/img_case04_pc.jpg) center top no-repeat;
		background-size: cover;
	}

	.works .more-case .circle {
		width: 280px;
		height: 280px;
		background: #fff;
		border-radius: 50%;
		margin: 0 auto;
		text-align: center;
	}

	.works .more-case .circle h4 {
		font-size: 20px;
		font-weight: 700;
		padding: 80px 0 0 0;
	}

	.works .more-case .circle p {
		font-size: 20px;
		font-weight: 700;
		margin: 30px 0 0 0;
	}

	.works .more-case .circle img {
		width: 60%;
		margin: 30px 0 0 0;
	}

	.works .more-case .circle a {
		text-decoration: none;
		color: #000;
		display: block;
		width: 100%;
		height: 100%;
	}

	.merit {
		margin: 120px 0 0 0;
	}

	.merit h2 {
		font-size: 32px;
		font-weight: 700;
		color: #898989;
		text-align: center;
		letter-spacing: 0.5em;
		border-top: 4px solid #898989;
		padding: 20px 0 0 0;
	}

	.merit .m-img {
		display: block;
		width: 1000px;
		max-width: 1000px;
		margin: 80px auto 0 auto;
	}

	.merit .block {
		max-width: 600px;
		margin: 80px auto 0 auto;
	}

	.merit .block h3 {
		font-size: 22px;
		text-align: center;
		line-height: 1.8;
		border-bottom: 4px dashed #898989;
		padding: 0 0 40px 0;
		margin: 0 0 40px 0;
	}

	.merit .block h3 span {
		font-size: 100px;
		font-weight: 700;
		display: block;
	}

	.merit .block p {
		text-align: center;
		font-size: 18px;
		line-height: 1.8;
	}

	.voice {
		margin: 120px 0 0 0;
	}

	.voice h2 {
		font-size: 32px;
		font-weight: 700;
		color: #898989;
		text-align: center;
		letter-spacing: 0.5em;
		border-top: 4px solid #898989;
		padding: 20px 0 0 0;
	}

	.voice .lead {
		font-size: 20px;
		text-align: center;
		line-height: 1.8;
		margin: 60px 0 0 0;
	}

	.voice .flex {
		display: flex;
		justify-content: space-between;
		margin: 60px 0 0 0;
	}

	.voice .flex .block {
		width: 48%;
		text-align: center;
	}

	.voice .flex .block img {
		display: block;
		margin: 0 auto;
	}

	.voice .flex .block p {
		margin: 40px 0 0 0;
		text-align: center;
		font-size: 16px;
		line-height: 1.8;
	}

	.area {
		margin: 120px 0 0 0;
	}

	.area h2 {
		font-size: 32px;
		font-weight: 700;
		color: #898989;
		text-align: center;
		letter-spacing: 0.5em;
		border-top: 4px solid #898989;
		padding: 20px 0 0 0;
	}

	.area dl {
		margin: 80px 0 0 0;
		font-size: 18px;
		line-height: 1.8;
	}

	.area dl dt {
		font-size: 20px;
	}

	footer {
		margin: 120px 0 80px 0;
		text-align: center;
	}

	footer .logo li {
		margin: 40px 0 0 0;
	}

	footer p {
		font-size: 16px;
		margin: 40px 0 0 0;
	}

	footer a {
		color: #fff;
		text-decoration: none;
	}
}