@charset "utf-8";
body {
	& .kv {
		position: relative;
		height: 340px;
		width: 100%;
		overflow: hidden;
		@media (max-width: 767px) {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding-top: var(--header-bottom, 48px);
		}
		@media (min-width: 768px) {
			height: 450px;
		}
		& .image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: url("../img/top/img_kv_sp.jpg") no-repeat center;
			background-size: cover;

			@media (min-width: 980px){
				background-image: url("../img/top/img_kv_pc.jpg");
			}
		}
		/* テキストエリア */
		& .text_area {
			position: relative;
			z-index: 10;
			width: 90%;
			text-align: center;
			@media (min-width: 768px) {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		& .catch {
			/* color: var(--blue); */
			font-family: "Zen Kaku Gothic New", sans-serif;
			font-weight: bold;
			font-size: clamp(22px, 5.866vw, 40px);
			line-height: 1.3;
			letter-spacing: -0.04em;
			margin: 0;
			color: #ffffff;
			text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
			@media (min-width: 980px) {
				font-size: 3.061vw;
				line-height: 1.5;
			}
			@media (min-width: 1399px) {
				font-size: 281.25%;
			}

			& span {
				display: block;
				font-size: 75%;
				font-weight: bolder;
				@media (min-width: 980px){
					font-size: 66%;
				}
			}
		}

		& p.btn {
			margin: 20px auto 0;
			width: 250px;
			line-height: 1.5;
			& a {
				color: #ffffff;
				text-decoration: none;
				font-size: 87.5%;
				padding: 10px;
				background-color: var(--blue_bg);
				border-radius: 20px;
				display: block;
				text-align: center;
				&::after {
					background: url("../img/common/ico_btn_w.svg") no-repeat;
					content: "";
					display: inline-block;
					width: 6px;
					height: 8px;
					margin-left: 5px;
				}
			}
		}
	}
}
main section:nth-of-type(even) {
	background-color: var(--skyblue_bg);
}
main {
	& section.news_para {
		background-color: var(--black);
    	padding: 1em 5%;
		opacity: 0.8;
		@media (min-width: 768px) {
			padding: 10px 5%;
		}
		@media (min-width: 980px) {
			padding: 10px 0;
		}
		& article {
			& div.wrapper {
				position: relative;
				@media (min-width: 768px) {
					display: flex;
					align-items: center;
				}
				& h2 {
					color: #ffffff;
					font-size: 100%;
					font-weight: bold;
					padding-right: 1em;
					margin-bottom: 0;
					white-space: nowrap;
				}
				& ul {
					@media (min-width: 768px) {
						flex: 1;
						min-width: 0;
						padding-right: 170px;
					}
					& li {
						& a {
							color: #ffffff;
							text-decoration: none;
							& dl {
								@media (min-width: 768px) {
									display: flex;
								}
								& dt {
									font-weight: normal;
									margin-right: 1em;
									font-size: 87.5%;
								}
								& dd {
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: 87.5%;
								}
							}
						}
					}
				}
				& p {
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					align-items: center;
					gap: 15px;
					@media (min-width: 980px) {
						top: 50%;
						transform: translateY(-50%);
						-webkit-transform: translateY(-50%);
						-ms-transform: translateY(-50%);
					}
					& a {
						background-color: #ffffff;
						border-radius: 20px;
						padding: 2px 10px;
						font-size: 75%;
						text-decoration: none;
						&::after {
							background: url(../img/common/ico_btn.svg) no-repeat;
							content: "";
							display: inline-block;
							width: 6px;
							height: 8px;
							margin-left: 5px;
						}
					}
					& .news-pager {
						display: flex;
						gap: 5px;
					}
					& .news-pager button {
						background: transparent;
						/* border: 1px solid #ffffff; */
						color: #ffffff;
						width: 24px;
						height: 24px;
						/* border-radius: 50%; */
						cursor: pointer;
						font-size: 12px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0;
					}
					& .news-pager button:hover {
						background: #ffffff;
						color: var(--black);
						border-radius: 50%;
					}
				}
			}
		}
	}
}