@charset "UTF-8";

/* -------------------------------------------------

 重要なお知らせ

------------------------------------------------- */
.IM_Announce_waku {
	width:95%;
	margin: 0 auto 80px;
}
@media screen and (max-width: 898px)  {
.IM_Announce_waku {
	margin: 0 auto 60px;
}
}
@media screen and (max-width: 568px)  {
.IM_Announce_waku {
	margin: 0 auto 40px;
}
}

.IM_Announce_wrp {
	max-width:780px;
	width:100%;
	margin:50px auto;
	padding:40px 80px;
	background-color: #D50003;
	border-radius: 10px;
}
@media screen and (max-width: 768px)  {
.IM_Announce_wrp {
	margin:30px auto;
	padding:40px 40px 30px;
}
}
@media screen and (max-width: 480px)  {
.IM_Announce_wrp {
	padding:30px 30px 20px;
}
}
	
.IM_Announce_wrp h2 {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: -15px;
	font-family: "Noto Sans Japanese", sans-serif;
	font-size:28px;
	font-style: normal;
	font-weight: 500;
	color: #ffffff;
}	
@media screen and (max-width: 768px)  {
.IM_Announce_wrp h2 {
	font-size:22px;
}	
}
@media screen and (max-width: 480px)  {
.IM_Announce_wrp h2 {
	font-size:18px;
}	
}

.IM_Announce_box {
	font-family: "Noto Sans Japanese", sans-serif;
	font-size:18px;
	font-style: normal;
	font-weight: 400;
	color: #ffffff;
	line-height: 2;
}
.IM_Announce_box p {
	padding: 15px 0 0;
	text-indent: -1em;
 padding-left: 1em;
}
.IM_Announce_box p:last-child {
	padding: 0;
 padding-left: 1em;
}
.IM_Announce_box p a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 5px; /* 文字から5px下に下線を移動 */
}
.IM_Announce_box p a:hover {
	text-decoration: none;
}
@media screen and (max-width: 768px)  {
.IM_Announce_box {
	font-size:16px;
}
.IM_Announce_box br {
	display: none;
}	
}
@media screen and (max-width: 480px)  {
.IM_Announce_box {
	font-size:14px;
	line-height: 1.7;
}
}
	
.IM_arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 18px;
}
.IM_arrow::before,
.IM_arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0px);
  right: 0;
  width: 10px;
  height: 4px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 2px) 50%;
}
.IM_arrow::before {
  transform: rotate(45deg);
}
.IM_arrow::after {
  transform: rotate(-45deg);
}	
@media screen and (max-width: 480px)  {
.IM_arrow::before,
.IM_arrow::after {
  width: 8px;
  height: 3px;
}
}