@charset "UTF-8";

body{
	-webkit-text-size-adjust: 100%;
	padding:0;
	margin: 0;
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	font-feature-settings: "palt" 1;
	-webkit-font-feature-settings: "palt" 1;
	color: #404040;
}

/* default */

div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q::before,q::after{content:'';}
abbr{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
pre,code,kbd,samp{font-family:monospace;*font-size:108%;line-height:100%;}
.aligncenter{text-align:center;}
figure{padding:0;margin:0;}
img{
	vertical-align: bottom;
	line-height: 1;
	max-width:100%;
	height:auto;
}
a{text-decoration:none;}
*{box-sizing:border-box;}

a img{transition: all .5s ease;}
a img:hover{opacity:0.7;}


/* common item ---------------------------------------*/

.clearfix::after,
.inner::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.sp{display: none;}
.spbr{display: none;}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .foo { color: red } /* IE11 */
}

@media all and (-ms-high-contrast:none){
  .foo { color: green } /* IE10〜Edge */
}


/* header ---------------------------------------*/

header{
	position:fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
}

.header-logo{
	width:147px;
	height:48px;
	position: absolute;
	left:40px;
	top:40px;
}

#logo .cls-1{
	fill:#fff;
	transition: all .25s ease;
}

#logo .cls-1.is-black{
	fill:#000000;
}


/* common ---------------------------------------*/

.wrapper {
}

.btn {
	display: inline-block;
	border-radius: 50px;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	padding: 15px 45px;
	border: 1px solid #CB4042;
	color: #CB4042;
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
	z-index: 1;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.btn::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10rem;
	z-index: -2;
}

.btn::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: #CB4042;
	transition: all 0.4s ease;
	border-radius: 10rem;
	z-index: -1;
}

.btn:hover {
	color: #FFF;
}

.btn:hover::before {
	width: 100%;
}

.title-section {
	position:relative;
	line-height: 1;
	padding-left: 10px;
	font-size:12px;
	letter-spacing:0.1em;
	margin-bottom: 30px;
}

.title-section::before{
	display:block;
	content:'';
	background:#000;
	width:5px;
	height:1px;
	position:absolute;
	left:0px;
	top:50%;
}

.title-block {
	position:relative;
	line-height: 1;
	font-size:40px;
	letter-spacing:0.02em;
	margin-bottom: 40px;
}

.fixedbtn {
}


/* kv ---------------------------------------*/

.kv-wrapper {
}

.kv {
	background: url('../img/kv.png') no-repeat center top;
	background-size: cover;
	height: 100vh;
	color: #fff;
}

.kv-inner {
	position:absolute;
	left:11%;
	width: 80%;
	top:57%;
	transform:translate(0,-57%);
}

.kv-copy-wrapper {
	font-size:70px;
	margin-bottom: 35px;
	line-height: 1;
}

.kv-copy {}

.kv-copy-block {
	display: inline-block;
	overflow: hidden;
	position: relative;
}

.kv-copy.is-active .kv-copy-block::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: #CB4042;
	animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77, 0, .175, 1),
		secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77, 0, .175, 1);
	animation-fill-mode: both;
}


.kv-copy-block p {
	line-height: 1;
	letter-spacing: 0.06em;
	color: #FFF;
	animation: fadeIn 0.1s 0.5s;
	animation-fill-mode: both;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes secondaryImageOverlayIn {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

@keyframes secondaryImageOverlayOut {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(102%);
	}
}

.kv-message {
	width: 350px;
	font-size:15px;
	line-height: 1.55;
}

.kv-scroll {
	padding-top: 45px;
	letter-spacing: 0.06em;
	font-size: 15px;
}

.kv-scroll a{
	position:relative;
	color: #fff;
	padding: 13px 0 15px 60px;
	padding-left: 60px;
	line-height: 1;
}

.kv-scroll-circle{
	position:absolute;
	left: 0;
	top: 0;
	width: 47px;
	height: 47px;
	border-radius:50%;
	border:1px solid #fff;
	transition: all 0.25s ease;
}

.kv-scroll-circle::after{
	display:block;
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border-right:3px solid transparent;
	border-left:3px solid transparent;
	border-top:4px solid #fff;
}

.kv-scroll a:hover .kv-scroll-circle {
	border: 1px solid #CB4042;
	background-color: #CB4042;
	-webkit-animation: sdb 2s;
	animation: sdb 2s;
}

@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
	}
	20% {
		-webkit-transform: translate(0, 8px);
	}
	40% {
		-webkit-transform: translate(0, 0);
	}
}

