@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//カラー指定
$color-red: #d9221f;

.title{
	font-size: 1.4rem;
	font-size: 14px;
	font-weight: bold;
	line-height: 2em;
	letter-spacing: 0.1em;
	span{
		display: block;
		font-size: 3rem;
		font-size: 30px;
		letter-spacing: 0.13em;
	}
}
.desc{
	h3{
		font-size: 2.5rem;
		font-size: 25px;
		font-weight: 600;
		margin-bottom: 3rem;
		line-height: 1.5em;
		@include md{
			font-size: 2.2rem;
			font-size: 22px;
			margin-bottom: 2rem;
		}
		@include xs{
			font-size: 2rem;
			font-size: 20px;
			margin-bottom: 1rem;
		}
	}
}

.blackzone{
	background: #1a1a1a;
	color: #fff;
}

#heroimg{
	.video-wrapper {
		position: relative;
		height: 90vh;
		width: 100%;
		video {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			object-fit: cover;
			-o-object-position: right;
			object-position: right;
		}
		.catch-container{
			width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			.main-catch {
				margin-bottom: 2rem;
				@include xs{margin-bottom: 1.5rem;}
				p{padding: 0 1rem 1rem 2rem;}
			}
			.sub-catch p{
				font-size: 20px;
				font-size: 2rem;
				padding: 1rem;
				@include xs{
					font-size: 16px;
					font-size: 1.6rem;
					padding: 0.75rem;
					line-height: 2.75em;
				}
			}
			
			.text-background {
				display: inline;
				font-size: 60px;
				font-size: 6rem;
				font-weight: 700;
				letter-spacing: 0.15em;
				color: #fff;
				background: linear-gradient(transparent 0%, #000 0%);
				-webkit-box-decoration-break: clone;
				box-decoration-break: clone;
				@include xs{
					font-size: 40px;
					font-size: 4rem;	
				}
			}
		}
		&::after{
			position: absolute;
			content: "";
			bottom: 0;
			left: 0;
			height: 100px;
			width: 100%;
			background-image: linear-gradient(0deg, rgba(26, 26, 26, 1), rgba(26, 26, 26, 0));
		}
	}
}

//MonoProとは？-----------------------------------------------------------------ここから
#about{
	margin-bottom: 30rem;
	@include xs{margin-bottom: 15rem;}
	.back-gray{
		width: 100%;
		margin-bottom: 15rem;
		position: relative;
		@include xs{margin-bottom: 10rem;}
		&::before {
			content: '';
			position: absolute;
			bottom: 60px;
			left: 0;
			right: 0;
			height: 300px;
			background-color: #333;
			transform: skewY(-15deg);
			z-index: 0;
			@include sm{top: 60px;}
		}
		.container{
			position: relative;
			z-index: 99;
			.title{margin-bottom: 5rem;}
			.flex-container{
				margin-bottom: 6rem;
				@include sm{
					display: block;
				}
				.column{
					width: 48%;
					@include sm{width: 100%;}
					img{width: 100%;}
					.title{
						margin-bottom: 2rem;
						span{color: $color-red;}
					}
					dl{@include sm{margin-bottom: 4rem;}
						dd{
							text-align: justify;
							span{
								font-size: 20px;
								font-size: 2rem;
								font-weight: 600;
							}
						}
					}
				}
				.column-outside-left{
					flex: 1;
					margin-left: calc(50% - 50vw);
					margin-right: 4%;
					@include sm{margin: 0;}
				}
				.column-outside-right{
					flex: 1;
					margin-right: calc(50% - 50vw);
					margin-left: 4%;
					@include md{margin-right: calc(50% - 60vw);}
					@include sm{margin: 0;}
				}
				@include sm{
					.order-1{order: 1;}
					.order-2{order: 2;}
				}
			}
		}
	}
	#philosophy,#award{
		margin-bottom: 12rem;
		@include xs{margin-bottom: 8rem;}
		dt{
			font-weight: 500;
			margin-bottom: 1rem;
		}
		dd{
			position: relative;
			&::before{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-family: "Kumbh Sans", sans-serif;
				font-weight: 800;
				font-size: 10rem;
				font-size: 100px;
				color: #fff;
				opacity: 0.1;
				width: 100%;
				@include sm{
					font-size: 8rem;
					font-size: 80px;
				}
				@include xs{
					font-size: 5.2rem;
					font-size: 52px;
				}
			}
		}
	}
	#philosophy{
		text-align: center;
		dd{
			font-size: 3rem;
			font-size: 30px;
			font-weight: 600;
			letter-spacing: 0.2em;
			&::before{content: "PHILOSOPHY";}
			@include xs{
				letter-spacing: 0.1em;
				line-height: 1.5em;
			}
		}
	}
	#award{
		text-align: center;
		dd{
			display: flex;
			justify-content: center;
			gap: 2rem;
			@include xs{
				flex-direction: column;
				align-items: center;
			}
			img{
				width: 200px;
				height: auto;
			}
			&::before{
				content: "AWARD HISTORY";
				line-height: 1em;
			}
		}
	}
}

