@charset "utf-8";
/*-----ファーストビュー sp-----*/
.first_view{
	padding-top: 60px;
	
	h1{
		position: relative;
		width: min(88%,1620px);
		margin: 0 auto;
		font-size: var(--font-size46);
		letter-spacing: .06em;
		
		&::after{
			position: absolute;
			content: '';
			display: inline-block;
			width: 5%;
			bottom: 50%;
			left: -7%;
			border-bottom: solid 1px #000;
		}
	}
	h2{
		width: min(88%,1620px);
		margin: var(--px100) auto 0;
		font-size: var(--font-size36);
	}

}
/*-----導入事例 sp-----*/
.case{

  .case_inner{
    width: 90%;
    margin: 0 auto;
    padding-top: var(--px50);
	  padding-bottom: var(--px100);

	.grid_wrap{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(2, auto);
		grid-gap: 34px;
		padding-top: var(--px80);
		padding-bottom: var(--px40);

		.g_item{
			width: min(90%,480px);
			border: 2px solid #000;
			border-radius: var(--px20);
			margin: 0 auto;

			.g_img{
				padding: 5px;
				
				img{
					border-radius: var(--px10);
				}				
			}
			h2{
				padding: var(--px10) var(--px30) 0 var(--px30);
				font-size: var(--font-size24);
			}
			p{
				padding: var(--px10) var(--px30) 0 var(--px30);
				font-size: var(--font-size18);
			}
			
			.btn{
				width: min(90%,200px);
				margin: var(--px40) auto var(--px30);
				font-weight: var(--Medium);

				a{
					display: block;
					color: #fff;
					padding: 3px 10px;
					text-align: center;
					position: relative;
					background-color: #333;
					border-radius: 50px;
					border: 1px solid #333;
					transition: .5s;

					&::after {
						content: '';
						position: absolute;
						top: 50%;
						right: 15px;  /*位置調整*/
						transform: translateY(-50%);

						width: 0;
						height: 0;

						border-top: 6px solid transparent;
						border-bottom: 6px solid transparent;
						border-left: 8px solid #fff;  /*← これで右向き三角*/
					  }
					&:hover{
						color: #333;
						background-color: #fff;
						transition: .5s;

						&::after{
							border-left: 8px solid #333;
						}
					}
				}

			}
		}
	}
	  
  }
}

@media (min-width:768px){
/*-----ファーストビュー tab-----*/
.first_view{
	padding-top: clamp(140px,15vw,190px) ;
}
/*-----導入事例 tab-----*/
.case{

  .case_inner{	
	  width: min(96%,1500px);

	.grid_wrap{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		
		.g_item{
			width: min(100%,480px);
			display: flex;
			flex-flow: column;
			
			h2{
				padding: var(--px10) 25px 0 25px;
			}
			p{
				padding: var(--px10) 25px 0 25px;
			}
			
			.btn{
				margin: auto auto var(--px30);
				padding-top: var(--px40);
			}
		}
	}
  }
}
	
}
@media (min-width:1024px){
/*-----ファーストビュー pc-----*/
.first_view{
	
	h1{
		
		&::after{
			border-bottom: solid 2px #000;
		}
	}
}
/*-----導入事例 pc-----*/
.case{

  .case_inner{	

	.grid_wrap{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, auto);
		.g_item{
			border: 5px solid #000;
		}
	}
  }
}


}

@media (min-width:1280px){
.case{

	.case_inner{	
		width: min(90%,1500px);
	}
}
	
	
}

@media (min-width:1560px){

@media (min-width:1870px){ 
.first_view{
	
	h1{
		
		&::after{
			width: calc((100vw - 1620px - 1.5em) / 2);
			left: calc((1620px - 100vw) / 2);
		}
	}
}
  
}