@charset "utf-8";

body {
	background: #f9f9f9;
	font-family: "Noto Sans JP";
	margin: 0;
}

@media screen and (min-width:320px) {
	#wrapper {
		width: 100%;
	}
	.inner {
		width: 92%;
		margin: 0 auto;
	}
	.heading-1 {
		color: #404040;
		font-family: "Figtree", sans-serif;
		letter-spacing: 1.5px;
		position: relative;
		font-size: 48px;
		text-align: center;
	}
	.heading-1::before {
		content: attr(data-number);
		display: block;
		margin-bottom: 30px;
		color: #424473;
		font-size: 48px;
	}
	.heading-1::after {
		content: '';
		position: absolute;
		top: 56px;
		left: 50%;
		transform: translateX(-50%);
		width: 1px;
		height: 20px;
		background-color: #424473;
	}
	.sec {
		margin-top: 12%;
	}
	.sec .block {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20px 0;
		margin-top: 8%;
	}
	.sec .block .box {
		background: #fff;
		border: solid 3px #f1f1f1;
		width: 48%;
		transition: 0.5s;
	}
	.sec .block .box:link {
		color: #333;
		text-decoration: none;
	}
	.sec .block .box:hover {
		opacity: 0.7;
		transition: 0.5s;
	}
	.sec .block .box:visited {
		color: #333;
		text-decoration: none;
	}
	.sec .block .box .img {
		border-bottom: solid 1px #ececec;
	}
	.sec .block .box .ttl {
		font-size: 1.1rem;
		letter-spacing: 1.5px;
		text-align: center;
		margin: 0;
	}
	.sec .box .box_txt {
		padding: 6% 4%;
	}
	.sec .lead {
		font-size: 1.1rem;
		margin-top: 6%;
		letter-spacing: 1.5px;
		line-height: 1.6;
		text-align: center;
	}
	.sec .item {
		margin-top: 8%;
	}
	.sec .item h4 {
		font-size: 1.1rem;
		margin: 0;
		text-align: center;
		padding: 8% 0;
		letter-spacing: 1.5px;
	}
	.sec .item p {
		margin: 3% 0 0 0;
		line-height: 1.6;
		letter-spacing: 1.5px;
	}
	.sec .box-1 {
		background: #404040;
		color: #fff;
	}
	.pie-chart {
		display: flex;
		font-family: "Figtree", sans-serif;
		font-size: 1.3rem;
		letter-spacing: 1.5px;
		justify-content: center;
		align-items: center;
		width: 240px;
		height: 240px;
		margin: 0 auto;
		border-radius: 50%;
		font-weight: 600;
		text-align: center;
	}
	.pie-chart span {
		display: inline-block;
	}
	.pie-chart-1 {
		background-image: radial-gradient(#fff 55%, transparent 55%), conic-gradient(#424473 38%, #f2f2f2 38% 100%);
	}
	.pie-chart-2 {
		background-image: radial-gradient(#fff 55%, transparent 55%), conic-gradient(#424473 28%, #f2f2f2 28% 100%);
	}
	.pie-chart-3 {
		background-image: radial-gradient(#fff 55%, transparent 55%), conic-gradient(#424473 28%, #f2f2f2 28% 100%);
	}
	.graph {
		margin-top: 5%;
	}
	.graph .item {
		display: block;
		width: 72%;
		margin: 8% auto 0;
	}
	.graph .item .txt {
		background: #fff;
		margin-top: 3%;
		padding: 6%;
		text-align: center;
		letter-spacing: 1.5px;
	}
	footer {
		background: #1d1d1d;
		font-family: "Figtree", sans-serif;
		padding: 1% 0;
		text-align: center;
		margin-top: 10%;
	}
	.copy {
		color: #fff;
		letter-spacing: 2px;
	}

	.kv_work {
		background: #1d1d1d;
		padding: 12% 0;
	}
	.en {
		font-family: "Figtree", sans-serif;
	}
	.main_txt {
		color: #fff;
	}
	.main_txt .fa-pen {
		margin-right: 8px;
	}
	.main_txt .fa-globe {
		margin-right: 8px;
	}
	.main_txt .fa-desktop {
		margin-right: 8px;
	}
	.main_txt .fa-adobe {
		margin-right: 8px;
	}
	.main_txt .fa-wordpress-simple {
		margin-right: 8px;
	}
	.main_txt p {
		font-size: 1.2rem;
		font-weight: bold;
		letter-spacing: 2px;
	}
	.main_txt ul {
		margin: 0;
		padding-left: 4%;
	}
	.main_txt ul li {
		letter-spacing: 2px;
		list-style: none;
		line-height: 2;
		line-break: anywhere;
	}
	.main_txt dl {
		margin: 4% 0 0;
	}
	.main_txt dt {
		font-size: 1.2rem;
		font-weight: bold;
		letter-spacing: 2px;
	}
	.main_txt dd {
		letter-spacing: 2px;
		line-height: 2;
		margin: 0;
		padding-left: 4%;
	}
	.explain .txt_area {
		background: #e9e9e9;
		padding: 6%;
		margin-top: 8%;
	}
	.explain .txt_area h2{
		font-size: 1.2rem;
		letter-spacing: 2px;
		position:relative;
		border-bottom:solid 5px #c2c2c2;
		padding-bottom: 3%;
		margin: 0;
	}
	.explain .txt_area h2::after{
		position:absolute;
		content:"";
		display:block;
		border-bottom:solid 5px #101010;
		bottom:-5px;
		width:20%;
	}
	.explain .txt_area p {
		letter-spacing: 1.5px;
		line-height: 1.6;
	}
	.btn {
		margin-top: 8%;
	}
	.btn a {
		background: #404040;
		color: #fff;
		text-decoration: none;
		display: block;
		text-align: center;
		padding: 3% 0;
		transition: 0.5s;
		letter-spacing: 1.5px;
	}
	.btn .fa-angle-right {
		margin-left: 4px;
	}
	.btn a:hover {
		opacity: 0.7;
		transition: 0.5s;
	}

}

@media screen and (min-width:1024px) {
	#kv {
		width: 100%;
		margin: 0 auto;
	}
	.inner {
		width: 80%;
		max-width: 1400px;
		margin: 0 auto;
	}
	.sec {
		margin-top: 10%;
	}
	.sec .block {
		margin-top: 4%;
	}
	.sec .block .box {
		width: 32%;
	}
	.sec .lead {
		margin-top: 4%;
		letter-spacing: 1.5px;
		line-height: 2;
		text-align: center;
	}
	.sec .item {
		display: flex;
		align-items: center;
		max-width: 1000px;
		margin: 2% auto 0;
	}
	.sec .box-1 {
		flex: 2;
		letter-spacing: 1.5px;
		padding: 30px 20px;
	}
	.sec .box-2 {
		flex: 4;
		padding: 30px;
	}
	.sec .item h4 {
		font-size: 1.1rem;
		letter-spacing: 2px;
		padding: 4% 0;
	}
	.sec .item p {
		margin: 0;
	}
	.pie-chart {
		display: flex;
		font-family: "Figtree", sans-serif;
		font-size: 1.3rem;
		letter-spacing: 1.5px;
		justify-content: center;
		align-items: center;
		width: 240px;
		height: 240px;
		margin: 0 auto;
		border-radius: 50%;
		font-weight: 600;
	}
	.graph {
		display: flex;
		justify-content: space-between;
		max-width: 1000px;
		margin: 5% auto 0;
	}
	.graph .item {
		display: block;
		width: 32%;
		margin: 0;
	}
	.graph .item .txt {
		margin-top: 3%;
		text-align: center;
		letter-spacing: 1.5px;
	}

	.kv_work {
		background: #1d1d1d;
		padding: 8% 0;
	}
	.kv_work .page_top {
		display: flex;
		justify-content: space-between;
	}
	.kv_work .main_img {
		width: 54%;
	}
	.main_txt {
		width: 41%;
	}
	.main_txt a:hover {
		text-decoration: none;
	}
	.explain .txt_area {
		background: #e9e9e9;
		padding: 3%;
		max-width: 1000px;
		margin: 3% auto 0;
	}
	.explain .txt_area h2 {
		padding-bottom: 2%;
	}
	.btn {
		margin-top: 5%;
	}
	.btn a {
		width: 400px;
		padding: 2% 0;
		margin: 0 auto;
	}

}