//SAS-----------------------------------------------------------------ここから
#sas{
	position: relative;
	&::before{
		position: absolute;
		content: "";
		background-size: contain;
		background-repeat: no-repeat;
		width: 1000px;
		height: 900px;
		left: -40rem;
    	top: -10rem;
		background-image: url("../img/backdeco-l.png") ;
		@include sm{
			width: 800px;
			left: -37rem;
		}
		@include xs{
			width: 700px;
			left: -35rem;
		}
	}
	.sas-title{
		letter-spacing: 0.1em;
   		line-height: 5rem;
		margin-bottom: 3rem;
		h2{
			font-size: 14px;
			font-size: 1.4rem;
			font-weight: 500;
		}
		p{
			font-size: 50px;
			font-size: 5rem;
			@include xs{
				font-size: 45px;
				font-size: 4.5rem;
				line-height: 1em;
			}
			span{color: $color-red;}
		}
	}
	.flex-container{
		gap: 5rem;
		@include sm{
			flex-direction: column;
		}
		.desc{
			width: 40%;
			text-align: justify;
			@include sm{
				width: 100%;
				margin-bottom: 6rem;
			}
		}
		.sas-img{
			width: 60%;
			text-align: center;
			position: relative;
			top: -7rem;
			@include sm{width: 100%;}
			@include xs{
				width: 75%;
				display: block;
				margin: 0 auto;
			}
			img{max-width: 600px;}
		}
	}
}


