@media screen and (max-width: 640px) {
  #LoginFieldSet {
    width: initial;
    padding: 25px;
  }
  /* ���� */
  body {
    min-width: initial;
    font-size: .75em;
    font-family: Hiragino Kaku Gothic Pro, "Meiryo UI", sans-serif;
    clear: both;
  }
  /* �V�K�쐬�Ƃ��̃w�b�_���j���[ */
  #Header {
    height: 100%;
  }
  #Navigations {
    position: static;
    display: flex;
    justify-content: space-between;
  }
  #NavigationMenu>li {
    display: inline-block;
    width: initial;
    margin: 0 2px;
  }
  #NavigationMenu .menu {
    right: initial;
  }
  #Search {
    width: 5em;
  }
  /* �V�K�쐬�Ƃ��̃w�b�_���j���[ �����܂�*/
  /* ���� */
  /* ---�ꗗ���--- */
  #ViewSelectorField {
    position: static;
  }
  #ViewModeContainer {
    overflow-x: auto;
    width: 100%;
  }
  .field-normal>.field-label {
    text-align: left;
  }
   :not(td)>div.field-normal .container-normal {
    width: auto;
    margin-left: 0px;
  }
  /* �t�B���^�̏�� */
  .container-normal {
    display: flex;
    flex-wrap: wrap;
  }
  #ViewFilters_Reset {
    padding: 1px;
    margin: 0.5em;
  }
  #ViewFilters {
    display: flex;
    flex-wrap: wrap;
  }
  #ViewFilters>.field-auto-thin {
    display: flex;
    margin: 0 0 1em 0;
  }
  .field-normal {
    height: initial;
  }
  .field-auto-thin>.field-label {
    padding: 7px 7px 7px 0;
    text-align: right;
    display: inline-block;
    width: 5em;
  }
  /* �t�B���^�̏�� �����܂� */
  /* ---�ꗗ��� �����܂�--- */
  
  /* ---�ڍ׉��--- */
  #Editor #MainForm {
    display: flex;
    flex-direction: column;
  }
  #Editor #RecordHeader {
    order: 1;
  }
  #Editor #EditorTabsContainer {
    order: 2;
  }
  #Editor #EditorComments {
    order: 3;
  }
  #EditorTabsContainer, #EditorComments {
    width: initial;
  }
  #RecordHeader #RecordInfo div, #RecordHeader #RecordInfo .user {
    display: flex;
    flex-wrap: wrap;
  }
  #RecordSwitchers .current, #RecordSwitchers>* {
    display: inline-block;
  }
  #RecordSwitchers .current {
    padding-top: 2px;
  }
  #EditorTabsContainer .field-normal {
    width: 100%;
  }
  #EditorTabsContainer .field-label {
    text-align: left;
    text-align-last: left;
  }
  #EditorTabsContainer .field-wide .container-normal, #EditorTabsContainer .field-markdown .container-normal {
    margin-left: 0px;
  }
  #EditorTabsContainer #Links .fieldset div {
    overflow-x: scroll;
    max-width: 80vw;
  }
  /* ---�ڍ׉�� �����܂�--- */
  /* ---�N���X�W�v���--- */
  #ViewModeContainer .field-auto-thin {
    display: flex;
    margin: 0 0 1em 0;
  }
  #ViewModeContainer .field-auto-thin select {
    max-width: initial;
  }
  /* ---�N���X�W�v��� �����܂�--- */
  /* float����� */
  #Aggregations, #Aggregations .data, #Aggregations>.display-control, #Aggregations em, #Aggregations .label, #CorpLogo, #ProductLogo, #Breadcrumb, #Breadcrumb .item #Breadcrumb .item.trashbox, #NavigationMenu, #NavigationMenu>li, #SearchField, #SwitchUserInfo, #ExcessLicenseWarning, #PublishWarning, #PublishWarning>a, #LockedWarning, #LockedWarning>div, #Application, #Application>.site-image-icon, #StartGuide, #StartGuide>#StartGuideContents>a, #EditorComments, #StartGuide>#DisableStartGuideField, #SiteImageIconContainer, #HeaderTitleContainer, #Notes>* #Notes>.history, #Notes>.readonly, #ViewFilters, #ViewFilters_Reset, #ViewFilters>.field-auto-thin, #ViewFilters>.display-control, #ImageLib, #ImageLib .item, #Editor, #EditorTabsContainer, #ImageLib .item .delete-image, #ImageLib .item .image, #RecordHeader, #RecordInfo div p .elapsed-time, #RecordInfo div p, #RecordInfo div, #RecordInfo, #RecordSwitchers .current, #RecordSwitchers, #RecordSwitchers>*, #TemplateTabsContainer, #MailEditorTabsContainer, #OutgoingMailsForm .content, #OutgoingMailsForm, #OutgoingMailsForm>.item, #SearchResults .count .data, #SearchResults .count .label, #SearchResults .count, #SearchResults .result, #SearchResults .result>h3, #SearchResults .result>p, #SearchResults .result>ul, #SearchResults, #Video, .command-center>button, .command-field>button, .command-left, .command-left>*, .container-left, .container-normal, .container-right, .control-attachments-item, .control-attachments-items, .control-attachments-upload, .control-textarea, .control-textbox.with-unit, .field-auto, .field-auto-thin select, .field-auto-thin, .field-auto-thin>.field-control, .field-auto-thin>.field-label, .field-auto>.field-control, .field-auto>.field-label, .field-control .unit, .field-markdown, .field-markdown>.field-control, .field-markdown>.field-label, .field-normal, .field-normal>.field-control, .field-normal>.field-label, .field-section, .field-vertical, .field-vertical>.field-control, .field-vertical>.field-label, .field-wide, .field-wide>.field-control, .field-wide>.field-label, .fieldset.enclosed-auto, .fieldset.enclosed-half, .nav-site .conditions span, .nav-site, .progress-bar, .template, .template-selectable, .template-viewer-container, :not(td)>div.field-markdown .container-normal, :not(td)>div.field-wide .container-normal, .both, .button-right-justified, .comment, .comment>*, .comment>.time, .container-selectable .wrapper, .control-anchor, .control-basket>li, .control-basket>li>span, .control-checkbox, .control-checkbox+label, .control-radio, .control-radio+label, .control-selectable, .control-slider, .control-slider-ui, .control-spinner, .datepicker, .delete-file, .dept, .dept>span, .dropdown, .field-control .control-markup, .file-name, .grid-row p, .grid>thead>tr>th span, .grid>thead>tr>th>div, .hidden, .link-creations button, .md, .md>*, .menu-sort>li, .menu-sort>li:hover, .menu-sort>li>*, .message-dialog, .right, .show-file, .text, .ui-icon.a, .ui-spinner, .user, .user>span, label.error {
    float: none;
  }
}
/* サイト全体に関するスタイルを記述 */

