@charset "UTF-8";



/*////////////////////// mv //////////////////////*/
.mv{
	height: 100vh;
	position: relative;
        overflow: hidden;
}
.mv-bg {
        width: 100%;
        height: calc(100% - 180px);
        object-fit: cover;
        position: absolute;
        top: 120px;
        left: calc(((100% - 1100px) / 2) + 210px);
        z-index: -1; /* 他のコンテンツの後ろに配置する */
}
.mv-movie {
        width: 60%;
        height: calc(100% - 180px);
        object-fit: cover;
        position: absolute;
        top: 120px;
        left: calc(((100% - 1100px) / 2) + 410px);
        z-index: -1; /* 他のコンテンツの後ろに配置する */
}
.mv h1{
	background-color: #f18700;
	position: absolute;
	left: calc((100% - 1100px) / 2);
	bottom: 0;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	color: #fff;
  	font-size: clamp(56px,4.47vw,86px);
  	padding: 1.01em 0.53em;
}
.mv h1::after{
	content: '';
    width: 92%;
    height: 92%;
    border: 2px solid #fff;
    position: absolute;
    top: 4%;
    left: 4%;
}
.mv h1 .en{
	font-size: clamp(56px,4.47vw,86px);
	font-weight: 600;
	text-align: center;
	position: relative;
}
.mv h1 .small {
    font-size: clamp(36px, 1.5vw, 42px); /* 小さいフォントサイズを設定 */
}
.mv h1 .en.last::after{
	content: '';
	width: 4.4em;
	height: 2px;
	background-color: #fff;
	position: absolute;
	bottom: -0.1em;
	left: calc(50% - 2.2em);
}
.mv h1 .kakeru{
	font-size: clamp(26px,3.37vw,42px);
	margin-top: -0.2em;
}
.mv h1 .ja{
	font-size: clamp(24px,1.8vw,34px);
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin-top: 0.5em;
}


@media all and (max-width: 1139px) and (min-width: 768px){
  .mv h1{
		left: 20px;
	}
}

/*-----------PC-----------*/
@media all and (min-width: 768px){
}

/*-----------SP-----------*/
@media all and (max-width: 767px){
	.mv {
    	height: 0;
   		padding-top: calc(80px + 55vw);
	}
	.mv::before {
	    width: 90%;
	    height: 0;
	    top: 60px;
	    left: 10%;
	    padding-top: 55vw;
	  }
  .mv h1{
  	left: 5%;
  	font-size: clamp(30px,7.57vw,57px);
  	padding: 0.95em 0.4em;
	}
	.mv h1::after{
		content: '';
	    width: 94%;
	    height: 94%;
	    border: 1px solid #fff;
	    position: absolute;
	    top: 3%;
	    left: 3%;
	}
	.mv h1 .en{
		font-size: clamp(30px,7.57vw,57px);
		font-weight: 600;
		text-align: center;
		position: relative;
	}
	.mv h1 .en.last::after{
		height: 1px;
	}
	.mv h1 .kakeru{
		font-size: clamp(14px,3.37vw,25px);
	}
	.mv h1 .ja{
		font-size: clamp(12px,3vw,22px);
		margin-top: 0.5em;
	}

}



/*////////////////////// 共通 //////////////////////*/

@media all and (min-width: 1140px){
  .main .inner{
  	padding: 0;
	}
}

.sec{
	background-color: #fff;
	margin-top: 100px;
	padding-left: 3.6%;
	padding-right: 3.6%;
}
.sec.inner:not(.innovation){
	padding-left: 40px;
	padding-right: 40px;
}
.sec_ttl{
	font-size: 40px;
	line-height: 1.2;
	color: #f18700;
	text-align: center;
}


/*-----------PC-----------*/
@media all and (min-width: 768px){
	.sec_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 60px;
	}
	.sec_list > div,
	.sec_list > a{
		width: 46.9%;
	}

}

/*-----------SP-----------*/
@media all and (max-width: 767px){
	.sec_ttl{
		font-size: 36px;
	}
	.sec {
    margin-top: 50px;
    padding-left: 5%;
    padding-right: 5%;
	}
	.sec_list{
		margin-top: 30px;
	}

}


/*////////////////////// innovation //////////////////////*/
.innovation_txt{
	font-size: 16px;
	line-height: 2.25;
	text-align: center;
	margin-top: 50px;
}
@media all and (max-width: 1139px) {
  .innovation_txt{
		text-align: justify;
	}
	.innovation_txt br.none{
		display: none;
	}
}

/*-----------PC-----------*/
@media all and (min-width: 768px){
}

/*-----------SP-----------*/
@media all and (max-width: 767px){
	.innovation_txt{
		margin-top: 25px;
	}

}

/*////////////////////// business //////////////////////*/
.business_list > div{
	position: relative;
	display: block;
}

