@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: 100%;
		margin: var(--px20) auto 0;
		position: relative;
		
		img{
			width: min(90%,700px);
			margin-left: auto;
			display: block;
		}
		
		.first_text{
			width: min(90%,1100px);
			margin: 0 auto;
			padding: var(--px100) 0 var(--px40);
			text-shadow: 
				0 1px 3px rgba(255,255,255,0.8),
				0 0 5px rgba(255,255,255,0.6);
			
			
			h2{
				font-size: var(--font-size42);	
			}
			h3{
				font-size: var(--font-size26);
				font-weight: var(--Bold);
				padding-top: var(--px40);
				text-align: right;
				
				span{
					font-size: var(--font-size18);
					font-weight: var(--Medium);
					padding-right: 1em;					
				}
			}
			p{
				font-size: var(--font-size18);
				padding-top: var(--px10);
				text-align: right;
			}
		}
	}
	.message_text{
		width: min(90%,720px);
		margin: 0 auto;
		line-height: 2.4;
		padding-top: var(--px40);
		padding-bottom: var(--px120);
	}
}
/*-----サブメニュー sp-----*/ 
.sub_link{
	width: min(90%,700px);
	margin: var(--px120) 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);
	  
	.grid_wrap{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-gap: 40px;

		.g_item{
			width: min(90%,300px);
			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);
			}

			.btn{
				width: min(90%,200px);
				margin: var(--px20) 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: 40px 20px;
	}

  }
}

	
}
@media (min-width:1024px){
/*-----ファーストビュー pc-----*/
.first_view{
	
	h1{
		
		&::after{
			border-bottom: solid 2px #000;
		}
	}
	.main_photo{
		
		.first_text{
			padding: 100px 0 0;
			height: 420px;
			
			h3{
				text-align: left;
			}
			p{
				text-align: left;
			}
		}
		
		img{
			position: absolute;
			width: 700px;
			top:0;
			right: 0;
			z-index: -1;
		}
	}
	.message_text{
		padding-top: 50px;
		padding-bottom: 120px;
	}

	
}
/*-----メッセージナビ pc-----*/
.message_nav{

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

  }
}


}

@media (min-width:1280px){
/*-----ファーストビュー 1280-----*/
.first_view{
	
	.main_photo{
		
		.first_text{
			padding: 170px 0 0;
			height: 580px;
		}
		
		img{
			width: 1000px;
		}
	}
	.message_text{
		padding-top: 70px;
		padding-bottom: 130px;
	}
}
/*-----サブメニュー 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);
		}
	}
}
  
}