.pointer {
    cursor: pointer;
}

.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.font-bold {
    font-weight: bold;
}

/* ------------------------------ */
/* ヘッダー周り */
/* ------------------------------ */
#Header {
    background-color: #003466;
}

#Header #Navigations{
    background: #efefef;
    background-color: #efefef;
}

#Header #Navigations #NavigationMenu div,
#Header #Navigations #NavigationMenu div a {
    color: #737373;
    font-weight: bold;
}

#Header #Navigations .hover{ 
    background: #dcdcdc;
    background-color: #dcdcdc;
}

#Header #Navigations #NavigationMenu div.hover,
#Header #Navigations #NavigationMenu div.hover a {
    color: #737373;
}
/* ------------------------------ */
/* ヘッダー周り ここまで */
/* ------------------------------ */

#ViewFilters .ui-multiselect{
    color: #292929;
}

.ui-widget.ui-widget-content {
    border: 1px solid #1e88e5;
}

.control-attachments-upload {
    border: dotted 2px #1e88e5;
}

.ui-widget-content {
    border: 1px solid #8e846b;
    background: #E3F2FD;
    color: #383838;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
    color: #f8f8f8;
    text-decoration: none;
}

/* 一覧画面のドロップダウンリスト */
.control-textbox,
#ViewFilters .ui-state-default{
    border: 1px solid #c0c0c0;
    background: #ffffff;
}

