@charset "utf-8";
/*============================= button =============================*/
.button_style, .button_style_mini
{
	overflow: hidden;
	position: relative;
	z-index: 1;
	width: 300px;
	cursor : pointer;
}
.next_link_button.button_style_mini
{
    width: 65px;
    padding: 5px 0px 5px 5px;
	font-size: 0.8rem;
}
.button_style:after, .button_style_mini:after
{
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}
.button_style:hover:after, .button_style_mini:hover:after
{
	transform: scale(1, 1);
}
.button_black
{
	background-color : var(--color-dark);
	color : var(--color-white);
	border : 2px solid var(--color-dark);
}
.button_black:after
{
	background: var(--color-white);
	color : var(--color-black);
}
.button_black:hover
{
	color : var(--color-black);
}
.next_link_button
{
	display : inline-block;
	padding : 10px 0px;
	position : relative;
}
.next_link_button:before
{
	background-image: url(../img/icon_next_white.png);
	background-size : 50%;
	background-repeat : no-repeat;
	content : "";
	display : inline-block;
	position : absolute;
	right : -10px;
	width : 50px;
	height : 50px;
}
.next_link_button.button_style_mini:before
{
	right: -25px;
    top: 1px;
}
.next_link_button:hover::before
{
	background-image: url(../img/icon_next.png);
}
/*============================= information =============================*/
#NOTIFICATIONS_BOX
{
	display : block;
	width : 100%;
	height : 100%;
	padding : 30px 0px 40px 0px;
}
.notifications_list li
{
	width : 100%;
	margin-bottom : 10px;
	padding : 5px 0px;
	border-bottom : 1px solid;
	border-image: linear-gradient(to right, var(--color-dark) 0%, var(--color-light) 50%, var(--color-dark) 100%) 1;
	display : grid;
	grid-template-columns: 1fr;
	transition: .3s;
	position : relative;
}
.notifications_list li a
{
	display: contents;
}
.notifications_list li a p
{
	text-align : left;
	width: 85%;
	margin-bottom : 15px;
}
.notifications_category
{
	padding : 5px 15px;
	font-size : 12px;
	border-radius : 20px;
}
.notifications_category.notification
{
	background-color : var(--color-medium);
	color : var(--color-white);
}
.next_link_icon
{
	background-color : var(--color-dark);
	display : block;
	padding: 5px;
    width: 35px;
	position: absolute;
    right: 5px;
    bottom: 15px;
}
.notifications_list li:hover
{
	opacity : 0.5;
}
.notifications_list p span.subject
{
	font-size : 14px;
	line-height: 24px;
	color : var(--color-gray);
}
.notifications_list .company_name
{
	margin-right : 10px;
	padding : 5px 10px;
	width: 170px;
    display: inline-block;
    text-align: center;
}
.notifications_icon
{
	display : grid;
    grid-template-columns: auto 1fr;
    place-items: flex-start;
	gap : 10px;
}
.day
{
	margin-top : 2px;
	font-size : 10px;
	color : var(--color-gray);
	text-align: center;
    line-height: 1.2em;
}
/*============================= main menu =============================*/
#MAIN_MENU
{
	display : grid;
	grid-template-columns: 1fr;
	gap : 20px;
	margin-right : 20px;
	margin-left : 20px;
}

#MAIN_MENU section, .edit_division
{
	border : 1px solid var(--color-dark);
	border-radius : 10px;
	padding : 20px;
	background: var(--gray-gradation);
}
#MAIN_MENU section h2
{
	display : grid;
	grid-template-columns: auto 1fr;
	align-items: center;
    color: var(--color-dark);
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, var(--color-dark) 0%, var(--color-light) 50%, var(--color-dark) 100%) 1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
#MAIN_MENU section h2 img, #MAIN_MENU section h2 svg
{
	width : 30px;
	margin : 0px 20px;
}
.overview
{
	background-color : var(--color-light);
	margin : 20px 0px;
	padding : 10px;
	border-radius : 5px;
}
.overview li img
{
	width : 30px;
	margin-right : 10px;
}
.overview li p
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin : 10px auto;
}
.overview li p span
{
	font-size : 26px;
	margin : 0px 10px;
	font-weight : bold;
	color : var(--color-dark);
}
.overview li:hover
{
	opacity : 0.5;
}
#BREADCRUMB
{
	padding: 10px 0px 10px 0px;
}
#BREADCRUMB ul li
{
	font-size: 0.8rem;
}
#BREADCRUMB ul li:not(:last-child)::after
{
	content: "＞";
	display: inline-block;
	margin: 0px 5px 0px 5px;
}
#BREADCRUMB ul li a
{
	text-decoration: none;
	color: var(--color-medium);
}

/* ----------------------------------------------------------------------------- */
/* 768px以上 */
/* ----------------------------------------------------------------------------- */
@media screen and (min-width : 768px)
{
	#MAIN_MENU {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		margin-right : auto;
		margin-left : auto;
	}
	#MENU_ICON
	{
		display: grid;
		grid-template-columns: auto auto auto auto auto;
		margin-right: 30px;
		gap : 0px;
	}
	#MENU_LIST li.account
	{
		display: grid;
		grid-template-columns: auto 1fr;
		place-items: center;
		justify-items: start;
		gap: 15px;
		border : none;
		width : 100%;
		order: 3;
		margin-left : 20px;
	}
	#MANAGEMENT_HEADER_NAV
	{
		top: 80px;
		height: calc(100vh - 80px);	
	}
	.next_link_icon
	{
		position: relative;
        top: 0;
        right: 0;
	}
	.notifications_list li
	{
		padding : 5px 20px;
		grid-template-columns: auto 1fr auto;
		gap : 20px;
		place-items: center;
	}
	.notifications_icon
	{
		display : grid;
		grid-template-columns: 1fr;
		place-items: center;
	}
	.notifications_list li a p
	{
		text-align : left;
		width: 100%;
	}
	#MENU_SWITCH:checked + #MENU_BUTTON + li {
		display: block;
	}
}