//MonoGress-----------------------------------------------------------------ここから
#monogress{
	margin-bottom: 7rem;
	position: relative;
	&::before{
		position: absolute;
		content: "";
		background-size: contain;
		background-repeat: no-repeat;
		width: 1000px;
		height: 900px;
		right: -40rem;
    	bottom: 10rem;
		background-image: url("../img/backdeco-r.png") ;
		@include sm{
			width: 800px;
			right: -37rem;
		}
		@include xs{
			width: 700px;
			right: -35rem;
		}
	}
	.container{
		background: #333333;
		padding: 5rem 6rem;
		position: relative;
		z-index: 1;
		@include sm{padding: 4rem;}
	}
	.monogress-lead{
		margin-bottom: 10rem;
		gap: 7rem;
		@include sm{
			flex-direction: column;
			gap: 3rem;
		}
		.monogress-title{
			h2{
				font-size: 1.4rem;
				font-size: 14px;
				margin-bottom: 1rem;
			}
			img{
				width: 320px;
				@include md{width: 280px;}
				@include sm{width: 260px;}
				@include xs{width: 240px;}
			}
		}
		.desc{
			width: 100%;
			text-align: justify;
			position: relative;
			&::before{
				position: absolute;
				content: "";
				background-size: contain;
				background-repeat: no-repeat;
				width: 150px;
				height: 200px;
				right: 0;
				bottom: 0;
				background-image: url("../img/monogress-mark.svg") ;
				@include sm{
					width: 120px;
					height: 170px;
					bottom: 6rem;
				}
				@include xs{
					width: 100px;
					bottom: 10rem;
				}
			}
		}
	}
	.keywords{
		border: 1px solid #fff;
		padding: 2rem 6rem;
		margin-bottom: 5rem;
		position: relative;
		@include sm{
			border: none;
			padding: 0;
		}
		.title{
			text-align: center;
			line-height: 2.5em;
			width: 40%;
			margin: 0 auto;
			background: #333333;
			position: absolute;
			top: -5rem;
			right: 0;
			left: 0;
			@include lg{width: 50%;}
			@include md{
				width: 53%;
				line-height: 2em;
			}
			@include sm{width: 100%;}
			span{
				font-size: 4rem;
				font-size: 40px;
				color: $color-red;
				@include md{
					font-size: 3.2rem;
					font-size: 32px;
				}
			}
		}
		.keyword-box{
			align-items: center;
			padding: 4rem 0;
			position: relative;
			gap: 2rem;
			@include sm{padding: 3.5rem 0;}
			@include xs{flex-direction: column;}
			dl{@include xs{flex-direction: column;}}
			&:not(:last-child) {
				border-bottom: 1px solid #fff;
			}
			&::before{
					position: absolute;
					content: "";
					background-size: contain;
					background-repeat: no-repeat;
					width: 120px;
					height: 75px;
					right: 0;
					top: 3rem;
					@include md{
						height: 60px;
						width: 90px;
					}
					@include xs{
						left: 0;
						height: 60px;
						top: 4rem;
					}
				}
			&:nth-of-type(1)::before{background-image: url("../img/01.svg") ;}
			&:nth-of-type(2)::before{background-image: url("../img/02.svg") ;}
			&:nth-of-type(3)::before{background-image: url("../img/03.svg") ;}
		}
		.keyword-img{
			width: 23%;
			text-align: center;
			@include sm{width: 25%;}
			@include xs{width: 40%;}
			img{
				width: auto;
				height: 100px;
			}
		}
		dl{
			width: 80%;
			margin: 0;
			align-items: center;
			z-index: 1;
			gap: 2rem;
			@include sm{width: 75%;}
			@include xs{
				width: 90%;
				gap: 1rem;
			}
			dt{
				width: 30%;
				font-size: 5rem;
				font-size: 50px;
				line-height: 0.6em;
				letter-spacing: 0.05em;
				@include lg{
					font-size: 4.5rem;
					font-size: 45px;
				}
				@include md{
					width: 40%;
					font-size: 4rem;
					font-size: 40px;
				}
				@include sm{
					width: 45%;
					font-size: 3.4rem;
					font-size: 34px;
				}
				@include xs{
					width: 100%;
					text-align: center;
				}
				span{
					font-size: 2rem;
					font-size: 20px;
					color: $color-red;
					@include md{
						font-size: 1.8rem;
						font-size: 18px;
					}
					@include sm{
						font-size: 1.6rem;
						font-size: 16px;
					}
				}
			}
			dd{
				width: 70%;
				margin: 0;
				text-align: justify;
				@include xs{width: 100%;}
			}

		}
		
	}
	.merit{
		ul{
			list-style: none;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 0rem;
			@include lg{gap: 4rem;}
			@include sm{grid-template-columns: 1fr 1fr;}
			@include xs{
				gap: 2rem;
				grid-template-columns: 1fr;
			}
			li{
				flex: 1;
				h4{
					text-align: center;
					font-size: 21px;
					font-size: 2.1rem;
					line-height: 1.5em;
					margin-bottom: 2rem;
					@include xs{
						font-size: 18px;
						font-size: 1.8rem;
						margin-bottom: 1rem;
					}
					span{
						display: block;
						font-size: 16px;
						font-size: 1.6rem;
						color: $color-red;
					}
				}
				p{
					text-align: center;
					@include  lg{text-align: justify;}
				}
			}
		}
	}
}