/* 詳細画面で進捗が完了のとき */
.status-closed {
    color: #fff;
    background: #1e88e5;
}

.ui-state-default,
.ui-widget-content
.ui-state-default,
.ui-widget-header
.ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid #1976D2;
    background: #2196F3;
    font-weight: bold;
    color: #efefef;
}

/* ------------------------------ */
/* テーブル周り */
/* ------------------------------ */
#GridHeader,
#Grid .ui-widget-header {
    background: #757575;
}

#ViewModeContainer .grid-row .user .ui-icon-person {
    display: none;
}

#ViewModeContainer .grid-row .user>span {
    font-weight: normal;
}

#ViewModeContainer .grid-row .comment {
    background: inherit;
    border: none;
    border-top: 1px solid #dedede;
}

/* ------------------------------ */
/* テーブル ここまで */
/* ------------------------------ */

/* ------------------------------ */
/* クロス集計 */
/* ------------------------------ */
#Crosstab #CrosstabGroupByX {
    max-width: 100%;
}

#Crosstab #CrosstabGroupByY {
    max-width: 100%;
}

#Crosstab #CrosstabValue {
    max-width: 100%;
}


#CrosstabBody .crosstab-row th {
    text-align: right;
}

/* ------------------------------ */
/* クロス集計 ここまで */
/* ------------------------------ */



/* ------------------------------ */
/* 詳細 */
/* ------------------------------ */
#EditorTabsContainer {
    border: 1px solid #898989;
    background: #fefefe;
}

#EditorTabsContainer .field-normal {
    width: 33%;
}

#EditorTabs.ui-widget-header {
    background: #ffffff;
    border: none;
    border-bottom: 1px solid #898989;
    border-radius: 0px;
}

#Issues_BodyField img {
    max-width: 200px;
    height: auto;
    width: auto;
}

#FieldSetGeneral img {
    max-height: 250px;
    height: auto;
    width: auto;
}

.control-attachments-upload {
    padding: 5px;
    color: #898989;
}

/* タブ(基本) */
#EditorTabs .ui-state-default, 
#EditorTabs .ui-widget-content 
#EditorTabs .ui-state-default, 
#EditorTabs .ui-widget-header .ui-state-default,
#EditorTabs  .ui-button,
#EditorTabs  html .ui-button.ui-state-disabled:hover,
#EditorTabs  html .ui-button.ui-state-disabled:active {
    background: #efefef;
    border: 1px solid #898989;
    border-bottom: none;
    color: #efefef;
    font-weight: bold;
}

#EditorTabs .ui-state-default a, 
#EditorTabs .ui-state-default a:link,
#EditorTabs .ui-state-default a:visited,
#EditorTabs a.ui-button, 
#EditorTabs a:link.ui-button,
#EditorTabs a:visited.ui-button,
#EditorTabs .ui-button {
    color: #898989;
    text-decoration: none;
}


/* タブ(アクティブ) */
#EditorTabs .ui-tabs-active {
    background: #fefefe;
    margin-bottom: -1px;
    padding-bottom: 1px;
}

#EditorTabs .ui-state-active a,
#EditorTabs .ui-state-active a:link,
#EditorTabs .ui-state-active a:visited {
    color: #424242;
    text-decoration: none;
}

.already-attachments {
    background-color: inherit;
}

.control-attachments-item{
    border: none;
}
/* ------------------------------ */
/* 詳細 ここまで */
/* ------------------------------ */


/* ------------------------------ */
/* フッター周り */
/* ------------------------------ */
#Footer p a {
    display: none;
}
/* ------------------------------ */
/* フッター周り ここまで */
/* ------------------------------ */

