@charset "utf-8";

#fv{
	.wrap{
		&.mv{
			background-image: url('../img/top/mv.jpg');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center top;
			width: 100%;
			height: 400px;
			display: grid;
			align-items: end;
			.contents{
				width: 100%;
				max-width: 100%;
				background-color: #ffffffdb;
				padding: 1.7em 0 1em;
				margin-bottom: 50px;				
				.contents_inner{
					max-width: 1100px;
					width: calc(100% - 60px);
					margin: 0 auto;
					display: grid;
					grid-template-columns: 62% 35%;
					grid-column-gap: 3%;
					align-items: center;
					h1{
						color: #1FC4CB;
						font-size: 3.2rem;
						line-height: 1.5;
						font-weight: 500;
						span{
							font-size: 1.2em;
							margin-right: 0.2em;						
						}
					}
					p{
						color: #2f2f2f;
					}
				}
			}
		}
		&.copy{
			background-color: #1FC4CB;
			padding: 50px 0;
			.contents{
				text-align: center;
				h2{
					color: #fff;
					font-size: 2.6rem;
					font-weight: 500;
					line-height: 1.6;
					margin-bottom: 0.7em;
				}
				p{
					color: #fff;
				}
			}
		}
	}
}
#type{
	.wrap{
		padding: 90px 0;
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 50px;
				dl{
					background-color: #D7F8FA;
					display: grid;
					justify-items: center;
					grid-row-gap: 30px;
					padding: 1.5em;
					box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
					position: relative;
					&::after{
						content: "";
						background-image: url('../img/common/icon_arrow_02.svg');
						background-repeat: no-repeat;
						background-size: contain;
						display: block;
						position: absolute;
						right:10px;
						bottom: 10px;
						width: 20px;
						height: 20px;
					}
					dt{
						font-size: 2.4rem;
						border-bottom: dotted #1FC4CB 3px;
						padding-bottom: 5px;
					}
					dd.img{
						width: 50%;
					}
					dd{
						line-height: 1.8;
					}
				}
			}
		}
	}
}
#news{
	.wrap{
		padding-bottom: 90px;
		.contents{
			.title{
				border-bottom: dotted #1FC4CB 3px;
				padding-bottom: 5px;
				display: grid;
				grid-template-columns: 8em 1fr;
				grid-column-gap: 30px;
				justify-items: self-end;
				margin-bottom: 30px;
				align-items: center;
				h3{
					display: grid;
					grid-template-columns: auto 1fr;
					grid-column-gap: 0.2em;
					align-items: center;
					font-size: 2.4rem;			
					font-weight: 500;
					img{
						width: 1.2em;
					}
				}
				a.more{
					font-size: 1.4rem;
					position: relative;
					padding-right: 1.2em;
					&::after{
						content: "";
						background-image: url('../img/common/icon_arrow_01.svg');
						background-repeat: no-repeat;
						background-size: contain;
						display: block;
						position: absolute;
						right:0;
						top: 50%;
						transform: translateY(-50%);
						width: 10px;
						height: 10px;
					}
				}
			}
			dl{
				display: grid;
				grid-template-columns: 7em 1fr;
				padding-bottom: 1em;
				border-bottom: dotted 1px #000;
				margin-bottom: 1em;
				dt{
					line-height: 1.5;
					a:hover{
						color: #139ba0;
					}
				}
				dd{
					line-height: 1.5;
				}
			}
		}
	}
}
#detail{
	.wrap{
		padding-bottom: 90px;
		.contents{
			h3{
				display: grid;
				grid-template-columns: auto 1fr;
				grid-column-gap: 0.2em;
				align-items: center;
				font-size: 2.4rem;			
				font-weight: 500;
				border-bottom: dotted #1FC4CB 3px;
				padding-bottom: 5px;
				justify-self: center;
				margin-bottom: 30px;
				img{
					width: 1em;
				}
			}
			.contents_inner{
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 50px;
				align-items: center;
				margin: 0 auto;
				width: 80%;
				a{
					background-color: #fff;
					dl{
						border: solid #1FC4CB 2px;
						padding: 2em 1em;
						display: grid;
						grid-template-columns: auto auto;
						justify-content: center;
						align-items: center;
						grid-gap: 2em;
						position: relative;
						dt{
							font-size: 1.8rem;
							color: #1FC4CB;
							font-weight: 500;
						}
						&::after {
							content: "";
							background-image: url(../img/common/icon_arrow_02.svg);
							background-repeat: no-repeat;
							background-size: contain;
							display: block;
							position: absolute;
							right: 10px;
							bottom: 10px;
							width: 15px;
							height: 15px;
						}
						&:hover{
							background-color: #ccf0f1;
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:1200px) {

	#fv{
		.wrap{
			&.mv{
				.contents{	
					padding: 1em 0 1em;		
					.contents_inner{
						h1{
							font-size: 2.8rem;
						}
					}
				}
			}
			&.copy{
				padding: 40px 0;
			}
		}
	}
	#type{
		.wrap{
			padding: 70px 0;
			.contents{
				.contents_inner{
					grid-column-gap: 40px;
					dl{
						dt{
							font-size: 2.2rem;
						}
					}
				}
			}
		}
	}
	#news{
		.wrap{
			padding-bottom: 70px;
			.contents{
				.title{
					h3{
						font-size: 2.4rem;			
					}
				}
			}
		}
	}
	#detail{
		.wrap{
			padding-bottom: 70px;
			.contents{
				h3{
					font-size: 2.4rem;			
				}
				.contents_inner{
					width: 90%;
				}
			}
		}
	}
}

@media screen and (max-width:1024px) {

	#fv{
		.wrap{
			&.mv{
            	height: 340px;
				.contents{		
					margin-bottom: 40px;
					.contents_inner{
						grid-template-columns: 48% 47%;
						grid-column-gap: 5%;
						h1{
							font-size: 2.4rem;
						}
						p{
							font-size: 1.5rem;
						}
					}
				}
			}
			&.copy{
				padding: 30px 0;
				.contents{
					h2 {
						font-size: 2.4rem;
						margin-bottom: 0.6em;
					}
					p{
						font-size: 1.5rem;
					}
				}
			}
		}
	}
	#type{
		.wrap{
			padding: 50px 0;
			.contents{
				.contents_inner{
					grid-column-gap: 30px;
					dl{
						grid-row-gap: 20px;
						dd{
							font-size: 1.4rem;
						}
					}
				}
			}
		}
	}
	#news{
		.wrap{
			padding-bottom: 50px;
		}
	}
	#detail{
		.wrap{
			padding-bottom: 50px;
			.contents{
				.contents_inner{
					width: 100%;
					grid-column-gap: 30px;
				}
			}
		}
	}

	
}