//改善事例-----------------------------------------------------------------ここから
#improvement{
	margin-bottom: 10rem;
	position: relative;
	&::before{
		position: absolute;
		content: "";
		background-size: contain;
		background-repeat: no-repeat;
		width: 1000px;
		height: 900px;
		left: -40rem;
    	bottom: -10rem;
		background-image: url("../img/backdeco-l.png") ;
		@include sm{
			width: 800px;
			left: -37rem;
		}
		@include xs{
			width: 700px;
			left: -35rem;
			top: -10rem;
		}
	}
	.container{
		position: relative;
		.title{
			span{color: $color-red;}
		}
		.flex-container{
			@include sm{
				flex-direction: column;
			}
		}
		.improve-main{
			justify-content: space-between;
			margin-bottom: 7rem;
			gap: 70px;
			@include sm{gap: 0;}
			.desc{
				width: 50%;
				padding-top: 4rem;
				text-align: justify;
				@include sm{
					padding-top: 1rem;
					width: 100%;
					margin-bottom: 4rem;
				}
			}
			.improve-1-img{
				width: 50%;
				text-align: center;
				@include sm{width: 100%;}
			}
			img{
				width: 310px;
				height: auto;
				@include md{width: 250px;}
				@include sm{
					width: 230px;
					display: block;
					margin: 0 auto;
				}
			}
		}
		.improve-sub{
			display: grid;
			grid-template-columns:repeat(2,1fr);
			gap: 70px;
			@include sm{gap: 40px;}
			@include xs{
				grid-template-columns:repeat(1,1fr);
				gap: 30px;
			}
			img{
				width: 330px;
				height: auto;
				@include md{width: 250px;}
				@include sm{width: 230px;}

			}
			dl{
				text-align: center;
				dt{
					border: 1px solid #fff;
					border-radius: 100px;
					margin-bottom: 2rem;
				}
			}
		}
	}
}

//動画-----------------------------------------------------------------ここから
#movie{
	margin-bottom: 10rem;
	.title{
		margin-bottom: 3rem;
		@include xs{margin-bottom: 2rem;}
		span{color: $color-red;}
	}
	iframe[src*="youtube.com"],
	iframe[src*="youtube-nocookie.com"] {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
}

//今こそ進化を-----------------------------------------------------------------ここから
#now{
	padding-bottom: 10rem;
	margin-bottom: 8rem;
	text-align: center;
	@include xs{
		margin-bottom: 5rem;
	}
	.title{
		margin-bottom: 3rem;
		span{color: $color-red;}
	}
	dl{
		dt{
			font-size: 3rem;
			font-size: 30px;
			font-family: "Zen Old Mincho", serif;
			font-weight: 400;
			letter-spacing: 0.1em;
			line-height: normal;
			margin-bottom: 3rem;
			@include xs{
				font-size: 2.4rem;
				font-size: 24px;
			}
		}
		dd{
			span{
			font-size: 1.9rem;
			font-size: 19px;
			}
		}
	}
}

//ご依頼の流れ-----------------------------------------------------------------ここから
#flow{
	margin-bottom: 8rem;
	@include xs{margin-bottom: 5rem;}
	.title{
		margin-bottom: 5rem;
		@include xs{margin-bottom: 3rem;}
	}
	.flow_design {
	  display: flex;
	  justify-content: left;
	  align-items: center;
	}
	.flow {
	  padding-left: 0;
	}
	.flow > li {
	  list-style-type: none;
	  position: relative;
	  padding-left: 100px;
		@include xs{padding-left: 90px}
	}
	.flow > li:not(:last-child) {
	  padding-bottom: 30px;
	}
	.flow > li .icon {
	  width: 80px;
	  height: 80px;
	  line-height: 77px;
	  text-align: center;
	  border-radius: 100vh;
		border: 1px solid #8d8d8d;
	  display: inline-block;
	  background: #fff;
	  color: #8d8d8d;
	  position: absolute;
	  left: 0;
		@include xs{
			width: 75px;
			height: 75px;
			line-height: 73px;
		}
	}
	.flow > li:not(:last-child)::before {
	  content: '';
	  background: #8d8d8d;
	  width: 1px;
	  height: 100%;
	  position: absolute;
	  top: calc(50% - -30px);
	  left: 40px;
	  transform: translateY(-50%);
	  -webkit-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
	}
	.flow > li dl dt {
	  font-size: 20px;
	  font-size: 2rem;
	  font-weight: 600;
		letter-spacing: 0.05em;
		span{
			font-size: 25px;
			font-size: 2.5rem;
		}
	}
	.flow > li dl dd {
	  margin-left: 0;
	}
}