/* ------------------------------ */
/* マテリアルっぽいカード */
/* ------------------------------ */
.material-card {
    background-color: #fefefe;
    color: #424242;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    margin: 2em;
    padding: 1em
}

/* ------------------------------ */
/* マテリアルっぽいボタン */
/* ------------------------------ */
.material-button {
    /*background-color: #1E88E5;*/
    background-image: linear-gradient(to top,#537895 0%, #003466 100%);
    border: none;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    color: #ffffff;
    display: block;
    font-size: 15px;
    margin: 1em;
    overflow: hidden;
    padding: 0.5em 1em;
    transition: 0.3s;
    text-align: center;
    width: 12em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

    .material-button:hover {
        box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
    }

.ripple {
    position: absolute;
    background: rgba(0,0,0,.25);
    border-radius: 100%;
    transform: scale(0.2);
    opacity: 0;
    pointer-events: none;
    -webkit-animation: ripple .75s ease-out;
    -moz-animation: ripple .75s ease-out;
    animation: ripple .75s ease-out;
}

@-webkit-keyframes ripple {
    from {
        opacity: 1;
    }

    to {
        transform: scale(2);
        opacity: 0;
    }
}

@-moz-keyframes ripple {
    from {
        opacity: 1;
    }

    to {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes ripple {
    from {
        opacity: 1;
    }

    to {
        transform: scale(2);
        opacity: 0;
    }
}
/* ------------------------------ */
/* マテリアルっぽいボタンここまで */
/* ------------------------------ */


#ssop-additionl .ssop-container {
    /* background-color: #01416f; */
    background-image: url("../images/SSOP/bg_ssop_2.jpg");
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    color: #ffffff;
    font-size: 1.3em;
    padding: 1em;
    /* justify-content: space-between; */
}

#ssop-additionl .ssop-logo img {
    height: 6em;
    width: auto;
}


#ssop-additionl .ssop-logo a {
    color : #ffffff;
    margin: 0.5rem 0 0 0;
}

#ssop-additionl .ssop-container .center {
    background-color: rgba(0,60,123,.45);
    margin: 0 3rem;
    padding: 1rem;
    width: 68rem;
}


#ssop-additionl .manhour-large {
    background-color: rgba(0,60,123,.45);
    color: #FFEB3B;
    height: 16rem;
    margin: 0.5rem 1rem 0 0;
    padding: 1rem;
    font-size: 2em;
    width: 20rem;
}

#ssop-additionl .manhour-small {
    background-color: rgba(0,60,123,.45);
    height: 5rem;
    margin: 0.5rem 1rem 0 0;
    padding: 1rem;
    font-size: 1em;
    width: 19rem;
}

#ssop-additionl .manhour-small .title {
    display: inline-block;
    font-size: 1.2em;
    width: 8rem;
}

#ssop-additionl .manhour-small .value {
    display: inline-block;
    text-align: right;
    width: 6rem;
    font-size: 2em;
    font-weight: bold;
}

#ssop-additionl #chart {
    height: 12rem;
}

#ssop-additionl .chart-wrapper {
    background-color: rgba(0,60,123,.45);
    margin: 0.5rem 1rem 0 0;
    padding: 2.5rem 0 0 0;
    position: relative;
}

#ssop-additionl .chart-title {
    color: #14D1BD;
    position: absolute;
    text-align: center;
    top: 41%;
    width: 100%;
}

#ssop-additionl .chart-title .chart-text{
    padding:0 0 0 0.8rem;
}
#ssop-additionl .chart-title .chart-text span{
    font-size: 1.2rem;
}

#ssop-additionl .chart-title .progress{
    margin: -0.8rem 0 0 0;
}

#ssop-additionl .chart-title .value{
    font-size: 4rem;
}
#ssop-additionl .chart-title .unit{
    font-size: 2rem;
    margin: 0 0 0 -0.5rem;
}

#ssop-additionl #monthly-wrapper {
    margin: 1rem 0;
    padding: 0%;
}