.business_list img{
	margin-top: 20px;
}
.business_list .number{
	font-size: clamp(6.25rem, 5.025rem + 5.23vw, 8.75rem);
	color: #f2be79;
	position: absolute;
	top: -0.14em;
	left: 10px
}
.business_list h3{
	font-size: clamp(1.375rem, 1.13rem + 1.05vw, 1.875rem);
	margin-top: 0.5em;
}
.business_txt{
	font-size: 16px;
	margin-top: 1em;
}

/*-----------PC-----------*/
@media all and (min-width: 768px){
	.business_list > div:nth-child(n + 3){
		margin-top: 60px;
	}

}

/*-----------SP-----------*/
@media all and (max-width: 767px){
	.business .sec_list{
		margin-top: 40px;
	}
	.business_list > div{
		text-align: center;
	}
	.business_list > div:nth-child(n + 2){
		margin-top: 40px;
	}
	.business_txt{
		margin-top: 0.5em;
	}

}

/*////////////////////// service //////////////////////*/
.service_list > div{
	height: 260px;
	border: 2px solid #f18700;
	position: relative;
	padding: 10px 1.55vw 0;
}
.service_link{
	width: 100%;
	height: 100%;
	display: block;
}
.service_ttl{
	display: flex;
	align-items: center;
}
.service_ttl .number{
	font-size: clamp(3.5rem, 2.765rem + 3.14vw, 5rem);
	color: #000;
}
.service_ttl .ja{
	font-size: clamp(1.125rem, 0.757rem + 1.57vw, 1.875rem);
	line-height: 1.2;
	color: #f18700;
	white-space: nowrap;
	margin-left: 1em;
	margin-top: 0.2em;
}
.service_txt{
	line-height: 2.25;
	text-align: justify;
	margin-top: 1.5em;
}
.repost{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 120px;
	height: 30px;
	background-color: #000;
	border-radius: 5px;
	color: #fff;
	padding-right: 15px;
	position: absolute;
	right: 20px;
	bottom: 15px;
}
.repost::before{
	content: '';
	width: 19px;
	height: 19px;
  background: url(../img/logo_x.svg) no-repeat center / 100%;
  position: absolute;
  left: 15px;
}
@media all and (max-width: 1020px){
	.service_txt{
		line-height: 1.75;
	}

}
@media all and (max-width: 1139px) and (min-width: 768px){
	.service_ttl .ja {
		
	}

}
/*-----------PC-----------*/
@media all and (min-width: 768px){
	.service_list > div:nth-child(n + 3){
		margin-top: 40px;
	}

}

/*-----------SP-----------*/
@media all and (max-width: 767px){
	.service_list > div{
		height: auto;
		padding: 10px 5% 60px;
	}
	.service_list > div:nth-child(n + 2){
		margin-top: 30px;
	}

	.service_ttl .number{
		font-size: 70px;
	}
	.service_ttl .ja{
		font-size: 22px;
		margin-left: 0.75em;
	}
	.service_txt{
		line-height: 1.75;
		margin-top: 1em;
	}

}

/*////////////////////// client //////////////////////*/
.client_list > div{
	height: 260px;
	border: 2px solid #f18700;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.client_list img{
	width: 84.2%;
}
.client_txt{
	font-size: clamp(1.563rem, 1.256rem + 1.31vw, 2.188rem);
	margin-top: 0.35em;
}

/*-----------PC-----------*/
@media all and (min-width: 768px){
	.client_list > div:nth-child(n + 3){
		margin-top: 40px;
	}
}

/*-----------SP-----------*/
@media all and (max-width: 767px){
	.client_list > div{
		height: auto;
		padding: 20px 10%;
	}
	.client_list > div:nth-child(n + 2){
		margin-top: 30px;
	}
	.client_list img{
		width: 100%;
		max-width: 280px;
	}
	.client_txt{
		font-size: 20px;
	}

}

/*////////////////////// aaa //////////////////////*/


/*-----------PC-----------*/
@media all and (min-width: 768px){
}

/*-----------SP-----------*/
@media all and (max-width: 767px){
}

/*////////////////////// aaa //////////////////////*/


/*-----------PC-----------*/
@media all and (min-width: 768px){
}

/*-----------SP-----------*/
@media all and (max-width: 767px){
}


/*////////////////////// feature //////////////////////*/
.feature {
    background-color: #fff;
    padding: 60px 3.6%;
    text-align: center;
}

.feature h2 {
    font-size: 40px;
    line-height: 1.2;
    color: #f18700;
    margin-bottom: 60px;
}

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

.feature_item {
    width: 30%;
    background-color: #f7f7f7;
    padding: 20px;
    margin-bottom: 30px;
    border: 2px solid #f18700;
    position: relative;
}

