/*---------------------
 * 2024/0219
 * ------------------*/
#popup {
	display: none;
	/* label でコントロールするので input は非表示に */
}

.popup-open {
	cursor: pointer;
	/* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup-overlay {
	display: none;
	/* input にチェックが入るまでは非表示に */
}

#popup:checked~.popup-overlay {
	display: block;
	z-index: 99999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.popup-window {
	width: 90vw;
	max-width: 700px;
	padding: 40px;
	background-color: #ffffff;
	border-radius: 6px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup-text {
	margin: 0;
}

.popup-text:not(:last-of-type) {
	margin-bottom: 1em
}

.popup-close {
	cursor: pointer;
	position: absolute;
	top: -26px;
	right: 0;
}

.popup-window {
	text-align: center;
}

.popup-window h3 {
	text-align: center;
	font-size: 22px;
	color: #2A649E;
	font-weight: bold;
	border-bottom: 3px solid #ededed;
	padding-bottom: 5px;
	margin-bottom: 15px;
}

.popup-window .btn_style {
	margin-top: 20px;
}

.popup-window .btn_style a {
	font-family: 'Noto Sans JP', sans-serif;
}

/*sp*/

#popup-sp {
	display: none;
	/* label でコントロールするので input は非表示に */
}

#popup-sp:checked~.popup-overlay {
	display: block;
	z-index: 99999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

@media screen and (max-width: 767px) {
	.popup-window {
		font-size: 14px;
		text-align: left;
		line-height: 1.8;
		width: 80%;
		padding: 20px;
		background-color: #ffffff;
		border-radius: 6px;
		position: fixed;
		top: 52%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.popup-window h3 {
		text-align: center;
		font-size: 18px;
		color: #2A649E;
		font-weight: bold;
		border-bottom: 3px solid #ededed;
		padding-bottom: 5px;
		margin-bottom: 10px;
	}
	.popup-window .btn_style a {
		padding: 14px 0 16px;
	}
	
}

/* HP開いたらすぐ出てくるモーダルウィンドウ */

.modal {
	display: none;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
  }
  .modal-content {
	padding: 20px;
	max-width: 620px;
  }
  .modal-title {
	color: #800000; /* モーダルウィンドウの文字の色 */
	font-size: 18px; /* モーダルウィンドウの文字の大きさ */
	font-weight: bold;
	line-height: 200%;
	text-align: center;
  }
  .close-button {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	margin-top: -7px;
  }
  .close-button:hover,
  .close-button:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  }
  
  .modal p {
	line-height: 1.7;
	font-weight: normal;
  }

  .modal p .red {
	color: red;
  }

  .modal p .blue {
	color: #2A649E;
  }

  .modal .btn_style {
	margin-top: 0;
  }

  @media screen and (max-width: 767px) {
	.modal-content {
		text-align: left;
		top: 50%;
	}
	.modal p strong {
		font-size: 14px;
	  }
  }