#ssop-additionl #monthly-wrapper .monthly-title {
    color: #696969;
    font-size: 2rem;
}

#ssop-additionl #monthly-wrapper .material-button {
    background-color: #1E88E5;
    background-image: none;
    font-size: 0.5rem;
    font-weight: normal;
}


#ssop-additionl #monthly-wrapper .monthly-table {
    background-color: #ffffff;
    width: 100%;
}

#ssop-additionl #monthly-wrapper .monthly-table td {
    border: solid 1px #dedede;
    font-size: 1.4em;
    padding: 0.5em;
    text-align: right;
}

#ssop-additionl #monthly-wrapper .monthly-table .header-row {
    background-color: #1E88E5;
    border: solid 1px #dedede;
    color: #fefefe;
    font-size: 1.1em;
    padding: 0.5em;
    text-align: right;
}

#ssop-additionl #monthly-wrapper .monthly-table .header-row span,
#ssop-additionl #monthly-wrapper .monthly-table tr:last-child td,
#ssop-additionl #monthly-wrapper .monthly-table td:last-child {
    font-weight: bold;
}



#ssop-additionl .text-largest {
    font-size: 4.5em;
    font-weight: bold;
}

#ssop-additionl .text-larger {
    font-size: 2.5em;
    font-weight: bold;
}

#ssop-additionl .flex-container {
    display: flex;
}

#ssop-additionl .flex-wrap {
    flex-wrap: wrap;
}

#ssop-additionl .ssop-container .period-wrapper {
    font-size: 1.2em;
    margin: 1rem 0 0 0;
}

#ssop-additionl .select-wrapper {
    color: #424242;
    font-size: 1.2rem;
    margin: 0 1rem 0 0.2rem;
}

#ssop-additionl .period {
    margin: 0 1rem 0 0.5rem;
}


#ssop-additionl .constract-box {
    margin: 0 0 0 1rem;
}

#ssop-additionl .program-box {
    position: relative;
    text-align: center;
    width: 22%;
}

#ssop-additionl div:first-child[class^="color-"] {
    height: 4.61rem;
    top: 0;
    left: 0;
    position: absolute;
    width: 1rem;
    background-color: #a5d6a7;
}
#ssop-additionl .program-box .program-logo {
    border-bottom: solid 1px #a5d6a7;
}

#ssop-additionl .program-box div:first-child.color-BPSTM {
    background-color: #90caf9;
}
#ssop-additionl .program-box .program-logo.color-BPSTM {
    border-bottom: solid 1px #90caf9;
}

#ssop-additionl .program-box div:first-child.color-FlareLoss {
    background-color: #ff8a65;;
}
#ssop-additionl .program-box .program-logo.color-FlareLoss {
    border-bottom: solid 1px #ff8a65;
}

#ssop-additionl .program-box div:first-child.color-SonicMan {
    background-color: #ffe082;
}
#ssop-additionl .program-box .program-logo.color-SonicMan {
    border-bottom: solid 1px #ffe082;
}

#ssop-additionl .program-box .program-logo span  {
    font-size: 3rem;
    font-weight: bold;
    color: #003466;
}

#ssop-additionl .program-box .man-hour {
    margin: 1rem 0 0 0 ;
}

#ssop-additionl .program-box .man-hour div{
    width: 50%;
}

#ssop-additionl .program-box .man-hour div:first-child{
    text-align: right;
}

#ssop-additionl .program-box .man-hour div:last-child{
    text-align: left;
    margin: 0 0 0 1em;
}


#ssop-additionl .program-box .title {
    font-size: 1.5em;
}

#ssop-additionl .program-box .value {
    font-size: 2em;
    font-weight: bold;
}


#ssop-additionl .program-box .material-button {
    margin: 1em auto 0.2em;
    padding: 0.6em;
    width: 16em;
}

#ssop-additionl .program-box .text-larger {
    font-size: 2em;
    font-weight: inherit;
}

#ssop-additionl .program-box .description {
    color: #898989;
    font-size: 1.2em;
    margin: 0 1em;
}