//よくあるご質問-----------------------------------------------------------------ここから
#faq{
	padding: 8rem 0;
	margin-bottom: 8rem;
	background: #efefef;
	@include sm{
		padding: 5rem 0;
		margin-bottom: 5rem;
	}
	#accordion-container{
		.title{
			margin-bottom: 5rem;
			@include sm{margin-bottom: 2rem;}
		}
		.accordion {
			.accordion-item{
				margin-bottom: 1.5rem;
				border: none;
				border-radius: inherit;
				padding: 1rem 2rem;
				box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
				//accordion-button　ボタン----ここから
				.accordion-button{
					background-color: #fff;
					font-size: 16px;
					font-size: 1.6rem;
					font-weight: 600;
					padding: 1rem;
					transition: 0.1s;
					span{
						color: #a7a7a7;
						margin-right: 2rem;
					}
					&:hover{
						color: #aaa;
					}
					&:focus{
						border-color:inherit;
						box-shadow:none;
					}
					&::after {
						flex-shrink: 0;
						margin-left: auto;
						font-family: "Font Awesome 5 Free";
						content: "\f13a";
						color: #a7a7a7;
						font-weight: 900;
						font-size: 23px;
						font-size: 2.3rem;
						width: 23px;
						height: 27px;
						background-image: none;
					}
					&:not(.collapsed){
						color: #333;
					}
				}
				//accordion-button　ボタン----ここまで
				//accordion-body　折りたたみ中身----ここから
				.accordion-body{
					dl{
						padding: 2.5rem 2rem 1.5rem;
							@include sm {
								padding: 1.5rem 2rem 0.5rem;
							}
						dd{
							padding-left: 2rem;
							display: flex;
							flex-direction: column;
							margin-bottom: 0;
							@include sm {
								padding: 1.5rem 0 0;
							}
							p{
								text-align: justify;
								@include sm {
									padding-bottom: 0.5rem;
								}
							}
						}
					}
				}
				//accordion-body　折りたたみ中身----ここまで
			}
		}
	}
}

//料金プラン-----------------------------------------------------------------ここから
#plan{
	margin-bottom: 15rem;
	@include sm{margin-bottom: 10rem;}
	.title{
		margin-bottom: 3rem;
		@include sm{margin-bottom: 2rem;}
	}
	.plan-container{
		display: grid;
		grid-template-columns:repeat(2,1fr);
		gap: 30px;
		@include sm{gap: 20px;}
		@include xs{
			grid-template-columns:repeat(1,1fr);
			gap: 10px;
		}
		dl{
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
			dt{
				text-align: center;
				font-size: 20px;
				font-size: 2rem;
				background-image: linear-gradient(150deg, rgba(178, 27, 31, 1), rgba(98, 0, 0, 1));
				color: #fff;
				@include sm{
					font-size: 16px;
					font-size: 1.6rem;
				}
				span{
					font-size: 40px;
					font-size: 4rem;
					@include sm{
						font-size: 30px;
						font-size: 3rem;
					}
				}
			}
			dd{
				padding: 3rem;
				@include sm{padding: 2rem;}
			}
		}
	}
}

//WEBカタログとお問い合わせ-----------------------------------------------------------------ここから
#banner{
	margin-bottom: 8rem;
	@include xs{margin-bottom: 5rem;}
	.flex-container{
		justify-content: center;
		gap: 50px;
		margin-bottom: 5rem;
		@include sm{
			gap: 20px;
		}
		@include xs{
			flex-direction: column;
			gap: 30px;
		}
		.banner{
			text-align: center;
			p{
				font-weight: 600;
				@include xs{margin-bottom: 0.5rem;}
			}
		}
	}
	a.link {
		font-size: 2rem;
		font-size: 20px;
		position: relative;
		display: inline-block;
		padding: 1rem 4rem;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-transition: all 0.3s;
		vertical-align: middle;
		text-decoration: none;
		letter-spacing: 0.1em;
		@include xs{
			font-size: 1.8rem;
			font-size: 18px;
		}
	}
	a.link-flat{
		width: 300px;
		overflow: hidden;
		padding: 1.5rem 2rem;
		text-align: left;
		color: #333;
		background: #fff;
		border: 1px solid #333;
		position: relative;
		@include sm{width: 250px;}
		@include xs{padding: 1rem 2rem;}
		&::after {
			content: '';
			font-family: "Font Awesome 5 Free";
			content: "\f054";
			font-weight: 900;
			padding-right: 5px;
			color: #333;
			position: absolute;
			right: 10px;
			-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}
		&:hover {
			background: #333;
			color: #fff;
			&::after {
				right: 3px;
				color: #fff;
			}
		}
		span {
			position: relative;
		}
	}
}

//フッター-----------------------------------------------------------------ここから