@media screen and (max-width:768px) {

	#fv{
		.wrap{
			&.mv{
            	height: inherit;
				background-image: none;
				.contents{		
					padding: 0;
					margin-bottom: 0;
					.sp_inner{
						background-image: url(../img/top/mv.jpg);
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center top;
						width: 100%;
						aspect-ratio: 2.5/1;
						display: grid;
						align-items: end;
					}
					.contents_inner{
						grid-template-columns: 1fr;
						padding: 1em 0;
						h1{
							font-size: 1.8rem;
							margin-bottom: 0.5em;
						}
						p{
							font-size: 1.4rem;
						}
					}
				}
			}
			&.copy{
				padding: 25px 0;
				.contents{
					h2 {
						font-size: 1.8rem;
						margin-bottom: 0.6em;
					}
					p{
						font-size: 1.4rem;
						text-align: left;
					}
				}
			}
		}
	}
	#type{
		.wrap{
			padding: 40px 0;
			.contents{
				.contents_inner{
					grid-template-columns: 1fr;
					grid-row-gap: 30px;
					dl{
						grid-row-gap: 15px;
						dt{
							font-size: 1.8rem;
						}
						dd{
							font-size: 1.4rem;
						}
					}
				}
			}
		}
	}
	#news{
		.wrap{
			padding-bottom: 30px;
			& .contents {
                & .title {
					grid-template-columns: 6.5em 1fr;
					margin-bottom: 20px;
                    h3 {
                        font-size: 2.0rem;
                    }
                }
				dl{
					display: grid;
					grid-template-columns: 7em 1fr;
					padding-bottom: 1em;
					border-bottom: dotted 1px #000;
					margin-bottom: 1em;
					dt{
						font-size: 1.4rem;
						line-height: 1;
					}
					dd{
						line-height: 1;
						font-size: 1.4rem;
					}
				}
            }
		}
	}
	#detail{
		.wrap{
			padding-bottom: 30px;
			.contents{
				h3 {
                    font-size: 2.0rem;
					margin-bottom: 20px;
                }
				.contents_inner{
					grid-template-columns: 1fr;
					width: 100%;
					grid-row-gap: 20px;
					a {
						dl {
							padding: 1em 1em 1em 3em;
							grid-template-columns: 2em 1fr;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:640px) {



}