@charset "UTF-8";
/* ----- Widget ウィジェットの記述 ----- */

/* ---------- 重要なお知らせ ---------- */
.w-info-important-main{
	border: solid 2px #ccc;
	border-radius: 10px;
	padding: 30px 40px;
	align-items: center;
	display: none;
	.w-info-important-main__heading{
		text-align: center;
		margin-right: 40px;
		flex-shrink: 0;
	}
	.w-info-important-main__title {
		font-size: 17px;
	}
	.w-info-important-main__button {
		border-radius: 5px;
		font-size: 13px;
		text-decoration: none;
		color: #fff;background: #C90A0A;
		display: inline-block;
		line-height: 100%;
		margin-top: 7px;
		padding: 8px 10px 7px;
		&:hover {
			opacity: .7;
			text-decoration: none;
		}
	}
	.w-info-important-main__list {
		padding-left: 40px;
		border-left: 2px solid #ccc;
	}
	.w-info-important-main__item:not(:first-child) {
	margin-top: 10px;
	}
	.w-info-important-main__link {
		color: #C90A0A;
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}
	.w-info-important-main__d-link {
		display: flex;
		align-items: baseline;
	}
	.w-info-important-main__date {
		flex-shrink: 0;
		font-size: 14px;
		margin-right: 20px;  
		&::before {
			content: "・";
			color: #C90A0A;
		}
	}
	@media (min-width: 751px) {
		display: flex;
	}
}

/*-------------------------------------------------------------
	重要なお知らせバナー（弊社からのメールが届かないお客様へ）
-------------------------------------------------------------*/
.w-info-important-banner {
	margin-top: 10px;
	.w-info-important-banner__link {
		display:  block;
		text-align: center;
		padding: 10px 30px 8px;
		color: var(--color-red);
		position: relative;
		border: 1px solid var(--color-red);  
		border-radius: 5px;  
	
		&:hover {
			background: #ffeded;
			opacity: 1;
			border-radius: 5px;
			text-decoration: none;
		}
		&::after {
			content: "";
			position: absolute;
			right: 1em;
			top: 50%;
			margin-top: -5px;
			transition: all .2s;
			width: 9px;
			height: 9px;
			border-top: solid 2px var(--color-red);
			border-right: solid 2px var(--color-red);
			transform: rotate(45deg);
		}
		&:hover::after {
			right: .5em;
		}
	}
}

/*----------------------------------------
	重要なお知らせSP（スライダー）
----------------------------------------*/
.w-info-important-sp {
	background: var(--color-black);
	padding: 12px 10% 10px 3%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.w-info-important-sp__title {
		background: #B40000; /*暗めの赤*/
		display: inline-block;
		border-radius: 5px;
		line-height: 105%;
		font-size: 11px;
		padding: 4px 5px 3px;
		text-align: center;
		width: 90px;
		margin-right: 15px;
		flex-shrink: 0;
	}
	.w-info-important-sp__title-link {
		color: var(--color-white);
		text-decoration: none;
	}
	.w-info-important-sp__slider {
		width: calc(100% - 105px);
	}
	.w-info-important-sp__item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--color-white);
	}
	.w-info-important-sp__link {
		color: var(--color-white);
	}
	
	/*スライダーの文字色（.w-info-important-sp__itemが付かない場合）*/
	.slick-slide{
		color: var(--color-white);
	}
	/*矢印の設定*/
	.slick-prev {/*戻る矢印の位置と形状*/
		display: none!important;
	}
	.slick-next {/*次へ矢印の位置と形状*/
		position: absolute;
		top: 50%;
		cursor: pointer;
		outline: none;
		right: -8%;
		background: var(--color-black);
		width: 20px;
		height: 20px;
		margin-top: -11px;
	}
	.slick-next::after {
		position: absolute;
		content: "";    
		border-top: 2px solid var(--color-white);/*矢印の色*/
		border-right: 2px solid var(--color-white);/*矢印の色*/
		height: 7px;
		width: 7px;
		transform: rotate(45deg);
		/*  
		top: 50%;
		margin-top: -4px;
		right: 8px;
		*/  
	} 
	.slick-prev:hover ,
	.slick-next:hover {
		opacity: 1;
	}
}