@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;
		}
	}
	.main_photo{
		width: min(90%,1480px);
		margin: var(--px20) auto 0;
		border-radius: var(--px40);
		text-align: center;
		
		img{
			border-radius: var(--px40);
		}
	}
}
/*-----サブメニュー sp-----*/ 
.sub_link{
	width: min(90%,700px);
	margin: var(--px80) auto var(--px100);
	
	ul{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-gap: 10px;
		
		li{
			position: relative;
			width: min(100%,340px);
			font-weight: var(--Bold);
			margin: 0 auto;

		  a{
			  display: inline-block;
			  width: 100%;
			  padding: 8px 0 8px 15px;
			  border: 1px solid #707070;
			  border-radius: 50px;
			  transition: .5s;
			  
			  &:after{
					display: inline-block;
					content: "";
					position: absolute;
					background-image: url("../images/common/png_05.png");
					width: 20px;
					height: 20px;
					background-size: 20px;
					top: 50%;
					right: 12px;
					transform: translateY(-50%);
					background-repeat: no-repeat;
					background-position: left center;
					transition: .5s;
				}
			  &:hover{
				  background-color: #333;
				  color: #fff;

					&:after{
							background-image: url("../images/common/png_04.png");	  
						}
			  }
			  &.active{
				  background-color: #333;
				  color: #fff;
				  cursor: default;
				  pointer-events: none;/*リンクしない*/
				  
				  &:after{
							background-image: url("../images/common/png_04.png");	  
						}
				  &:hover{
					  opacity: 1;
					  
				  }
			  }
			}
		  }
	}
}
/*-----OMSbiについて sp-----*/
.matter{

  .matter_inner{
    width: min(90%,1660px);
    margin: 0 auto;	
	  
	  .image_01{
		  padding-bottom: var(--px30);
		  width: min(100%,300px);
		  
		  img{
			  border-radius: var(--px40);
		  }
		  
	  }
	  .text{
		  
		h1{
			font-size: var(--font-size36);
			line-height: 1.6;
			padding-bottom: var(--px40);
		}
		h2{
			font-size: var(--font-size36);
			line-height: 1.5;
			padding-bottom: var(--px30);
		}
		h3{
			font-size: var(--font-size20);
			line-height: 1.6;
			span{
				font-size: 80%;
				font-weight: var(--Regular);
			}
		}
		  p{
			  padding-bottom: var(--px30);
			  font-size: var(--font-size18);
			  font-weight: var(--Medium);
			  
			  &.gist{
				  width: min(100%,613px);
				  font-weight: var(--Bold);
				  padding-bottom: var(--px40);
			  }
			  &.te{
				  width: min(100%,613px);
				  font-weight: var(--Medium);
				  padding-bottom: var(--px20);
			  }
		  }
	  }
	  
	 
	  .image_02{
		  padding-bottom: var(--px30);
		  text-align: right;		  
		  
		  img{
			  border-radius: var(--px40);
			  width: min(100%,300px);
		  }
	  }

  }
}

@media (min-width:768px){
/*-----ファーストビュー tab-----*/
.first_view{
	padding-top: clamp(140px,15vw,190px) ;
}
/*-----サブメニュー tab-----*/ 
.sub_link{
	
	ul{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		grid-gap: 15px;			
	}
}


	
}
@media (min-width:1024px){
/*-----ファーストビュー pc-----*/
.first_view{
	
	h1{
		
		&::after{
			border-bottom: solid 2px #000;
		}
	}
}

/*-----OMSbiについて pc-----*/
.matter{

  .matter_inner{
	  width: min(96%,1660px);
	  display: flex;
	  justify-content: space-between;
	  
	  .image_01{
		  padding-bottom: 0;
		  width: min(17.5%,403px);
		  display: flex;
		  flex-flow: column;
		  justify-content: flex-end;
	  }
	  .text{
		  width: min(65%,613px);
		  padding-bottom: 50px;
		  
		  p{
			   width: min(100%,560px);
		  }
	  }
	  
	 
	  .image_02{
		  padding-bottom: 0;
		  width: min(17.5%,403px);
	  }

  }
}



}

@media (min-width:1280px){
/*-----サブメニュー 1280-----*/ 
.sub_link{
	width: min(96%,1420px);
	
	ul{
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-gap: 20px;			
	}
}
/*-----OMSbiについて 1280-----*/
.matter{

  .matter_inner{
	  
	  .image_01{
		  width: min(22.5%,403px);
	  }
	  .text{
		  width: min(55%,613px);
	  }
	  	 
	  .image_02{
		  width: min(22.5%,403px);
	  }

  }
}	
	
	
}

@media (min-width:1560px){

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