﻿/*
@charset "Shift-JIS";

NormalMasterPage用CSS

*/

.popup 
{
    position: relative;
    background: #f8f8f8;
    padding: 5px 35px 20px 20px;
    width: auto;
    max-width: 400px;
    margin: 0px auto auto auto;
    border-top: solid 5px #808080;
    border-right: solid 5px #808080;
    border-bottom: solid 5px #808080;
    border-left: solid 5px #808080;
    border-radius: 7px/7px;
    -moz-border-radius: 7px/7px;
    -webkit-border-radius: 7px/7px;
    background-color: #f8f8f8;
}
.popup.menu
{
	position: absolute;
	top: 30px;
	left: 200px;
	min-height: 550px;
	max-width: 950px;
	min-width: 950px;
    padding: 0px 0px 10px 0px;
}
.popup div
{
    color: #000000;
}
.popup h2
{
    color: #000000;
}
/* メニューの×印 */
.popup.menu .mfp-close
{
    top:30px;
}
 .popup.menu .mfp-close:hover
{
    color: #ff0000;
}
/*---- 2018/05/23 Ver5.0.0 ADD Start M.nakashima ----*/
/* グループ選択div */
.popup.menu #TargetGroup
{
    height: 40px;
    margin: 0;
    background-color:#202b40;
    cursor:pointer;
    transition:all 0.3s;
    z-index:700; 
    position:absolute; 
    width:100%;
}
/* アイコン表示 */
.popup.menu #GroupIcon
{
    width:25px;
    height:25px;
    background-image:url("../menu_icon/groupIcon.png");
    background-size:cover;
    float:left;
    margin: 7px 0 0 10px;
}
.popup.menu #TargetGroup:hover #GroupIcon
{
   background-color: #2c2c2c;
}
.popup.menu .targetGroupName
{
    font-size: 16px;
    line-height: 38px;
    padding: 0 0 0 10px;
    float: left;
    color:#fefefe;
}
.popup.menu #TargetGroup:hover
{
    background-color: #176ec7;
    transition:all 0.3s;
}

.popup.menu #TargetGroup:hover .targetGroupName
{
    background-color: #176ec7;
    transition:all 0.3s;
    color:#2c2c2c;
}
.popup.menu #TargetGroup.open
{
    background-color: #176ec7;
    transition:all 0.3s;
}
.popup.menu #TargetGroup.open .targetGroupName
{
    background-color: #176ec7;
    transition:all 0.3s;
    color:#2c2c2c;
}

/* 2021/08/30 Ver11.0.0 ADD Start S.Hirata */
.popup_overlay {
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.2s;
    transform: scale(0);
    background: rgba(0, 0, 0, 0.7);
}
/* 2021/08/30 Ver11.0.0 ADD End S.Hirata */

/* 矢印 */
.arrow
{
    float:right;
    position: relative;
    margin:0 20px 0 0;
    width: 30px;
    height: 30px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.arrow:before
{
    left: 3px;
    top: 5px;
    width: 13px;
    height: 13px;
    border-top: 3px solid #fefefe;
    border-right: 3px solid #fefefe;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    transition:all 0.3s;
}
.popup.menu #TargetGroup:hover .arrow:before
{
    border-top: 3px solid #2c2c2c;
    border-right: 3px solid #2c2c2c;
}
.popup.menu #TargetGroup.open .arrow:before
{
    left: 9px;
    top: 5px;
    width: 13px;
    height: 13px;
    border-top: 3px solid #2c2c2c;
    border-right: 3px solid #2c2c2c;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition:all 0.3s;
    color:#252525;
}
/* グループメニュー */
.groupMenu
{
    display:none;
    margin-top:45px;
}
.groupMenu.open
{
    display:block;
}
/* グループ名一覧 */
.groupNameList
{
    z-index:600;
    position:absolute;
    width:100%;
    height: 100%;
    top:40px;
    display:none;
    background-color:rgba(49, 49, 49, 0.9);
    transition:all 0.3s;
    margin-top:-40px;
}
/* グループ名div */
.popup.menu .divGroupName
{
    height:45px;
    font-size: 18px;
    line-height:50px;
    padding-left: 20px;
    color:rgba(255, 255, 255, 1);
    text-shadow:2px 2px 2px rgba(5, 5, 5, 0.9);
    transition:all 0.3s;
}
.popup.menu .divGroupName:hover
{
    background-color:rgba(247, 247, 247, 0.9);
    color:#174dc7;
    cursor:pointer;
    box-shadow:5px 5px 5px rgba(65, 65, 65, 0.7);
    text-shadow:2px 2px 2px rgba(119, 119, 119, 0);
    transition:all 0.3s;
}
/*----- 2018/05/23 Ver5.0.0 ADD End M.nakashima -----*/


/* ---------------------------------------------------- */
/* ヘルプ                                               */
/* ---------------------------------------------------- */
#divMenuArea .selected
{
    background-color: #0080e8;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 0 0 5px/5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px/5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px/5px 0 0 5px;
}
#divMenuArea .selected:hover
{
    color: #ffffff;
}
#divMenuArea .unselected
{
    background-color: transparent;
    color: #ffffff;
    font-weight: normal;
    border-radius: 5px 0 0 5px/5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px/5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px/5px 0 0 5px;
}
#divMenuArea .unselected:hover
{
    color: #ffffff;
}
