@charset "UTF-8";

/*-------------------------------------------
CSS
-------------------------------------------*/
	/*-------------------------------------------
	ALL
	-------------------------------------------*/

	#green {
		color: #3cb371;
		font-weight: bold;
	}

	.oclp-wrap {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		padding: 100px 20px;
	}

	.oclp-wrap-inline {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}

	.oclp-wrap-form {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}


	.site-header-nav2 {
		height: 0;
	}

	.main-navigation ul {
		display: none;
	}

	.contact_area_button {
		right: -100%;
	}


	#oclp-merit h2,
	#oclp-movie h2,
	#oclp-insight h2,
	#oclp-faq h2,
	#oclp-dl h2,
	.oclp-sol-heading,
	.oclp-lineup-heading,
	.oclp-dl-heading {
		padding-bottom: 50px;
		text-align: center;
		font-size: 1.8rem;
		font-weight: bold;
		white-space: pre-line;
	}

	@media (width <=521px) {

		#oclp-merit h2,
		#oclp-movie h2,
		#oclp-insight h2,
		#oclp-faq h2,
		#oclp-dl h2,
		.oclp-sol-heading,
		.oclp-lineup-heading,
		.oclp-dl-heading {
			font-size: 1.3rem;
		}

		.oclp-wrap {
			padding: 50px 20px;
		}
	}

	/*-------------------------------------------
	ファーストビュー
	-------------------------------------------*/
	#oclp-fv {
		background: linear-gradient(to 方向, 開始の色, 終了の色);
	}

	/* ここから */
	.oclp-mv {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}

	/* 全体を囲う要素 */
	.oclp-mv-wrap {
		position: relative;
		/* 背景画像の高さ */
		height: 70vh;
	}

	#oclp-mv-video {
		display: block;
		width: 100%;
		/* 背景画像の高さ */
		height: 70vh;
		/* 高さを維持したまま全体を表示させる */
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
	}

	.oclp-mv-bg {
		display: block;
		width: 100%;
		/* 背景画像の高さ */
		height: 70vh;
		position: absolute;
		top: 0;
		left: 0;
		/* 薄いレイヤーの色 */
		background: rgba(0, 0, 0, 0.3);
		/* videoの上に乗せる */
		z-index: 2;
	}

	.oclp-mv-txtbox {
		color: #fff;
		font-size: 3rem;
		font-weight: bold;
		height: fit-content;
		position: absolute;
		top: 0;
		bottom: 10%;
		left: 20%;
		right: 0;
		margin: auto;
		text-align: left;
		white-space: pre-line;
		/* レイヤー背景の上に乗せる */
		z-index: 3;
	}

	.oclp-mv-title {
		font-size: 4.0rem;
		font-weight: bold !important;
	}

	.oclp-mv-txt {
		font-size: 2.0rem;
		font-weight: bold !important;
	}

	@media (width <=521px) {

		.oclp-mv-txtbox {
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
		}

		.oclp-mv-title {
			font-size: 2.0rem;
			text-align: center;
		}

		.oclp-mv-txt {
			font-size: 1.5rem;
		}
	}

  /*-------------------------------------------
	お悩み
	-------------------------------------------*/

	#oclp-nayami {
		background: linear-gradient(#C5C5C5, #eee, #C5C5C5);
		padding: 100px 20px;
	}

	.oclp-nayami-heading {
		text-align: center;
		font-size: 1.8rem;
		font-weight: bold;
	}

	.oclp-nayami-inline {
		display: grid;
		gap: 50px;
		grid-template-columns: repeat(auto-fit, minmax(250px, 0));
		justify-content: center;
	}

	@media (width <=821px) {
		.oclp-nayami-inline {
			grid-template-columns: repeat(auto-fit, minmax(200px, 0));
		}
	}

	@media (width <=521px) {
		#oclp-nayami {
			padding: 50px 20px;
		}

		.oclp-nayami-heading {
			font-size: 1.2rem;
		}

		.oclp-nayami-inline {
			gap: 0;
			grid-template-columns: repeat(auto-fit, minmax(250px, 0));
		}
	}

	.oclp-nayami-item {
		/*border-radius: 10px;*/
		padding: 10px;
		text-align: center;
		/*font-weight: bold;*/
		box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0);
	}

	.oclp-nayami-item img {
		margin-bottom: 1rem;
	}

	.oclp-nayami-item__title {
		font-size: 1.3rem;
		font-weight: bold;
	}

	.oclp-nayami-item__txt {
		font-size: 1.0rem;
		text-align: left;
	}

  /*-------------------------------------------
	解決方法
	-------------------------------------------*/

	#oclp-sol {
		background: linear-gradient(to 方向, 開始の色, 終了の色);
	}

	.oclp-sol-inline {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.oclp-sol-heading {
		font-size: 1.8rem;
	}

	.oclp-sol-outline {
		display: grid;
		gap: 50px;
		grid-template-columns: repeat(auto-fit, minmax(400px, 0));
		justify-content: center;
		align-items: center;
		margin-bottom: 100px;
	}

	.oclp-sol-outline img {
		width: 100%;
	}

	.oclp-sol-outline__title {
		font-size: 1.2rem;
		font-weight: bold;
	}

	.oclp-sol-outline__txt {
		font-size: 1.0rem;
		text-align: left;
	}

	.oclp-sol-comparison {
		display: grid;
		gap: 50px;
		grid-template-columns: repeat(auto-fit, minmax(400px, 0));
		justify-content: center;
		align-items: center;
		font-weight: bold;
	}

	.oclp-sol-comparison__item img {
		margin-bottom: 20px;
	}

	.oclp-sol-comparison__item {
		font-size: 1.2rem;
	}

	@media (width <=821px) {

		.oclp-sol-comparison {
			grid-template-columns: repeat(auto-fit, minmax(300px, 0));
		}
	}

	@media (width <=521px) {

		.oclp-sol-outline,
		.oclp-sol-comparison {
			grid-template-columns: repeat(auto-fit, minmax(300px, 0));
		}
	}

  /*-------------------------------------------
	揺動切削のメリット
	-------------------------------------------*/

	#oclp-merit {
		padding-top: 100px;
		padding-bottom: 100px;
		background-position: center;
		background-repeat: no-repeat;
	}

	.oclp-merit-block {
		background: #fff;
		max-width: 1000px;
		margin: 0 auto;
		padding: 50px 0 0;
	}

	.oclp-merit-inline {
		display: grid;
		gap: 50px;
		grid-template-columns: repeat(auto-fit, minmax(400px, 0));
		justify-content: center;
		padding-bottom: 50px
	}

	.oclp-merit-inline img {
		margin-bottom: 20px;
		width: 100%;
		max-height: 200px;
		object-fit: cover;
	}

	.oclp-merit-item {
		/*border-radius: 10px;*/
		background: linear-gradient(#000, #545454);
		padding: 20px;
		text-align: center;
		/*font-weight: bold;*/
		box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0);
		color: #fff;
	}

	.oclp-merit-item__title {
		font-size: 1.1rem;
		font-weight: bold;
	}

	.oclp-merit-item__txt {
		text-align: left;
	}

	@media (width <=821px) {
		.oclp-merit-block {
			margin: 0 20px;
		}

		.oclp-merit-inline {
			grid-template-columns: repeat(auto-fit, minmax(350px, 0));
			gap: 20px;
		}
	}

	@media (width <=521px) {

		#oclp-merit {
			background-repeat: repeat;
		}

		.oclp-merit-inline {
			grid-template-columns: repeat(auto-fit, minmax(300px, 0));
			gap: 20px;
		}
	}

  /*-------------------------------------------
	関連動画
	-------------------------------------------*/

	#oclp-movie {
		background: #eee;
		margin-top: 100px;
		padding-top: 50px;
	}

	.oclp-movie-inline {
		display: flex;
		align-items: center;
	}

	.oclp-movie__thum {
		margin-bottom: 30px;
	}

	.oclp-movie__thum ul {
		display: flex;
		justify-content: space-evenly;
	}

	.oclp-movie__thum li {
		width: calc(80% / 2);
		text-align: center;
	}

	.oclp-movie__title {
		font-weight: bold;
		padding-top: 20px;
		white-space: pre-line;
	}

	@media (width <=521px) {

		#oclp-movie {
			margin-top: 0;
		}

		.modal-content video {
			width: 300px;
		}
	}

  /*-------------------------------------------
	現場にもたらす効果
	-------------------------------------------*/

	#oclp-insight {
		background: linear-gradient(#157C3A, #1BA14C, #157C3A);
		padding: 100px 20px;
		color: #fff;
	}

	.oclp-insight-inline {
		display: grid;
		gap: 50px;
		grid-template-columns: repeat(auto-fit, minmax(250px, 0));
		justify-content: center;
	}

	.oclp-insight-item {
		padding: 20px;
		text-align: center;
	}

	.oclp-insight-item img {
		margin-bottom: 20px;
	}

	.oclp-insight-title {
		font-size: 1.3rem;
		font-weight: bold;
	}

	.oclp-insight-txt {
		text-align: left;
	}

	@media (width <=821px) {

		.oclp-insight-inline {
			grid-template-columns: repeat(auto-fit, minmax(200px, 0));
		}
	}

	@media (width <=521px) {

		.oclp-insight-inline {
			gap: 20px;
			grid-template-columns: repeat(auto-fit, minmax(250px, 0));
		}
	}

  /*-------------------------------------------
	対応機種
	-------------------------------------------*/

	#oclp-lineup {
		background: linear-gradient(to 方向, 開始の色, 終了の色);
	}

	.oclp-lineup-inline {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.oclp-lineup-inline img {
		width: 100%;
	}

	.oclp-lineup__txt {
		white-space: pre-line;
		text-align: left;
	}

  /*-------------------------------------------
	よくあるご質問
	-------------------------------------------*/

	#oclp-faq {
		background: #eee;
		padding-top: 100px;
		padding-bottom: 100px;
	}

	#question {
		color: #1BA14C;
		font-weight: bold;
	}

	#anser {
		color: #000;
		font-weight: bold;
	}

	.oclp-faq-inline {
		display: grid;
		gap: 50px;
		grid-template-columns: repeat(auto-fit, minmax(400px, 0));
		justify-content: center;
		max-width: 1000px;
		margin: 0 auto;
	}

	.oclp-faq-item {
		padding: 30px;
		background-color: white;
		border-radius: 20px;
		box-shadow: 0 0 14px rgb(0 0 0 / 10%);
		min-height: 270px;
	}

	.oclp-faq-item__q {
		font-size: 1.2rem;
		font-weight: bold;
	}

	.oclp-faq-item__a {}

	@media (width <=821px) {

		.oclp-faq-inline {
			grid-template-columns: repeat(auto-fit, minmax(300px, 0));
		}
	}

	@media (width <=521px) {

		.oclp-faq-inline {
			grid-template-columns: repeat(auto-fit, minmax(300px, 0));
		}
	}

  /*-------------------------------------------
	ダウンロードフォーム
	-------------------------------------------*/

	#oclp-dl,
	#oclp-dl-form {
		padding: 100px 20px;
	}

	.oclp-dl-inline {
		text-align: center;
	}

	.oclp-dl-btn {
		background: linear-gradient(#157C3A, #1BA14C, #157C3A);
		color: #fff;
		border-radius: 10px;
		padding: 20px 100px;
		max-width: 400px;
		width: 100%;
		text-align: center;
		margin: 0 auto;
		font-size: 1.1rem;
		font-weight: bold;
	}

	.oclp-dl-btn:hover {
		opacity: 0.7;
		cursor: pointer;
		color: #fff !important;
	}

	@media (width <=521px) {

		.oclp-dl-btn {
			padding: 20px 50px;
		}
	}

  /*-------------------------------------------
	JavaScript
	-------------------------------------------*/

	.js-fade-under-order,
	.js-fade-under,
	.js-fade-left,
	.js-fade-right {
		opacity: 0;
		visibility: hidden;
		/*transition: opacity 1s, visibility 1s, transform 1s;*/
		transition: all 1s;
	}

	.js-fade-under-order,
	.js-fade-under {
		transform: translateY(50px);
	}

	.js-fade-left {
		transform: translateX(-80px);
		transition: all 1.5s;
	}

	.js-fade-right {
		transform: translateX(80px);
		transition: all 1.5s;
	}

	.scroll {
		opacity: 1;
		visibility: visible;
		transform: translateY(0px);
	}

	/*-------------------------------------------
	モーダルウインドウ
	-------------------------------------------*/

	/* モーダルを開くボタン */
	.oclp-movie__modal--trigger:hover {
		opacity: 0.7;
		cursor: pointer;
	}

	.oclp-movie__modal--trigger:nth-child(n + 2) {}

	/* モーダル本体 */
	.modal-wrap {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
	}

	.modal-layer {
		height: 100%;
		background: rgba(50, 50, 50, .85);
		cursor: pointer;
	}

	.modal-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: min(calc(100% - 40px), 1000px);
		background: transparent;
	}

	.modal-inner {
		position: relative;
		height: 100%;
		padding: 80px 20px 20px;
	}

	/* モーダルを閉じるボタン */
	.modal-close {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 44px;
		height: 44px;
		background: rgba(50, 50, 50, 1);
		cursor: pointer;
		transition: opacity .6s;
	}

	.modal-close:hover {
		opacity: .6;
	}

	.modal-close:before,
	.modal-close:after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 1px;
		background: #fff;
		content: '';
	}

	.modal-close:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.modal-close:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* モーダル内のコンテンツ */
	.modal-text {
		text-align: center;
	}