@charset "UTF-8";

/*------------------------------------------------------------
    基本設定 コンテンツ幅
------------------------------------------------------------*/
.content {
    margin-bottom: 60px;
}
.content_area {
	position:relative;
	padding: 0 20px;
	margin: 0 auto;
}
.content_area.nopadding_sp {
	padding:0px;
}
@media screen and (min-width: 768px) {
    .content_area, .content_area.nopadding_sp {
        padding: 0 30px;
        max-width: 1320px;
    }
}
@media screen and (min-width: 992px) {
    .content {
        margin-bottom: 120px;
    }
    .content_area, .content_area.nopadding_sp {
        padding: 0 60px;
    }
}

/*------------------------------------------------------------
    基本設定　カラー
------------------------------------------------------------*/
.bg_lightgray{background-color:#FCFCFC;}
.bg_gray{background-color:#E7EAEB;}
.bg_white{background-color:#fff;}
.text_white{color:#ffffff;}
.text_red{color:var(--color-red);}
.text_lightblack{color:var(--text-color-lightblack);}



/*------------------------------------------------------------
    基本設定　テキスト
------------------------------------------------------------*/
.text_center{text-align:center;}
.text_right{text-align:right;}
.tategaki{writing-mode: vertical-rl;}
.text_s{font-size:1.2rem;}
.text_indent{
	text-indent: -1em;
  padding-left: 1em;
}

/*------------------------------------------------------------
    切り替え
------------------------------------------------------------*/
.visibility--s,
.visibility--m,
.visibility--l {
    display: none !important;
}
@media screen and (min-width: 768px) {
    .hidden--s {
        display: none !important;
    }
    .visibility--s {
        display: block !important;
    }
}
/* ----- media END ----- */
@media screen and (min-width: 992px) {
    .hidden--m {
        display: none !important;
    }
    .visibility--m {
        display: block !important;
    }
}
/* ----- media END ----- */
@media screen and (min-width: 1200px) {
    .hidden--l {
        display: none !important;
    }
    .visibility--l {
        display: block !important;
    }
}

/*------------------------------------------------------------
  コンテンツ
------------------------------------------------------------*/
	/*共通*/
ul.basic{
	font-size:1.4rem;
	list-style-type:disc;
	line-height:1.5;
	margin-bottom:1em;
}
ul.basic li{
	margin-left:1.5em;
}


@media screen and (min-width: 768px) {
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}

/*------------------------------------------------------------
  INDEX
------------------------------------------------------------*/
.section_title{
  font-family: "Afacad", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
	font-size:12vw;
	margin:1em 0 0;
	line-height:1;
	letter-spacing: 0.02em;
}
.sub_title{
	font-size:4vw;
	margin:0.25em 0 3em;
	line-height:1.6;
	color: var(--text-color-lightblack);
}

@media screen and (min-width: 768px) {
	.section_title{font-size:5rem;}
	.sub_title{font-size:1.2rem;margin-bottom: 4em;}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}


	/* mv */
#mv{
	background:url(../images/mv.webp) no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	margin-top: 60px;
	height:100vw;
	display:flex;
	align-items:center;
}
.mv_copy{
	background:url(../images/mv_typo.webp) no-repeat;
	background-position: center right;
	background-size: auto 86%;
	padding:17.5% 0;
}
.mv_copy p{
	position:relative;
}
.mv_copy .copy1{
  font-family: "Afacad", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
	font-size:10vw;
	margin-bottom: 0.5em;
	text-shadow: inset 0px 3px 6px #00000029, 5px 3px 10px #00000029;
	color: #F8F8F8;
}
.mv_copy .copy2{
	font-size:2.8vw;
	line-height: 2;
	color: #fff;
	font-weight:500;
}

.mv_copy_border{
	background-color: var(--text-color-yellow);
	max-width:350px;
	width:50%;
	height:10px;
	margin-top:40px;
}
@media screen and (min-width: 768px) {
	#mv{
		background-position: 50% 50%;
		background-size: cover;
		height:auto;
		display:block;
	}
	.mv_copy{
		background-size: auto 86%;
		padding:17.5% 0;
	}
	.mv_copy .copy1{
		font-size:8rem;
	}
	.mv_copy .copy2{
		font-size:1.6rem;
	}

}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}


	/*Friction*/
.friction-text{
	border-top:10px solid var(--text-color-yellow);
}
.friction-text h3{
	font-size:5vw;
	font-weight:600;
	margin:2em 0 1em;
}

@media screen and (min-width: 768px) {
	.friction-text h3{
		font-size:1.8rem;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}


	/*solution*/
.solution-box{
	background:#F5F5F5;
	border-radius: 10px;
	height: 100%;
}
.solution-box-image img{
	border-radius: 10px 10px 0 0;
}
.solution-box-text{
	padding:1.5em;
}
.solution-box-text h3{
	font-size:4vw;
	margin-bottom:0.75em;
	font-weight: 500;
	color: var(--text-color-lightblack2);
}
.solution-box-text p{
	font-size:3.5vw;
	margin-bottom:0;
	color: var(--text-color-lightblack2);
}
@media screen and (min-width: 768px) {
	.solution-box-text h3{
		font-size:1.4rem;
	}
	.solution-box-text p{
		font-size:1.2rem;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}

	/*Why Us*/
#whyus{
	background:#272A31 url(../images/whyus_bg.svg) no-repeat;
	background-position: 50% 50%;
	background-size: 300% 300%;
	padding:2.5% 0 5%;
}
#whyus .text_yellow{
	color:var(--text-color-yellow);
}
#whyus .text_yellow2{
	color:#989058;
}
#whyus h3{
	font-size:4.5vw;
	margin-bottom:2em;
}
#whyus .whyus_text{
	padding:3em 1em;
}
@media screen and (min-width: 768px) {
	#whyus{
		background-position: 30% 60%;
		background-size: 50% 100%;
	}
	#whyus h3{
		font-size:1.6rem;
	}
	#whyus .whyus_text{
		padding:5em 10em;
	}
}


	/*Steps*/
