@charset "utf-8";

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

	.main{
		padding-top: 0;
	}
	
}



/*-------------------------------
	キービジュアル
-------------------------------*/

.Keyvisual:has(.Keyvisual__image)::before{
	opacity: .3;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

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

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

}



/*-------------------------------
	制作着手前の事前準備
-------------------------------*/

.Preparation-marker-text{
	margin-bottom: 2rem;
}
.Preparation-point-wrap{
	margin-bottom: 5.5rem;
}

.Preparation-block:not(:last-child){
	margin-bottom: 5.5rem;
}
.Preparation-block__image{
	width: 100%;
}
.Preparation-block__image img{
	width: 100%;
}

/*----- 動画制作の用途/目的を明確に決めておく */
.Preparation-use-wrap{
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}
.Preparation-use{
	width: calc((100% - 2rem) / 2);
	padding: 4.2rem 4.5rem 3.5rem;
	background: #f7f8f8;
}
.Preparation-use__header{
	width: 100%;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Preparation-use__header::before{
	content: "";
	display: block;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.Preparation-use__title{
	width: calc(100% - 7.5rem);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: calc(2.8 / 2.2);
	letter-spacing: .05em;
}
.Preparation-use__list-item{
	width: 100%;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: calc(3.2 / 1.6);
	display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.Preparation-use__list-item::before{
	content: "・";
    line-height: calc(3.2 / 1.6);
}

.Preparation-use:nth-of-type(1) .Preparation-use__header::before{
	width: 5.8rem;
	height: 5.8rem;
	background-image: url(../images/flow/icon_preparation-use1.svg);
}
.Preparation-use:nth-of-type(2) .Preparation-use__header::before{
	width: 4.5rem;
	height: 5.4rem;
	background-image: url(../images/flow/icon_preparation-use2.svg);
}

/*----- ターゲット/ペルソナを設定する */
.Preparation-target{
	padding: 2.2rem 4.5rem 4.2rem;
	background: #f7f8f8;
}
.Preparation-target__title{
	color: var(--subcolor);
	font-family: var(--en);
	font-size: 2rem;
	margin-bottom: 1.6rem;
	font-weight: 700;
	letter-spacing: .05em;
	display: block;
	line-height: 1;
}
.Preparation-target__body{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.Preparation-target__image{
	width: 22rem;
}
.Preparation-target__image img{
	width: 100%;
	height: 25.1rem;
	object-fit: cover;
}
.Preparation-target__content{
	width: calc(100% - 22rem);
	padding-left: 3.6rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.Preparation-target__data-wrap{
	width: calc((100% - 2.5rem) / 2);
}
.Preparation-target__data{
	width: 100%;
	padding-top: 1.5rem;
	padding-bottom: 1.8rem;
	border-bottom: 1px solid #bbb;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.Preparation-target__data:first-child{
	border-top: 1px solid #bbb;
}
.Preparation-target__data-title{
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
.Preparation-target__data-body{
	line-height: 1;
	letter-spacing: 0;
}

.Preparation-target__data-wrap:nth-of-type(1) .Preparation-target__data-title{
	width: 9.5rem;
}
.Preparation-target__data-wrap:nth-of-type(1) .Preparation-target__data-body{
	width: calc(100% - 9.5rem);
}
.Preparation-target__data-wrap:nth-of-type(2) .Preparation-target__data-title{
	width: 5.5rem;
}
.Preparation-target__data-wrap:nth-of-type(2) .Preparation-target__data-body{
	width: calc(100% - 5.5rem);
}

/*----- ある程度、予算の上限を決めておく */
.Preparation-limit-wrap{
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}
.Preparation-limit{
	width: calc((100% - 2rem) / 2);
	padding: 4.6rem;
	background: #f7f8f8;
}
.Preparation-limit__title{
	width: 100%;
	height: 4rem;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: .05em;
	background: #9fa0a0;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Preparation-limit__list{
	padding-top: 2.5rem;
	text-align: center;
}
.Preparation-limit__list-item{
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1;
	font-weight: 700;
	position: relative;
}
.Preparation-limit__list-item.-step1{
	margin-bottom: 2.8rem;
}
.Preparation-limit__list-item.-step2{
	margin-bottom: 5.8rem;
}
.Preparation-limit__list-item.-step3{
	font-size: 2.2rem;
}
.Preparation-limit__list-item.-step3::after{
	background: var(--subcolor);
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-top: .5rem;
}
.Preparation-limit__list-arrow1{
	position: absolute;
	left: 0;
	bottom: -1.5rem;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	transform: rotate(90deg);
}
.Preparation-limit__list-arrow2{
	width: 2.6rem;
	height: 2rem;
	transform: translateY(100%);
	background-image: url(../images/flow/icon_preparation-limit2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	left: 0;
	bottom: -1.9rem;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.Preparation-limit__text{
	width: 100%;
	margin-top: 2rem;
	line-height: calc(2.8 / 1.8); 
	font-size: 1.8rem;
	letter-spacing: .05em;
	font-weight: 700;
	text-align: center;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1120px) and (min-width: 769px){

	.Preparation-use{
		padding: 4.2rem 2.5rem 3.5rem;
	}

	.Preparation-target{
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	.Preparation-target__title{
		text-align: center;
	}
	.Preparation-target__body{
		flex-direction: column;
		align-items: center;
	}
	.Preparation-target__image{
		margin-bottom: 2.5rem;
	}
	.Preparation-target__content{
		width: 100%;
		padding-left: 0;
	}

	.Preparation-limit{
		padding: 2.5rem;
	}
	

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

	.Preparation-use-wrap{
		flex-direction: column;
	}
	.Preparation-use{
		width: 100%;
	}
	.Preparation-use:not(:last-child){
		margin-bottom: 2.5rem;
	}
	.Preparation-use__list{
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.Preparation-use__list-item{
		width: calc(50% - 1.25rem);
	}

	.Preparation-limit-wrap{
		flex-direction: column;
	}
	.Preparation-limit{
		width: 100%;
	}
	.Preparation-limit:not(:last-child){
		margin-bottom: 2.5rem;
	}
	.Preparation-limit__list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.Preparation-limit__list-item{
		display: inline-block;
	}

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

	.Preparation-marker-text{
		margin-bottom: 5.5rem;
	}
	.Preparation-point-wrap{
		margin-bottom: 8.5rem;
	}

	.Preparation-block:not(:last-child){
		margin-bottom: 8.5rem;
	}

	/*----- 動画制作の用途/目的を明確に決めておく */
	.Preparation-use-wrap{
		flex-direction: column;
	}
	.Preparation-use{
		width: 100%;
		padding: 3.5rem 4rem;
	}
	.Preparation-use:not(:last-child){
		margin-bottom: 2.8rem;
	}
	.Preparation-use__header{
		margin-bottom: 3rem;
	}
	.Preparation-use__title{
		width: calc(100% - 13rem);
		font-size: 3.2rem;
		line-height: calc(4.5 / 3.2);
		letter-spacing: 0;
	}
	.Preparation-use__list-item{
		letter-spacing: 0;
		line-height: calc(5.4 / 2.8);
	}
	.Preparation-use__list-item::before{
		content: "・";
		line-height: calc(5.4 / 2.8);
	}

	.Preparation-use:nth-of-type(1) .Preparation-use__header::before{
		width: 9.9rem;
		height: 9.9rem;
	}
	.Preparation-use:nth-of-type(2) .Preparation-use__header::before{
		width: 9.9rem;
		height: 9.9rem;
	}

	/*----- ターゲット/ペルソナを設定する */
	.Preparation-target{
		padding: 3.5rem 4rem 4.2rem;
	}
	.Preparation-target__title{
		font-size: 3.2rem;
		margin-bottom: 2rem;
		letter-spacing: 0;
	}
	.Preparation-target__body{
		flex-direction: column;
		align-items: center;
	}
	.Preparation-target__image{
		margin-bottom: 4.2rem;
	}
	.Preparation-target__image img{
		height: auto;
	}
	.Preparation-target__content{
		width: 100%;
		padding-left: 0;
		flex-direction: column;
	}
	.Preparation-target__data-wrap{
		width: 100%;
	}
	.Preparation-target__data-wrap + .Preparation-target__data-wrap{
		margin-top: -1px;
	}
	.Preparation-target__data{
		padding-top: 2.6rem;
		padding-bottom: 2.4rem;
	}
	.Preparation-target__data-title{
		padding-left: 2.8rem;
		font-size: 2.6rem;
	}
	.Preparation-target__data-body{
		font-size: 2.6rem;
		line-height: 1;
		letter-spacing: 0;
	}

	.Preparation-target__data-wrap:nth-of-type(1) .Preparation-target__data-title{
		width: 17.5rem;
	}
	.Preparation-target__data-wrap:nth-of-type(1) .Preparation-target__data-body{
		width: calc(100% - 17.5rem);
	}
	.Preparation-target__data-wrap:nth-of-type(2) .Preparation-target__data-title{
		width: 17.5rem;
	}
	.Preparation-target__data-wrap:nth-of-type(2) .Preparation-target__data-body{
		width: calc(100% - 17.5rem);
	}

	/*----- ある程度、予算の上限を決めておく */
	.Preparation-limit-wrap{
		flex-direction: column;
	}
	.Preparation-limit{
		width: 100%;
		padding: 5rem 4.5rem;
	}
	.Preparation-limit:not(:first-child){
		margin-top: 2.8rem;
	}
	.Preparation-limit__title{
		height: 5.6rem;
		font-size: 2.8rem;
		letter-spacing: 0;
	}
	.Preparation-limit__list{
		padding-top: 3.8rem;
	}
	.Preparation-limit__list-item{
		font-size: 3.8rem;
	}
	.Preparation-limit__list-item.-step1{
		margin-bottom: 4rem;
	}
	.Preparation-limit__list-item.-step2{
		margin-bottom: 8.5rem;
	}
	.Preparation-limit__list-item.-step3{
		font-size: 3.2rem;
		display: inline-block;
	}
	.Preparation-limit__list-item.-step3::after{
		width: calc(100% + 2rem);
		margin-left: -1rem;
		margin-top: 1rem;
	}
	.Preparation-limit__list-arrow1{
		bottom: -2rem;
	}
	.Preparation-limit__list-arrow2{
		width: 3.7rem;
		height: 3rem;
		bottom: -3rem;
	}
	.Preparation-limit__text{
		margin-top: 3.5rem;
		line-height: calc(5.2 / 2.8); 
		font-size: 3.2rem;
		letter-spacing: 0;
		text-align: left;
	}

}



/*-------------------------------
	標準的な制作期間
-------------------------------*/

.Schedule-markser-text{
	margin-bottom: 1.8rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

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

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

	.Schedule-markser-text{
		margin-bottom: 6.5rem;
	}

}



/*-------------------------------
	動画制作の流れ
-------------------------------*/

.Step-block-wrap{
	margin-bottom: 4rem;
}
.Step-block{
	width: 100%;
	max-width: calc(13.2rem * 7);
	margin-bottom: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}
.Step-block__item{
	width: 13.2rem;
	position: relative;
}
.Step-block__item-title{
	width: 3.5rem;
	height: 39rem;
	font-size: 1.8rem;
	font-weight: 700;
	border: 1px solid #bbb;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.Step-block__item-time{
	width: 100%;
	padding-left: 3.5rem;
	line-height: calc(2.8 / 1.6);
	padding-top: .8rem;
	transform: translate(0,100%);
	font-weight: 500;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	/* right: calc(((9.6rem / 2) * -1) + .5em); */
	left: 0;
	top: 0;
	line-height: 1;
	height: 50%;
	display: flex;
    align-items: center;
    justify-content: flex-start;
}
.Step-block__text{
	font-weight: 700;
	line-height: calc(3.2 / 1.6);
}
.Step-block__item-arrow{
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateX(-100%);
	z-index: -1;
}
.Step-block__item-arrow::after{
	width: .6rem;
	height: .6rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

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

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

	.Step-marker-text{
		margin-bottom: 5rem;
	}
	.Step-block-wrap{
		margin-bottom: 8rem;
	}
	.Step-block{
		max-width: 100%;
		margin-bottom: 3.2rem;
		flex-direction: column;
	}
	.Step-block__item{
		width: 100%;
	}
	.Step-block__item:not(:last-child){
		padding-bottom: 12.8rem;
	}
	.Step-block__item-title{
		width: 100%;
		height: 6.7rem;
		font-size: 2.8rem;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Step-block__item-time{
		font-size: 2.6rem;
		padding-left: 0;
		line-height: 1;
		transform: translate(0,0);
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		height: 100%;
		padding-top: 6.7rem;
		padding-left: 21rem;
	}
	.Step-block__text{
		font-size: 2.6rem;
		line-height: calc(5.2 / 2.6);
	}
	.Step-block__item-arrow{
		width: 12.8rem;
		transform: translateX(-50%) rotate(90deg);
		left: 50%;
		top: -6.7rem;
	}
	.Step-block__item-arrow::after{
		width: 1rem;
		height: 1rem;
	}

}