@keyframes sdb {
	0% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(0, 8px);
	}
	40% {
		transform: translate(0, 0);
	}
}

.getintouch{
	display: inline-block;
	border-radius:50px;
	font-size:14px;
	text-align:center;
	line-height: 1;
	padding: 18px 30px;
	background:#CB4042;
	color: #fff;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	transition: all 0.4s ease;
	overflow: hidden;
	letter-spacing: 0.02em;
}

.getintouch::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10rem;
	z-index: -2;
}

.getintouch::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: #EA585A;
	transition: all 0.4s ease;
	border-radius: 10rem;
	z-index: -1;
}

.getintouch:hover::before {
	width: 100%;
}


/* who ---------------------------------------*/

.who {
	padding: 120px 50px 115px;
	background: #fff;
}

.who-inner {
	max-width: 1088px;
	margin: 0 auto;
}

.who-row {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

.who-col-message {
	padding-left: 92px;
	width: 420px;
	font-size:32px;
	line-height: 1.55;
}

.who-col-text {
	width: calc(100% - 486px);
	padding-top: 44px;
	padding-left: 70px;
	font-size:15px;
	line-height: 1.55;
	letter-spacing: 0.02em;
}


/* what ---------------------------------------*/

.what {
	padding: 100px 30px;
	position:relative;
	background: #fff;
	overflow: hidden;
}

.bg-gray-wrapper {
	background: #fff;
	position:absolute;
}

.bg-gray-wrapper.is-active {
	background: #F4F4F4;
}

.bg-gray-wrapper.bg-01 {
	left: 0;
	top: 0;
	width: 37.3%;
	height: 650px;
}

.bg-gray-wrapper.bg-01.animation1.is-active:before {
	animation: img-wrap1 2s cubic-bezier(.4, 0, .2, 1) forwards;
	background: #fff;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

@keyframes img-wrap1 {
	100% {
		transform: translateX(100%);
	}
}

.bg-gray-wrapper.bg-02 {
	right: 0;
	bottom: 0;
	width: 40%;
	height: 900px;
}

.bg-gray-wrapper.bg-02.animation3.is-active:before {
	animation: img-wrap2 2s cubic-bezier(.4, 0, .2, 1) forwards;
	background: #fff;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

@keyframes img-wrap2 {
	100% {
		transform: translateX(-100%);
	}
}

.what-inner {
	position:relative;
	z-index: 2;
	max-width: 1366px;
	margin: 0 auto;
}

.what-inner .title-section{margin-left: 30px;}

.what-lead-wrapper {
	max-width: 1108px;
	margin: 0 auto;
}

.what-lead {
	font-size:40px;
	line-height: 1.5;
	letter-spacing:0.01em;
	padding-left: 30px;
	width: 85%;
	margin-bottom: 105px;
}

.what-row {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom: 200px;
}

.what-row.row-01 {
	max-width: 1108px;
	margin: 0 auto 260px;
}

.what-row.row-02 {
	max-width: 1108px;
	margin: 0 auto 170px;
}

.what-row.row-03 {
	max-width: 1108px;
	margin: 0 auto 46px;
}

.what-col-image {
	width: 41%;
	position: relative;
	z-index: 1;
}

.what-row.row-01 .what-col-image {
	margin-left: -1%;
}

.what-row.row-02 .what-col-image {
	width: 60%;
	margin-right: -11%;
	order: 1;
	padding-top: 25px;
}

.what-row.row-03 .what-col-image {
	width: 50%;
	margin-left: -4%;
}

.what-col-image.animation2 img,.what-col-image.animation4 img,.what-col-image.animation5 img {
	opacity: 0;
	visibility: hidden;
	transform: translateY(40px);
	transition: all 1s;
	transition-delay: 0.5s;
}

.what-col-image.animation4 img,.what-col-image.animation5 img {transition-delay: 1s;}

.what-col-image.animation2.is-active img,.what-col-image.animation4.is-active img,.what-col-image.animation5.is-active img {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.what-col-image-inner{
	position:relative;
}

.what-col-num {
	color: #CB4042;
	font-size: 11.5vw;
	position:absolute;
	right: -18%;
	bottom: -11%;
}

.what-col-image.animation2 .what-col-num,.what-col-image.animation4 .what-col-num,.what-col-image.animation5 .what-col-num {
	opacity: 0;
	visibility: hidden;
	transform: translateY(40px);
	transition: all 1s;
	transition-delay: 1s;
}

.what-col-image.animation4 .what-col-num,.what-col-image.animation5 .what-col-num {transition-delay: 1.5s;}

.what-col-image.animation2.is-active .what-col-num,.what-col-image.animation4.is-active .what-col-num,.what-col-image.animation5.is-active .what-col-num {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.what-row.row-02 .what-col-num {
	right: auto;
	bottom: auto;
	top: -29%;
	left: 1%;
}

.what-row.row-03 .what-col-num {
	right: -5%;
	top: -15%;
	bottom: auto;
}

.what-col-detail {
	width: 40.5%;
}

.what-row.row-02 .what-col-detail {
	padding-left: 30px;
}

.what-row.row-03 .what-col-detail {
	padding-top: 70px;
}

.what-col-title {
	font-size:40px;
	line-height: 1.8;
	letter-spacing:0.1em;
	margin-bottom: 18px;
}

.what-col-message {
	font-size:20px;
	line-height: 1.55;
	letter-spacing:0.02em;
	margin-bottom: 18px;
}

.what-col-text {
	font-size:15px;
	line-height: 1.55;
	letter-spacing:0.02em;
}


/* works ---------------------------------------*/

.works {
	padding: 95px 100px;
	background: #fff;
}

.works-inner {
	max-width: 1640px;
	margin: 0 auto 65px;
}

.works .title-section {
	margin-bottom: 40px;
}

.works .title-block {
	margin-bottom: 46px;
}

.works-mainimage {
	position:relative;
	margin-bottom: 10px;
}

.works-mainimage.animation6 {
	opacity: 0;
	visibility: hidden;
	transform: translateY(40px);
	transition: all 1s;
	transition-delay: 0.2s;
}

.works-mainimage.animation6.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.works-mainimage img{width:100%;}

.works-mainimage-hover {
	position:absolute;
	left:0%;
	top:0%;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	color: #fff;
	opacity: 0;
	transition: all 1.25s ease;
}

.works-mainimage:hover .works-mainimage-hover{opacity:1;}

.works-mainimage-hover-inner {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width: 80%;
	max-width: 386px;
	box-sizing: border-box;
	background: #CB4042;
	color: #fff;
	z-index: 2;
	color: #fff;
	padding: 25px;
	text-align:center;
}

.works-mainimage-hover-text {
	color: #fff;
	font-size:15px;
	line-height: 1.7;
	margin-bottom: 15px;
}

.works-mainimage-hover-more {
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.18em;
}

.works-mainimage-caption {
	font-size: 15px;
}

.works-list {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	padding: 0 5%;
}

.works-list-item {
	width: 48.8%;
	margin-bottom: 60px;
}

.works-list-item.animation7,.works-list-item.animation8,.works-list-item.animation9,.works-list-item.animation10 {
	opacity: 0;
	visibility: hidden;
	transform: translateY(40px);
	transition: all 1s;
	transition-delay: 0.2s;
}

.works-list-item.animation7.is-active,.works-list-item.animation8.is-active,.works-list-item.animation9.is-active,.works-list-item.animation10.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.works-list-image {
	margin-bottom: 13px;
	position: relative;
}

.works-list-image a{
	display: block;
}

.works-list-image-hover {
	position:absolute;
	left:0%;
	top:0%;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	color: #fff;
	opacity: 0;
	transition: all 0.7s ease;
}

.works-list-image:hover .works-list-image-hover{opacity:1;}

.works-list-image-hover-inner {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width: 80%;
	max-width: 386px;
	background: #CB4042;
	color: #fff;
	z-index: 2;
	padding: 28px 25px;
	text-align:center;
}

.works-list-image-hover-text {
	color: #fff;
	font-size:15px;
	line-height: 1.55;
	margin-bottom: 15px;
}

.works-list-image-hover-more {
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.18em;
}

.works-list-image img{width:100%;}

.works-list-caption {
	font-size:15px;
	line-height: 1.5;
}

.works-more {
	text-align:center;
}


/* results ---------------------------------------*/

.results {
	background: #F5F5F5;
	padding: 95px 100px 100px;
	text-align:center;
}

.results .title-section {
	display: inline-block;
	margin-bottom: 37px;
}

.results .title-block {
	margin-bottom: 55px;
}

.results-inner {
	max-width: 1020px;
	margin:  0 auto;
}

.results-row {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}

.results-col {
	width: 240px;
	margin-bottom: 30px;
}

.results-num {
	color: #CB4042;
	line-height: 1;
}

.results-num b{
	font-size:160px;
}

.results-num small{
	font-size:70px;
}

.results-text {
	line-height: 1;
	display: block;
	text-align:center;
	padding-top: 25px;
	font-size:18px;
}


/* capability ---------------------------------------*/

.capability {
	color: #fff;
	padding: 95px 30px 102px;
	text-align:center;
}

.capability::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../img/bg_capability.png') no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.capability .title-section{
	display: inline-block;
	margin-bottom: 38px;
}
.capability .title-section::before{background: #fff;}

.capability-main {
}

.capability-inner {
	max-width: 1040px;
	margin: 0 auto;
}

.capability-row {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	text-align: left;
}

.capability-col {
	width: 45%;
	overflow: hidden;
}

.capability-col:nth-of-type(1) {width: 55%;}
.capability-col:nth-of-type(2) {width: 40%;}

.capability-text {
	font-size:30px;
	line-height: 1.6;
	margin-bottom: 18px;
}

.capability-list {
}

.capability-list.is-half {
	width: 50%;
	float: left;
}

.capability-list-item {
	font-size:16px;
	line-height: 1.4;
	padding-left: 15px;
	position:relative;
}

.capability-list-item::before{
	display:block;
	content:'';
	background:#fff;
	width:10px;
	height:1px;
	position:absolute;
	left:0px;
	top:50%;
}


/* how ---------------------------------------*/

.how {
	text-align:center;
	padding: 95px 100px 145px;
	position:relative;
	background: #fff;
}

.how::before {
	display: block;
	position:absolute;
	top: 65%;
	right: 57.4%;
	transform: translate(0,-65%);
	content: '';
	background: url('../img/img_how.png') no-repeat center center;
	background-size: 736px 735px;
	width: 736px;
	height: 735px;
}

.how .title-section {
	display: inline-block;
	margin-bottom: 37px;
}

.how-block {
	padding-left: 50.8%;
	margin-top: 98px;
}

.how-list-wrapper {
	position: relative;
}

.line {
	position: absolute;
	top: 0;
	left: 25px;
	margin: auto;
	width: 1px;
	height: 0;
	background: url(../img/line.png) repeat-y center top;
	background-size: 1px;
}

.how-list {
	text-align: left;
}

.how-list-item {
	position:relative;
	transition: all .25s ease;
	opacity: 0;
}

.how-list-item.is-active {
	opacity: 1;
}

.how-list-title {
	position:relative;
	font-size:20px;
	line-height: 1.5;
	padding-left: 78px;
	z-index: 2;
	margin-bottom: 6px;
}

.how-list-title::before{
	display:block;
	content:'0';
	background:#CB4042;
	width:50px;
	height:50px;
	text-align:center;
	line-height: 50px;
	font-size:25px;
	color: #fff;
	position:absolute;
	left:0px;
	top:50%;
	transform:translate(0,-50%);
	border-radius:50%;
}

.how-list-item:nth-child(1) .how-list-title::before{content:'1';}
.how-list-item:nth-child(2) .how-list-title::before{content:'2';}
.how-list-item:nth-child(3) .how-list-title::before{content:'3';}
.how-list-item:nth-child(4) .how-list-title::before{content:'4';}
.how-list-item:nth-child(5) .how-list-title::before{content:'5';}

.how-list-line{
	position: absolute;
	top: 0;
	left: 25px;
	width: 1px;
	height: 0%;
}

.how-list-line.is-active{
	height:100px;
}

.how-list-line::after{
	display:block;
	content:'';
	background: url(../img/line.png) repeat-y center top;
	background-size: 1px;
	width:1px;
	height:100%;
	position:absolute;
	left:0px;
	top:0%;
}

.how-list-innerlist {
	padding-left: 78px;
	padding-bottom: 40px;
}

.how-list-innerlist > li {
	position:relative;
	font-size:15px;
	line-height: 1.6;
	padding-left: 10px;
}

.how-list-innerlist > li::after{
	display:block;
	content:'';
	background:#000;
	width:2px;
	height:2px;
	position:absolute;
	left:0px;
	top:50%;
	transform:translate(0,-50%);
}


/* contact ---------------------------------------*/

.contact {
	background: #F7F7F7;
	padding: 100px 100px 120px;
}

.contact .title-section {
	margin-bottom: 45px;
}

.contact .title-block {
	line-height: 1.4;
	margin-bottom: 18px;
}

.contact-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.contact-row {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

.contact-col {
	width: 50%;
}

.contact-col:first-of-type {
	width: 40%;
}

.contact-col:last-of-type {
	padding-top: 3px;
}

.contact-text {
	font-size:15px;
	color: #747474;
}

.contact-block{position:relative;}

.contact-block:not(:first-child){margin-top: 13px;}


/* clients ---------------------------------------*/

.clients {
	background: #404040;
	color:#fff;
	text-align:center;
	padding: 95px 100px 90px;
}

.clients .title-section {
	display: inline-block;
	margin-bottom: 0;
}

.clients .title-section::before {background: #fff;}


/* footer ---------------------------------------*/

footer {
	padding:10px 0;
	background: #000;
	text-align:center;
}

.copyright small {
	color: #fff;
	font-size:10px;
	letter-spacing: 0.02em;
}


/* form area ---------------------------------------*/

.form-title {
	font-size:15px;
	line-height: 1;
	margin: 0 0 12px;
}

.form-area .submit{
	text-align: center;
}

.form-text[type="text"]{
	padding:16px 15px;
	background: #E6E6E6;
	border: none;
	border-radius:5px;
	width:100%;
	box-sizing:border-box;
	-webkit-appearance: none;
	outline: none;
	font-size:14px;
	font-family: futura-pt, sans-serif;
}

.form-textarea{
	padding:15px 15px;
	background: #E6E6E6;
	border: none;
	border-radius:5px;
	width:100%;
	box-sizing:border-box;
	height:200px;
	-webkit-appearance: none;
	outline: none;
	font-size:14px;
	font-family: futura-pt, sans-serif;
}

::placeholder {color:#aaa;}

.form-btn{
	padding-top: 15px;
}

.form-btn .btn{width:100%;}


/* error ---------------------------------------*/

.form-textarea.error,
.form-text.error{background: #DA8E92;}

label.error{
	position:absolute;
	right: 10px;
	bottom: 10px;
	color: #fff;
}


/* thankyou ---------------------------------------*/

.thankyouheader #logo .cls-1{
	fill:#000;
}

.thankyou {
	height: calc(100vh - 41px);
	position: relative;
}

.thankyou-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	max-width: 444px;
}

.thankyou-title {
	font-size: 40px;
	color: #404040;
	margin-bottom: 28px;
}

.thankyou-message {
	font-size: 15px;
	color: #747474;
	margin-bottom: 40px;
	line-height: 1.5;
}

.thankyou-btn {
	text-align: center;
}

.thankyou-btn a{
	display: inline-block;
	border-radius:50px;
	font-size:14px;
	text-align:center;
	line-height: 1;
	padding: 18px 30px;
	color: #fff;
	transition: all 0.4s ease;
	overflow: hidden;
	letter-spacing: 0.02em;
	position: relative;
}

.thankyou-btn a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background:#CB4042;
	width: 100%;
	height: 100%;
	border-radius: 10rem;
	z-index: -2;
}

.thankyou-btn a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: #EA585A;
	transition: all 0.4s ease;
	border-radius: 10rem;
	z-index: -1;
}

.thankyou-btn a:hover::before {
	width: 100%;
}

/* pc */
@media screen and (min-width: 769px){
	.sp{display: none !important;}
	.spbr{display: none;}
}


/* small pc */
@media screen and (min-width: 1367px){
	.what-col-num {
		font-size: 160px;
	}

}
/* small pc */

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

	.who-col-message {
		padding-left: 0;
		width: 45%;
	}

	.who-col-text {
		padding-left: 0;
		width: 50%;
	}

	.works {
		padding-left: 50px;
		padding-right: 50px;
	}

	.results {
		padding-left: 50px;
		padding-right: 50px;
	}

	.how {
		padding-left: 50px;
		padding-right: 50px;
	}

	.contact {
		padding-left: 50px;
		padding-right: 50px;
	}

	.clients {
		padding-left: 50px;
		padding-right: 50px;
	}

}


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


	/* default */
	img{max-width:100%;}
	a img{opacity:1;}
	*{box-sizing:border-box;}

	/* common item */
	.pc{display: none !important;}
	.pcbr{display: none;}
	.sp{display: block !important;}
	.spbr{display: inline !important;}


	/* header ---------------------------------------*/

	.header-logo{
		width:122px;
		height:48px;
		left:20px;
		top:20px;
	}

	.header-logo svg {
		width: 122px;
	}


	/* common ---------------------------------------*/

	.title-section {
		margin-bottom: 8px;
	}

	.title-block {
		font-size: 24px;
		letter-spacing: 0.02em;
		margin-bottom: 25px;
	}

	.btn {
		font-size: 14px;
		letter-spacing: 0.1em;
	}

	/* kv ---------------------------------------*/

	.kv {
		background: url('../img/kv_sp.png') no-repeat center top;
		background-size: cover;
	}

	.kv-inner {
		left: 10%;
		top: auto;
		transform: translate(0, 0);
		bottom: 35px;
	}

	.kv-copy-wrapper {
		font-size: 32px;
		margin-bottom: 18px;
	}

	.kv-copy {
		line-height: 1;
	}

	.kv-copy + .kv-copy {
		margin-top: 2px;
	}

	.kv-message {
		width: 100%;
		line-height: 1.5;
	}

	.kv-scroll {
		padding-top: 48px;
	}


	/* who ---------------------------------------*/


	.who {
		padding: 62px 36px;
	}

	.who-row {
		display: block;
	}

	.who-col-message {
		padding-left: 0;
		width: 100%;
		font-size: 20px;
		line-height: 1.6;
	}

	.who-col-text {
		width: 100%;
		padding-top: 25px;
		padding-left: 0;
		line-height: 1.5;
	}


	/* what ---------------------------------------*/

	.what {
		padding: 60px 0 0;
	}

	.bg-gray-wrapper.is-active {
		overflow: hidden;
	}

	.bg-gray-wrapper.bg-01 {
		width: 69%;
		height: 460px;
	}

	.bg-gray-wrapper.bg-02 {
		bottom: 14.2%;
		width: 69%;
		height: 750px;
	}

	.what-inner .title-section{margin-left: 36px;}

	.what-lead {
		width: 100%;
		font-size: 24px;
		letter-spacing: 0.02em;
		padding-left: 36px;
		margin-bottom: 40px;
	}

	.what-row {
		display: block;
		margin-bottom: 45px;
		overflow: hidden;
	}

	.what-row.row-01 {
		margin-bottom: 0;
	}

	.what-row.row-02 {
		margin-bottom: 0;
	}

	.what-row.row-03 {
		margin-bottom: 0;
	}

	.what-col-image {
		width: 80%;
		margin-bottom: 40px;
	}

	.what-row.row-01 .what-col-image {
		padding-left: 36px;
		margin-left: 0;
	}

	.what-row.row-02 .what-col-image {
		width: 110%;
		margin-left: 18px;
		margin-right: 0;
		margin-bottom: 0;
		padding-top: 105px;
	}

	.what-row.row-03 .what-col-image {
		width: 102%;
		padding-left: 0;
		padding-right: 36px;
		margin-left: -2%;
		margin-bottom: 25px;
		padding-top: 70px;
	}

	.what-col-num {
		font-size: 96px;
		right: -22%;
		bottom: -12%;
	}

	.what-row.row-02 .what-col-num {
		top: -29%;
		left: 12px;
	}

	.what-row.row-03 .what-col-num {
		right: -4%;
		top: -12%;
	}

	.what-col-detail {
		width: 100%;
		padding-left: 36px;
		padding-right: 36px;
	}

	.what-row.row-02 .what-col-detail {
		padding-left: 36px;
	}

	.what-row.row-03 .what-col-detail {
		padding-top: 0;
	}

	.what-col-title {
		font-size: 24px;
		letter-spacing: 0.05em;
		margin-bottom: 15px;
	}

	.what-col-message {
		font-size: 16px;
		letter-spacing: 0.02em;
		margin-bottom: 15px;
	}

	.what-col-text {
		letter-spacing: 0;
	}


	/* works ---------------------------------------*/

	.works {
		padding: 115px 20px 45px;
	}

	.works-inner {
		margin: 0 auto 20px;
	}

	.works .title-section {
		margin-bottom: 15px;
	}

	.works .title-block {
		margin-bottom: 25px;
	}

	.works-mainimage {
		margin-left: -20px;
		margin-right: -20px;
	}

	.works-list {
		padding: 0;
	}

	.works-list-item {
		width: 48%;
		margin-bottom: 18px;
	}

	.works-list-image {
		margin-bottom: 10px;
	}

	.works-more {
		padding: 10px 0;
	}


	/* results ---------------------------------------*/

	.results {
		padding: 55px 36px 35px;
	}

	.results .title-section {
		margin-bottom: 18px;
	}

	.results .title-block {
		margin-bottom: 35px;
	}

	.results-row {
		display: block;
	}

	.results-col {
		width: 100%;
	}

	.results-num b {
		font-size: 150px;
	}

	.results-num small {
		font-size: 49px;
	}

	.results-text {
		padding-top: 5px;
		font-size: 15px;
	}


	/* capability ---------------------------------------*/

	.capability {
		padding: 50px 36px 17px;
		text-align: left;
	}

	.capability::before {
		background: url('../img/bg_capability_sp.png') no-repeat center center;
		background-size: cover;
	}

	.capability .title-section {
		display: inline-block;
		margin-bottom: 10px;
	}

	.capability-row {
		display: block;
	}

	.capability-col {
		width: 100%;
		margin-bottom: 40px;
	}

	.capability-col:nth-of-type(1) {
		width: 100%;
	}

	.capability-col:nth-of-type(2) {
		width: 100%;
	}

	.capability-text {
		line-height: 1.65;
		font-size: 20px;
		margin-bottom: 20px;
	}

	.capability-list.is-half {
		width: 100%;
		float: none;
	}

	.capability-list-item {
		font-size: 15px;
		line-height: 1.5;
	}


	/* how ---------------------------------------*/

	.how {
		padding: 55px 36px;
	}

	.how::before {
		display: none;
	}

	.how .title-section {
		margin-bottom: 17px;
	}

	.how .title-block {
		margin-bottom: 10px;
	}

	.how-image {
		width: 87%;
		margin: 0 auto;
	}

	.how-block {
		padding-left: 0;
		margin-top: 5px;
	}

	.line {
		left: 18px;
	}

	.how-list-title {
		font-size: 16px;
		padding-left: 50px;
		margin-bottom: 12px;
	}

	.how-list-title::before {
		width: 36px;
		height: 36px;
		line-height: 36px;
		font-size: 19px;
	}

	.how-list-innerlist {
		padding-left: 50px;
		padding-bottom: 32px;
	}


	/* contact ---------------------------------------*/

	.contact {
		padding: 60px 36px;
	}

	.contact .title-section {
		margin-bottom: 15px;
	}

	.contact .title-block {
		line-height: 1;
		margin-bottom: 25px;
	}

	.contact-col {
		width: 100%;
	}

	.contact-col:first-of-type {
		width: 100%;
	}

	.contact-col:last-of-type {
		padding-top: 0;
	}

	.contact-text {
		margin-bottom: 30px;
	}

	.contact-block:not(:first-child){margin-top: 16px;}


	/* clients ---------------------------------------*/

	.clients {padding: 50px 36px 60px 26px;}

	.clients .title-section {
		display: inline-block;
		margin-bottom: 15px;
	}


	/* footer ---------------------------------------*/

	footer {padding: 13px 0 13px 0;}


	/* form area ---------------------------------------*/

	.form-title {margin: 0 0 10px;}
	.form-text[type="text"] {padding: 15px 5px;}


	/* thankyou ---------------------------------------*/

	.thankyou {height: calc(100vh - 47px);}
	.thankyou-inner {width: calc(100% - 72px);}

	.thankyou-title {
		font-size: 24px;
		text-align: center;
		margin-bottom: 18px;
	}

	.thankyou-message {letter-spacing: 0.02em;}

}