#news {
	--color-black: #1a1a1a;
	--color-white: #f7f8f8;
	& h3::before, & h3::after {
		display: none;
	}
	& .info-title {
		margin-top: 6rem;
		padding-left: 0;
		font-size: 2.4rem;
		font-weight: 500;
	}
	@media screen and (max-width: 767px) {
		& .tab {
			& li {
				& a {
					flex-wrap: wrap;
					gap: 1rem;
					padding: 1rem;
				}
				& p {
					margin-top: 0;
				}
			}
		}
	}
	& .tab-list {
		margin-top: 2rem;
		display: flex;
		gap: 2rem;
		@media screen and (max-width: 767px) {
			flex-wrap: wrap;
		}
		& .tab-list-item {
			@media screen and (max-width: 767px) {
				width: calc(50% - 2rem);
			}
			& .tab-toggle {
				width: 100%;
				height: 100%;
				display: grid;
				place-items: center;
				color: var(--t-black);
				background: #ffffff;
				border: 1px solid var(--green);
				border-radius: 50px;
				font-size: 1.4rem;
				line-height: 1.7;
				padding: 0.5rem 1.5rem;
				transition: background-color .5s ease, color .5s ease;
				white-space: nowrap;
				&.tab-on {
					background: var(--green);
					color: #ffffff;
					pointer-events: none;
				}
				&:not(.tab-on):hover {
					background: var(--green);
					color: #ffffff;
				}
			}
		}
	}
	& .btn {
		display: grid;
		place-items: center;
		background-color: var(--green);
		border: 0.1rem solid var(--green);
		color: #ffffff;
		font-size: var(--t-middle);
		font-weight: 700;
		letter-spacing: 0.08em;
		transition: 0.5s ease;
		width: 20rem;
		height: 5rem;
		margin: 4rem auto 0;
	}
	& .more-btn {
		margin: 4rem 0 0;
	}
	& .link {
		display: block;
		width: max-content;
		border-bottom: 0.1rem solid var(--green);
		color: var(--green);
		font-size: var(--t-middle);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-align: center;
		transition: 0.5s ease;
		margin: 4rem 0 0;
		&::before {
			content: "→";
		}
	}
	& .tab-news-list:not(:has(li:nth-child(5))) + .more-btn {
		display: none;
	}
	@media screen and (max-width: 767px) {
		& .btn {
			width: min(calc(400 / 750 * 100vw), 20rem);
			height: min(calc(100 / 750 * 100vw), 5rem);
		}
		& .link {
			margin: 4rem auto 0;
		}
	}

	:where(a) {
	  color: inherit;
	}
		
	:where(dialog) {
	  inline-size: unset;
	  max-inline-size: unset;
	  block-size: unset;
	  max-block-size: unset;
	  padding: unset;
	  margin: unset;
	  color: unset;
	  background-color: unset;
	  border: unset;
	  overflow: unset;
	}
		
	:focus:not(:focus-visible) {
	  outline: none;
	}
		
	:where(:root[data-mousedown] dialog *) {
	  outline: none;
	}
		
	[data-modal-open]:where(:root[data-mousedown] *) {
	  outline: none;
	}

	.modal {
		--duration: 0.5s;
		--gutter: max(4vi, 25px);
		--background: var(--color-white);
		--background-backdrop: color-mix(in srgb, var(--color-black), transparent 20%);
	
		inline-size: min(calc(100% - calc(var(--gutter) * 2)), 840px);
		block-size: min(calc(100svb - calc(var(--gutter) * 2)), 475px);
		margin: auto;
		color: var(--color-black);
		background-color: var(--background);
		box-shadow: 0 0 0 100vmax var(--background-backdrop);
		transition: opacity var(--duration), scale var(--duration);
		contain: strict;
	
		&:not([open]) {
			opacity: 0;
			scale: 0.95;
		}
  
		&::backdrop {
			backdrop-filter: blur(4px);
			-webkit-backdrop-filter: blur(4px);
			transition: opacity var(--duration);
		}
  
		&:not([open])::backdrop {
			opacity: 0;
		}
	}

	.container {
		block-size: 100%;
		padding: var(--gutter);
		overflow: auto;
		overscroll-behavior: contain;
	}

	.headline {
		inline-size: fit-content;
		margin-inline: auto;
		width: 100%;
        margin-inline: auto;
        writing-mode: horizontal-tb;
        line-height: 1.5;
        font-size: min(calc(44 / 750* 100vw), 4.4rem);
        white-space: initial;
		text-wrap: auto;
        position: relative;
        left: 0;
		border-bottom: 2px solid var(--color-black);
		padding: 0 3rem 10px 0;
		&::before,&::after {
			display: none;
		}
	}

	.description {
		margin-block-start: 1lh;
		line-height: 1.75;
		& + .headline {
			font-size: min(calc(40 / 750* 100vw), 4rem);
			margin-block-start: 8rem;
			border-bottom: none;
			padding: 0;
		}
	}
	.btn-tel {
		display: inline-block;
		padding: 1rem 2rem;
		margin: 4rem 2rem 0 0;
		color: var(--color-white);
		background-color: var(--green);
		border: 0;
		border-radius: 3rem;
		font-size: 1.6rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-align: center;
		text-decoration: none;
		transition: background-color 0.3s;
		@media screen and (max-width: 767px) {
			margin: 2rem 0 0;
		}
	}
	.form-btn {
		display: inline-block;
		padding: 1.2rem 2rem;
		margin: 4rem 0;
		color: var(--color-white);
		background-color: var(--blue);
		border: 0;
		border-radius: 4rem;
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-align: center;
		text-decoration: none;
		transition: background-color 0.3s;
		@media screen and (max-width: 767px) {
			margin: 2rem 0;
		}
	}

	.close {
		--background: var(--color-black);
		--background-active: color-mix(in srgb, var(--background) 80%, white);
		--icon-color: var(--color-white);
	
		position: absolute;
		inset-block-start: 4px;
		inset-inline-end: 4px;
		z-index: 1;
		inline-size: 3em;
		aspect-ratio: 1;
		appearance: none;
		cursor: pointer;
		background-color: var(--background);
		border: 0;
		border-radius: 50%;
		box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
		transition: background-color 0.3s;
	
		&::before,
		&::after {
			position: absolute;
			inset: 0;
			display: inline-block;
			width: 45%;
			height: 2px;
			margin: auto;
			content: "";
			background-color: var(--color-white);
		}

		&::before {
			rotate: 45deg;
		}

		&::after {
				rotate: 135deg;
		}

		&:focus-visible {
			background-color: var(--background-active);
		}

		@media (any-hover: hover) {
			&:hover {
				background-color: var(--background-active);
			}
		}
	}
}

html:has(dialog[open]) {
	overflow: hidden;
}