#steps{
	background: transparent linear-gradient(172deg, #FEFEFE 0%, #F2F2F2 100%) 0% 0% no-repeat;
	padding:0px 0 80px;
}
.step-box{
	padding:2.5em 0;
	border-top: 1px solid #5A5E65;
}
.step-box:last-child{
	border-bottom: 1px solid #5A5E65;
}
.step-box h3{
	font-size:9vw;
  font-family: "Afacad", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
	color: var(--text-color-lightblack);
}
.step-box h3 span{
	display: block;
	font-size:0.45em;
}
.step-box h3 small{
	font-size:0.5em;
}
.step-arrow{
	text-align:center;
	width:60px;
}	
@media screen and (min-width: 768px) {
	.step-box h3{
		font-size:4rem;
	}
}


	/*Portfolio*/
#portfolio{

}
.portfolio-box-outer{
	padding-bottom: 60px;
	border-bottom:10px solid var(--text-color-yellow);
}
.portfolio-box{
	position: relative;
}
.portfolio-box-image img{
	border-radius: 10px;
}
.portfolio-box-text{
	position: absolute;
	width:100%;
	height: 100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
/*	background: transparent linear-gradient(180deg, #F5F5F500 0%, #97999E99 65%, #97999E 100%) 0% 0% no-repeat;*/
	border-radius: 10px;
	color:#F8F8F8
}
.portfolio-box-text ul{
	position: absolute;
	bottom:0px;
	left:0;
	font-size:3.5vw;
	padding:1.5em;
}
.portfolio-box-text ul li{
	margin-bottom:0.5em;
	line-height: 1.5;
}
@media screen and (min-width: 768px) {
	.portfolio-box-text ul{
		font-size:1.2rem;
	}
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 1200px) {
}

	/*faq*/
