@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;
					  
				  }
			  }
			}
		  }
	}
}
/*-----メッセージナビ sp-----*/
.message_nav{

  .inner{
    width: 90%;
    margin: 0 auto;
    padding-top: var(--px60);
	  padding-bottom: var(--px100);
	  
	.grid_wrap{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-gap: 50px;

		.g_item{
			width: min(90%,340px);
			margin: 0 auto;
			text-align: center;

			.g_img{				
				width: min(100%,300px);
				margin: 0 auto;
				
				img{
					border-radius: var(--px40);
				}
			}
			h2{
				padding-top: var(--px20);
				font-size: var(--font-size20);
				font-weight: var(--Bold);
			}
			h3{
				padding-top: 6px;
				font-size: var(--font-size36);
				font-weight: var(--Bold);
			}
			p{
				padding-top: var(--px20);
				font-size: var(--font-size20);
				font-weight: var(--Bold);
				line-height: 1.5;
			}
			.btn{
				width: min(90%,200px);
				margin: var(--px40) auto var(--px30);
				font-weight: var(--Medium);

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

					&::after {
						content: '';
						position: absolute;
						top: calc(.5em + 4px);
						right: 16px; /* 位置調整*/

						display: inline-block;
						width: 9px;
						height: 9px;
						border-top: 2px solid #ffffff;
						border-right: 2px solid #ffffff;
						transform: rotate(135deg);
					  }
					&:hover{
						color: #333;
						background-color: #fff;
						transition: .5s;

						&::after{
							border-top: 2px solid #333;
							border-right: 2px solid #333;
						}
					}
				}

			}
		}
	}
	 

  }
}
@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;			
	}
}
/*-----メッセージナビ tab-----*/
.message_nav{

  .inner{
	  width: min(90%,700px);
	  
	.grid_wrap{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		grid-gap: 50px 20px;

		.g_item{
			display: flex;
			flex-flow: column;

			.btn{
				margin: auto auto var(--px30);
				padding-top: var(--px30);
			}
		}
	}
	 

  }
}

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

  .inner{
	  width: min(96%,1180px);
	  
	.grid_wrap{
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, auto);
	}
	 

  }
}


}

@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;			
	}
}
	
	
}

@media (min-width:1560px){

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