.feature_item h3 {
    font-size: clamp(1.375rem, 1.13rem + 1.05vw, 1.875rem);
    color: #000;
    margin-bottom: 20px;
}

.feature_item p {
    font-size: 16px;
    line-height: 1.75;
    text-align: justify;
}

/*-----------PC-----------*/
@media all and (min-width: 768px) {
    .feature_list {
        margin-top: 60px;
    }

    .feature_item:nth-child(n + 4) {
        margin-top: 60px;
    }
}

/*-----------SP-----------*/
@media all and (max-width: 767px) {
    .feature {
        padding: 50px 5%;
    }

    .feature h2 {
        font-size: 36px;
    }

    .feature_list {
        flex-direction: column;
        align-items: center;
    }

    .feature_item {
        width: 100%;
        margin-bottom: 30px;
    }

    .feature_item h3 {
        font-size: 22px;
    }

    .feature_item p {
        font-size: 14px;
    }
}


/* Service Section */
.service {
    background-color: #fff;
    padding: 50px 3.6%;
    margin-top: 100px;
}

.service .sec_ttl {
    font-size: 40px;
    line-height: 1.2;
    color: #f18700;
    text-align: center;
}

.service_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 60px;
}

.service_item {
    width: 46.9%;
    padding: 20px;
    border: 2px solid #f18700;
    position: relative;
    margin-bottom: 40px;
}

.service_item h3 {
    font-size: clamp(1.125rem, 0.757rem + 1.57vw, 1.875rem);
    color: #f18700;
    margin-bottom: 1em;
}

.service_item p {
    line-height: 1.75;
    text-align: justify;
}

@media all and (max-width: 767px) {
    .service_list {
        display: block;
    }

    .service_item {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* Flow Section */
.flow {
    background-color: #fff;
    padding: 50px 3.6%;
    margin-top: 100px;
}

.flow .sec_ttl {
    font-size: 40px;
    line-height: 1.2;
    color: #f18700;
    text-align: center;
}

.flow a {
    color: #f18700; /* リンクの色を指定します。ここではオレンジ色を使用しています。 */
    text-decoration: underline; /* リンクの下線を追加します。 */
}

.flow a:hover {
    color: #d97500; /* リンクにホバーしたときの色を指定します。ここでは濃いオレンジ色を使用しています。 */
    text-decoration: none; /* ホバー時に下線を削除します。 */
}

.flow_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 60px;
}

.flow_item {
    width: 100%;
    padding: 20px;
    border: 2px solid #f18700;
    position: relative;
    margin-bottom: 40px;
}

.flow_item h3 {
    font-size: clamp(1.125rem, 0.757rem + 1.57vw, 1.875rem);
    color: #f18700;
    margin-bottom: 1em;
}

.flow_item p {
    line-height: 1.75;
    text-align: justify;
}

@media all and (max-width: 767px) {
    .flow_list {
        display: block;
    }

    .flow_item {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* Annotation Section */
.annotation {
    padding: 50px 3.6%;
    margin-top: 100px;
}

.annotation .sec_ttl {
    font-size: 40px;
    line-height: 1.2;
    color: #f18700;
    text-align: center;
}

.annotation_list {
    margin-top: 60px;
}

.annotation_item {
    margin-bottom: 40px;
}

.annotation_item h3 {
    font-size: clamp(1.125rem, 0.757rem + 1.57vw, 1.875rem);
    color: #f18700;
    margin-bottom: 0.5em;
}

.annotation_item p {
    line-height: 1.75;
    text-align: justify;
}

/* Sample video Section */
.sample-video {
    margin-top: 100px;
    padding-left: 3.6%;
    padding-right: 3.6%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sample-video h3 {
    font-size: 36px;
    line-height: 1.2;
    color: #f18700;
    text-align: center;
}

.tiktok-video {
    margin-top: 30px;
    width: 100%;
    max-width: 600px; /* Adjust max-width as needed */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.tiktok-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.inquiry {
    margin-top: 100px;
    padding-left: 3.6%;
    padding-right: 3.6%;
}

.inquiry h2 {
    font-size: 40px;
    line-height: 1.2;
    color: #f18700;
    text-align: center;
}

.txt-middle-content {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
}

.c-form {
    max-width: 600px;
    margin: 0 auto;
}

.c-form__item {
    margin-bottom: 20px;
}

.c-form__label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.c-form__required {
    color: #f18700;
}

.c-form__input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.c-form__submit {
    text-align: center;
}

.c-form__submit button {
    background-color: #f18700;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.c-form__submit button:hover {
    background-color: #d97500;
}

@media all and (max-width: 767px) {
    .inquiry {
        margin-top: 50px;
        padding-left: 5%;
        padding-right: 5%;
    }

    .inquiry h2 {
        font-size: 36px;
    }
}