#faq{
	background: transparent linear-gradient(167deg, #F5F2EA 0%, #EBF5EE 100%) 0% 0% no-repeat;
	padding:1px 0 80px;
}
.faq-box{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border: 1px solid #5A5E65;
	border-radius: 45px;
	padding:15px 30px;
	margin-bottom:3em;
}
.faq-box p{
	margin-bottom:0;
}
.faq-box .faq-question{
	padding:0 0 0 2.8em;
	position:relative;
}
.faq-box .faq-question:before{
  font-family: "Afacad", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
	position:absolute;
	top:-0.1em;left:0;
	content:'Q.';
	font-size:2.5rem;
	color:var(--text-color-lightblack);
	line-height:1;
}
.faq-box .faq-answer{
	display:none;
	margin-top:1em;
	padding:0 0 0 2.8em;
	word-break: break-all;
	position:relative;
}
.faq-box .faq-answer:before{
  font-family: "Afacad", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
	position:absolute;
	top:-0.1em;left:0;
	content:'A.';
	font-size:2.5rem;
	color:var(--text-color-lightblack);
	line-height:1;
}

.oc-button{
	display:block;
	color: #fff;
	background: #1C1F24 0% 0% no-repeat padding-box;
	border: 1px solid #707070;
	border-radius: 15px;
	text-align:center;
	padding:0.5em 1em;
	width:60px;
	cursor: pointer;
	transition: all 0.3s ease;
}	
.oc-button:hover{
	opacity: 0.6;
	transition: all 0.3s ease;
}
.oc-button.active i {
  transform: rotate(180deg);
  transition: transform 0.3s;
}
.oc-button i {
  transition: transform 0.3s;
}
@media screen and (min-width: 768px) {

}

	/*Get in Touch*/
#getintouch{
	padding:1px 0 80px;
	background-color: #FCFCFC;
}
.second-page #getintouch{
	background-color:transparent;
	padding-top:100px;
}
.contact-form{
	padding:30px 0px;
}
.contact-form label{
	color: var(--text-color-lightblack);
	font-size: 1.4rem;
	margin-top: 0;
	display: block;
}
.contact-form label .hissu{
	color: var(--text-color-red);
	font-size: 0.8em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
	border: 1px solid #97999E;
	border-radius: 50rem;
	padding: 0.5em 1em;
	width: 100%;
	font-size: 1.4rem;
}
.contact-form textarea{
	border-radius: 1.5rem;
	line-height: 1.4;
}
.contact-form ::placeholder{
	color:#B2B2B2;
}
.error-text{
	color: var(--text-color-red);
	font-size: 1.3rem;
	margin:0.5em 0 0;
}
.custom-file-btn {
  display: inline-block;
  cursor: pointer;
  padding: 10px 40px;
  background-color: #ffffff;
  border: 1px solid #97999E; 
  border-radius: 50rem;
  color: var(--text-color-lightblack);
  font-size: 0.9rem;
  transition: all 0.2s ease;
  text-align: center;
}
.custom-file-btn:hover {
  background-color: #fff;
  border-color: #97999E;
}
.selected-filename {
  font-size: 1.2rem;
  color: #888;
  padding: 5px 0 0 10px;
}
.submit-button{
	border-top: 1px solid #5A5E65;;
	margin: 30px 0 40px;
	padding-top: 40px;
}
.contact-form button[type="submit"]{
	background-color: var(--text-color-yellow);
	border: none;
	border-radius: 50rem;
	font-size: 1.4rem;
	padding: 0.75em 2em;
	min-width:9em;
	cursor: pointer;
	transition: all 0.3s ease;
}	

@media screen and (min-width: 768px) {
	.contact-form{
		padding:60px 10%;
	}
	.contact-form label{
		margin-top: 0.75em;
	}
}