@charset 'UTF-8';
@import "roots.css";
/* 2005年8月、バージョンアップにより新採用したスタイルシート */
html {
    font-size: 62.5%;
    overflow-y:scroll;
}

body {
    margin: 0px;
    background: var(--white-color);
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
    box-sizing: border-box;
    position: relative; /* for asolute配置のため */
    min-height: 100vh; /* bodyが画面全体を占めるように */
    min-width: 100vh;
    width: 100%;
    height: 100%;
    font-size: 1.3rem;
    letter-spacing: 0.05rem;
}

div , td , th , pre {
    color: var(--text-default);
}

form , p {
    margin:0px;
    padding:0px;
}

input, select, textarea, button {
    margin: 0;
    cursor: pointer;
    font-size: 1.3rem;
}

span {
    color:#ff0000;
    font-weight:bold;
}

span.btn {
    color: var(--gray-color-800) !important;
    font-weight: bold;
}

textarea {
    font-size: 1.3rem;
    padding: 1px;
}

/* clearfixの設定-------------------------------------------------- */
/* モダンブラウザ（Firefox Opera Safari）対策 */
.clearfix:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}

/* Win版IE7とMac版IE5対策 */
.clearfix{
    display: inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac ¥*/
* html .clearfix{
    height:1px;
}

.clearfix{
    display:block;
}

/* End hide from IE-mac */
input.login-outline {
    border-style: solid;
    border-color: var(--gray-color-800);
    border-width: 1px;
    background-color: var(--white-color);
    width: 80px;
    height: 20px;
}

h1 {
    color: var(--gray-color-800);
    font-size: 1.3rem;
    font-weight: normal;
    vertical-align: bottom;
    margin:0px;
    padding:1px;
    text-align:left;
}

h3 {
    color: var(--blue-color-600);
    font-size: 1.6rem;
    padding: 10px;
    text-align: left;
    /*     font-family: verdana, osaka, sans-serif; */
    background-color: var(--blue-color-50);
    margin: 0px;
}

ol {
    line-height: 150%;
}

/* リンク */
/* #TB_ajaxContentがないとiframeのaタグ（宛先一覧を表示)などが灰色になる */
a, a:visited,
#TB_window #TB_ajaxContent a,
#TB_window #TB_ajaxContent a:visited {
    color: var(--blue-color-500);
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

img { border: none; }


/* header */
header {
    /* border-bottom: 1px solid #e0e5e9; */
    /* box-shadow: #e0e5e9 0px 1px 2px; */
}

.container__wide {
    max-width: 1200px;
}

.content__center {
    margin: 1.3em auto;
    text-align: center;
}

.app-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    flex-wrap: wrap;
}

.logo_link a, .logo_link img.logo_no_link {
    display: flex;
    align-items: center;
    height: var(--header-height);
}

.logo_link a img {
    flex: 1;
    height: 100%;
    max-height: 100%;
}

.app-header__links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    margin-right: 20px;
}

.app-header__icon {
    vertical-align: middle;
    width: 20px !important;
    height: 20px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    font-size: 1.5em;
    color: var(--blue-color-300);
}

.app-header__link {
    white-space: nowrap;
}

.app-header__links a span {
    white-space: nowrap;
    color: var(--blue-color-600);
    font-weight: normal;
}


.app-header__link:hover {
    text-decoration: underline;
}

.app-header__icon {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}
.app-header-nav__lang {
    padding: 10px;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.app-header-nav__lang ul {
    display: flex;
    padding: 0;
    margin: 0px;
}

.app-header-nav__lang a {
    border: 0;
    color: var(--gray-color-800);
    text-decoration: underline;
    white-space: nowrap;
}

.app-header-nav__lang ul li {
    margin: 0px;
    padding: 0px 8px 0px 8px;
    list-style-type: none;
    border-right: 1px var(--gray-color-800) solid;
}

.app-header-nav__lang ul li.first {
    border-left: 1px var(--gray-color-800) solid;
}

.app-header-nav__close {
    margin-right: 20px;
}


.app-nav {
    height: 60px;
    background: url(../images/sysmenu_back.gif) repeat-x;
    min-width: 100vh;
}

.app-nav__list {
    display: flex;
    padding-left: 11px;
    margin: 0px;
    justify-content: space-between; /* 左項目と右項目を両端に配置 */
    align-items: center;
    list-style: none;
}

.app-nav__list-item {
    list-style-type: none;
    position: relative;
}

.app-nav__list-item a {
    width: 80px;
    height: 54px;
    display: block;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

/* Top */
.app-nav__list-item.-top a {
    border-left: 1px solid var(--gray-color-200);
    background: var(--bg-top) no-repeat;
}
.app-nav__list-item.-top-on a {
    border-left: 1px solid var(--gray-color-200);
    background: var(--bg-top-on) no-repeat;
}
.app-nav__list-item.-top a:hover {
    background: var(--bg-top-over) no-repeat;
}

/* 引取り（収集） */
.app-nav__list-item.-collecting a {
    background-image: var(--bg-collecting);
}
.app-nav__list-item.-collecting-on a {
    background-image: var(--bg-collecting-on);
}
.app-nav__list-item.-collecting a:hover {
    background-image: var(--bg-collecting-over);
}

/* 一斉配信 */
.app-nav__list-item.-delivery a {
    width: 81px;
    background-image: var(--bg-delivery);
}
.app-nav__list-item.-delivery-on a {
    width: 81px;
    background-image: var(--bg-delivery-on);
}
.app-nav__list-item.-delivery a:hover {
    background-image: var(--bg-delivery-over);
}

/* 一斉収集 */
.app-nav__list-item.-gathering a {
    width: 81px;
    background-image: var(--bg-gathering);
}
.app-nav__list-item.-gathering-on a {
    width: 81px;
    background-image: var(--bg-gathering-on);
}
.app-nav__list-item.-gathering a:hover {
    background-image: var(--bg-gathering-over);
}

/* 待機メール一覧 */
.app-nav__list-item.-waitemail a {
    background-image: var(--bg-waitemail);
}
.app-nav__list-item.-waitemail-on a {
    background-image: var(--bg-waitemail-on);
}
.app-nav__list-item.-waitemail a:hover {
    background-image: var(--bg-waitemail-over);
}

/* アドレス帳 */
.app-nav__list-item.-address a {
    background-image: var(--bg-address);
}
.app-nav__list-item.-address-on a {
    background-image: var(--bg-address-on);
}
.app-nav__list-item.-address a:hover {
    background-image: var(--bg-address-over);
}

/* 上長承認 */
.app-nav__list-item.-superior a {
    background-image: var(--bg-superior);
}
.app-nav__list-item.-superior-on a {
    background-image: var(--bg-superior-on);
}
.app-nav__list-item.-superior a:hover {
    background-image: var(--bg-superior-over);
}

/* 履歴 */
.app-nav__list-item.-log a {
    background-image: var(--bg-log);
}
.app-nav__list-item.-log-on a {
    background-image: var(--bg-log-on);
}
.app-nav__list-item.-log a:hover {
    background-image: var(--bg-log-over);
}

/* 設定 */
.app-nav__list-item.-config a {
    background-image: var(--bg-config);
}
.app-nav__list-item.-config-on a {
    background-image: var(--bg-config-on);
}
.app-nav__list-item.-config a:hover {
    background-image: var(--bg-config-over);
}


/* ユーザーメニュー */
.app-nav__list-item--user {
    margin-left: auto;
    margin-right: 20px;
}

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background-color: rgb(238 238 238 / 0);
    border-radius: 4px;
    cursor: pointer;
    color: var(--gray-color-800);
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.user-menu__trigger small {
    color: var(--gray-color-500);
}

.user-menu__trigger:hover {
    background-color: #eee;
}

.user-icon {
    margin-right: 6px;
    stroke: var(--gray-color-500);
}

/* ドロップダウン */
.user-menu__dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0px;
    padding:0px;
    color: var(--gray-color-800);
    background-color: var(--white-color);
    border: 1px solid var(--gray-color-100);
    border-radius: 4px;
    min-width: 150px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10;
}

.user-menu__dropdown li {
    list-style: none;
}

.user-menu__dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: var(--gray-color-800);
    width: auto;
    height: auto;
    text-indent: 0px;
}

.user-menu__dropdown li a:hover {
    background-color: var(--gray-color-50);
}

/* Hover時に表示（スライドダウン風） */
.user-menu:hover .user-menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* mainタグで中央寄せと最小高さを管理 */
main {
    display: flex;
    flex-direction: column; /* ★子要素を縦に並べる */
    justify-content: flex-start; /* 上部寄せ */
    align-items: center; /* ★水平方向の中央寄せ */
}

/* login */
.login-container {
    background-color: var(--blue-color-50); /* 青背景に変更 */
    border: 1px solid var(--blue-color-200);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    text-align: center;
}

.login-header {
    max-width: 500px;
    box-sizing: border-box;
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--gray-color-800);
    margin: 20px 0;
    text-align: left;
}

/* 認証ボタンと入力フォームのコンテナ */
.main-content {
    display: flex;
    flex-direction: column; /* デフォルトは縦並び */
    gap: 30px; /* 要素間のスペース */
    margin-bottom: 30px;
}

.auth-buttons {
    display: flex;
    flex-direction: column; /* ★SAMLとGoogleボタンを縦並びに変更 */
    gap: 30px; /* ボタン間のスペース */
    margin-bottom: 25px;
}

hr.login-separator {
    height: 1px;
    border: none;
    border-top: 1px solid var(--blue-color-500);
    width: 100%;
}

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* 幅を100%にする */
    padding: 12px 10px;
    border: none;
    border-radius: 5px;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
    margin-top: 2.0rem;
}

/* google ボタン
 URL : https://developers.google.com/identity/branding-guidelines?hl=ja
*/
.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: var(--white-color);
    background-image: none;
    border: 1px solid var(--gray-color-400);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 500px;
    min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    font-size: 1.6rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    color: var(--text-default) !important;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: var(--gray-color-100);
    border-color: var(--gray-color-900);
    text-decoration: none;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: var(--gray-color-800);
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    text-decoration: none;
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: var(--gray-color-800);
    opacity: 8%;
}

.login-border {
    border-bottom: solid 1px var(--gray-color-100);
}

/*SSO認証ボタン*/
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: url("../script/yui/fonts/Roboto-normal-700.woff") format("woff");
    unicode-range: U+0-10FFFF;
}


.login-container fieldset {
    border: none;
    padding-block: 0.35em 0.625em;
    padding-inline: 0.75em;
    margin: 0;
    text-align: left;
}

legend {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--gray-color-800);
    padding: 0;
}

.input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-color-200);
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--white-color);
}

.input-wrapper input {
    flex-grow: 1;
    border: none;
    padding: 10px 12px;
    font-size: 1.6rem;
    outline: none;
    box-sizing: border-box;
    background-color: transparent;
}

.login-submit-button {
    background-color: var(--blue-color-900);
    color: var(--white-color);
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    box-sizing: border-box;
}

.login-submit-button:hover {
    background-color: var(--blue-color-1000);
}

.forgot-password {
    text-align: left;
    padding: 0.5em 0 0.5em 0;
}

.forgot-password a:hover { text-decoration: underline; }

.version-info {
    color: var(--gray-color-500);
    text-align: center;
}

/* news */
#news {
    margin: 40px auto 20px auto;
    padding: 3px 20px;
    min-width: 500px;
}

.news__title {
    border-bottom: 1px solid var(--gray-color-100);
    padding-bottom: 0.7em;
}
.news__items {
    padding: 0px;
    line-height: 2em;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    body { min-width: auto; }
    main { padding: 20px 0 0 0; }

    .app-header__inner { height: auto; }
    .app-header__links a span { display: none; }

    .login-container {
        padding: 20px;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    .login-header {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .auth-buttons {
        flex-direction: column; /* スマホでも縦並びを維持 */
        gap: 20px;
        margin-bottom: 0px;
    }

    .login-button {
        padding: 10px 15px;
        font-size: 15px;
        width: 100%; /* スマホでも幅を100%にする */
    }

    .input-wrapper input {
        font-size: 15px;
        padding: 8px 10px;
    }

    .forgot-password {
        margin-top: 20px;
    }

    .version-info {
        left: 20px;
        bottom: 10px;
    }
    #news {
        min-width: auto;
        overflow-x: scroll;
    }
}

#menuinfo {
    color:var(--white-color);
    vertical-align: middle;
    padding-left:10px;
    padding-right:10px;
}


#contents {
    padding:10px;
}

/* content */
.content {
    padding:10px;
    text-align: left;
    background-color:var(--white-color);
}

/* logo-nouserのとき */
.content-dlf {
    padding:10px;
    text-align: left;
    background-color:var(--white-color);
    width:auto;
}

/* エラーメッセージ:ウイルスチェック用 */
.virus-error {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: var(--red-color-500) url(../images/bg-virus-error.png) no-repeat 15px center;
    color: var(--white-color);
    padding: 15px;
    margin-top: 20px;
}

.virus-error h2 {
   margin: 0px 0px 10px 100px !important;
   padding: 0px !important;
   color: var(--white-color);
   font-size: 1.6rem;
   letter-spacing: 0.2em;
   font-weight: bold;
}

.virus-error p {
   margin:0px 0px 0px 100px !important;
}

/* ページの目次 */
div.subtitle {
  font-size: small;
  color: var(--white-color);
  padding: 3px 0px 3px 10px;
  background-color: #6699CC;
  font-weight: bold;
  width:auto;
  _zoom:1;
}

h2 {
    font-size: 20px;
    color: var(--blue-color-600);
    width: auto;
    padding: 3px 0px 3px 10px;
    margin: 0px 0px 5px 0px;
    vertical-align:middle;
    font-weight: bold;
/*     font-family: verdana, osaka, sans-serif; */
}

h2.subtitle {
    font-size: 1em;
    color: var(--white-color);
    width: auto;
    padding: 3px 0px 3px 10px;
    margin: 0px 0px 0px 0px;
    height: 20px;
    vertical-align: middle;
    background: url(../images/subtitle_back.gif) no-repeat ;
    font-weight: bold;
/*     font-family: verdana, osaka, sans-serif; */
}


div.subline {
    width: 100%;
    padding: 3px 0px 3px 0px;
    background-color: #CEE4F9;
    font-weight: normal;
}

div.subsub {
    color: var(--blue-color-600);
    width: auto;
    padding: 3px 0px 3px 10px;
    background-color:  var(--blue-color-50);
    font-weight: bold;
}


/* 目次以下の説明 */
.explanation {
  margin: 5px 10px 5px 10px;
  line-height: 120%;
}

/* メンテナンス用 */
.mainte {
  font-size: 12px;
  color: var(--gray-color-800);
  width: auto;
  margin: 10px 0px 10px 0px;
  padding: 3px 0px 3px 10px;
  background-color: #ffffbb;
  font-weight: bold;
  border:1px #ff9900 solid;
}


/* configの説明 */
.config {
  margin: 5px 10px 5px 20px;
  line-height: 135%;
}



/* フッター */
#footmenu {
    height: 25px;
    background: url(../images/footmenu_back.gif) repeat-x;
}

#footer {
    font-size: 10px;
    color: #666666;
    padding-top: 5px;
    line-height: 125%;
}

#footer a:link{
    color: #666666;
    text-decoration: none;
}

#footer a:visited {
    color: #666666;
    text-decoration: none;
}

#footer a:hover {
    color: var(--gray-color-800);
    text-decoration: underline;
}


/* icon */
.preview-icon {
    height: 16px;
    cursor: pointer;
}

.icon-spacer {
    width: 20px;
    height: 16px;
}

/* folder table */

div.folderline {
    width: 100%;
    padding: 0px 0px 0px 0px;
    background-color: #99CCFF;
    font-weight: normal;
    color: var(--white-color);
}

div.searchline {
    width: 100%;
    padding: 0px 0px 0px 0px;
    background-color: #dddddd;
    font-weight: normal;
}

#folder {
    background-color:  var(--gray-color-50);
    width: 150px;
    min-width: 150px;
}

#folder div {
    padding: 0px;
    margin-top: 0;
}

#folder .open {
    background-color: #99CCFF;
    margin-top: 0;
}

#folder .top {

}

#folder img {
    margin: 2px;
    vertical-align: middle;
    padding-bottom: 0px;
}

#folder a {
    text-decoration: none;
    color: var(--gray-color-800);
}

.folder-item:hover {
    background-color: var(--gray-color-100);
    border-radius: 0.5rem;
}

/* ファイル一覧フォルダツリースクロールバー */
.folder-scroll {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: auto;
    width: 275px;
    height: auto;
    max-height: 300px;
}

.folder-scroll.parsonal-folder {
    max-height: 400px;
}

.folder-width {
  max-width: 150px;
  min-width: 150px;
}

.folder-open {
    width: 100%;
}

.folder-title {
    font-size: 1.0rem;
    background-color: var(--gray-color-100);
    padding: 2px 5px !important;
}

/* addresslist */
ul.addresslist{
    list-style:none;
    margin: 0px;
    padding: 6px 0px 2px 5px;
    font-size: 100%;
    border-bottom: dotted 1px var(--white-color);
}

ul.addresslist li{
    display: inline;
}

.addr_select{
    background: url(../images/icon_addr.gif) no-repeat #abcdef left top;
    padding-left: 12px !important;
    width: 140px;
}

/* filelist */
#filelist {
    width: 100%;
    background-color: var(--gray-color-100);
}

#filelist a:hover { text-decoration: none; }

#filelist tr {
    vertical-align: top;
}

#filelist td {
    padding: 5px 3px;
}

#filelist td.mini {
    font-size: 1.1rem;
}

#filelist td.middle {
    font-size: 1.2rem;
}

#filelist div.memo {
    font-size: 1.0rem;
    color: var(--gray-color-900);
    line-height: 120%;
    margin: 0px 2px 0px 5px;
    padding: 0px;
}


#filelist td.btn {
    padding: 1px 3px 1px 3px;
    white-space: nowrap;
}

#filelist table .btn input[type="image"] {
    display: block;
}

#filelist table .btn a img {
    display: block;
}

#filelist tr.odd {
    background-color: var(--gray-color-50);
}

#filelist tr.even {
    background-color: var(--white-color);
}
#filelist tr.lock {
    background-color: var(--red-color-50);
}

.lock-user { color: var(--text-danger); }

#filelist th {
    background-color: var(--gray-color-100);
    font-weight: bold;
    white-space: nowrap;
    padding: 10px 3px;
    font-size: 1.3rem;
}

#filelist a.detail {
    padding: 2px;
}

#filelist a.alert{
    margin-left: 2px;
    margin-right: 2px;
    font-weight: bold;
    color: var(--text-danger);
}

#filelist a.detail:hover {
    padding: 2px;
}


/* data */
.form-container { width: 900px; }

#data {
    background-color: var(--white-color);
    width: 100%;
    font-size: 1.3rem;
}

#data td {
    padding: 0.8rem 0.5rem;
    width: 80%;
}

#data tr {
    background-color: var(--gray-color-50);
    border-bottom: 1px var(--white-color) solid;
}

#data td.mini {
    font-size: 9px;
}

#data td.mono {
    font-family: monospace;
}

#data td.btn {
    padding: 1px 0px 1px 0px;
}

#data tr.odd {
    background-color: var(--gray-color-100);
}

#data tr.even {
    background-color: var(--white-color);
}

#data th {
    background-color: var(--gray-color-100);
    font-weight: normal;
    white-space: nowrap;
    padding: 1.1rem 1.5rem;
    width: 20%;
    text-align: left;
}

/*linkがないとiframeのaタグ（宛先一覧を表示など)が灰色になる*/
#data a,
#data a:link {
    padding: 2px;
    color: var(--blue-color-500);
    font-weight: bold;
}

#data a.alert{
    margin-left: 2px;
    margin-right: 2px;
    font-weight: bold;
    color: var(--text-danger);
}

#data a:hover {
    text-decoration: none;
}

#data td input,
#data td input[type="password"],
#data td select {
    padding: 0.3rem 0.5rem;
    font-size: 1.3rem;
}

/* fontの都合で日本語だけボタンの上下paddingを狭める */
html[lang="ja"] #data td > input[type='button'] {
    padding: 0.3rem 0.5rem;
}

#data td > hr { margin: 0.8rem 0; }

#data td > input[name="subject"],
#data td > textarea[name="cont"],
#data td > textarea[name="body"] {
    width: 96%;
    padding: 0.5rem;
}

#data td > input[name="autocomptext"] {
    width: 0px;
    height: 1px;
    padding: 0;
    margin: 0;
}


/* メール作成画面などのフォーム用 */
.formTable {
    background-color: var(--white-color);
    border-spacing :1px;
    width: 100%;
}

.formTable tr {
    background-color: #eeeeee;
    border-bottom: 1px #cccccc solid;
}

.formTable th {
    background-color: #dddddd;
    font-weight: bold;
    white-space: nowrap;
    padding: 4px 15px 4px 15px;
    width: 25%;
}

.formTable td {
    padding: 5px 5px 5px 5px;
    width: 75%;
}

/* report */
#report {
    background-color: var(--white-color);
    font-size: 10px;
}

#report td {
    padding: 1px 1px 1px 1px;
}

#report tr.odd {
    background-color: #eeeeee;
}

#report tr.even {
    background-color:var(--white-color);
}

#report th {
    background-color: #dddddd;
    font-weight: bold;
    white-space: nowrap;
    padding: 1px 15px 1px 15px;
}



table.list-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.0rem 0;
}


table.list-table th { background-color: var(--gray-color-50); }

table.list-table th, table.list-table td {
    padding: 1.0rem;
    white-space: nowrap;
}

table.list-table tr {
    border-bottom: solid 1px var(--gray-color-100);
    border-top: solid 1px var(--gray-color-100);
}

form p {
  margin: 10px 20px 10px 20px;
}

/*フォルダタイトル*/
.title-bg {
    background-color: var(--blue-color-50);
    margin-top: 7px;
    padding: 5px 5px;
}

/*フォルダパス*/
.folder-path {
    width: 99%;
    color : var(--gray-color-500);
}

/* カレントフォルダ名 */
.current-folder-name {
    white-space: nowrap;
    font-weight: bold;
    font-size: 1.6em;
}
.current-folder-name img {
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.thumset {
    padding-top:5px;
    white-space: nowrap;
    font-size: x-small;
}

/* 赤文字 */
.err_title {
    font-size:16px;
    color: var(--text-danger);
    font-weight: bold;
    margin: 15px 10px 15px 10px;
}

.err_msg {
    color: var(--text-danger);
    font-weight: bold;
}

.alert {
    color: var(--text-danger);
    font-weight: bold;
}

.cap {
    font-size: 9px;
}

/*パンくず*/
#pan {
    font-size:11px;
}

#pan a:link{
    color: var(--gray-color-800);
    text-decoration: none;
}

#pan a:visited {
    color: var(--gray-color-800);
    text-decoration: none;
}

#pan a:hover {
    color: var(--text-danger);
    text-decoration: underline;
}

/* メール送信フォーム */
table.mailaddr {
    border: none ;
    margin-bottom: 20px;
}

table.mailaddr th {
    font-size: 0.85em;
    vertical-align: bottom;
    padding-top: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
}


button {
    line-height: 1.2em;
}

span.alert {
    margin-left: 2px;
    margin-right: 2px;
    font-weight: bold;
    color: var(--text-danger);
}

li.privacy {
    line-height: 1.8em;
}

li.privacy > div {
    color: #ff9900;
    font-size: large;
    margin-top: 20px;
}

b.alert {
    font-weight: bold;
    color: var(--text-danger);
}

.form-grou a{
  text-decoration: none;
}

.button-parent clearfix{
  height: 41.99px;
  width: 319.01px;
}

.button-text{
  color: var(--white-color);
}

.button-text:hover{
  text-decoration: underline;
}

ul.img{
    margin: 10px 0px 3px 0px;
    padding: 0px;
}

ul.img li {
    background: url(../images/ico-list.gif) left 4px var(--white-color) no-repeat scroll;
    margin: 1px 0px 1px 5px;
    list-style: none inside none;
    line-height: 150%;
    padding-left: 13px;
    _padding-left: 0px;

}

ul.img li a { text-decoration: none; }

*html ul.img li a{ padding-left: -10px; }

ul.news {
  height: auto;
  margin: 10px 0 0 0;
  padding: 0 0 10px 0;
  list-style-type: none;
}

li.news-list {
  line-height:140%;
  font-size: 100%;
  font-weight: bold;
  margin-left: 0px;
  text-decoration: none;
}

/*ファイル検索時のtextbox-enter制御*/
form input.nonesubmit {
    border: none;
    font-size: 0px;
    display: block;
    width: 0px;
    height: 0px;
    visibility: hidden;
}

/*  メール再送メッセージ用corner */
.re_send_confilmation {
    margin: 10px;
    padding: 5px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: #bee6d6;
    color: #238252;
    border :#84C98B 1px solid;
    font-size: small;
}

/*  エラーメッセージcorner */
.action_err {
    margin: 10px 0px;
    padding: 1.1rem;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: var(--red-color-50);
    color: var(--text-danger);
    border: var(--red-color-300) 1px solid;
    font-size: small;
}

.alert__warning {
    margin: 10px;
    padding: 14px;
    -moz-border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    background-color: var(--yellow-color-50);
    color: var(--yellow-color-700);
    border: var(--yellow-color-300) 1px solid;
    font-size: small;
}

.alert_title {
    font-weight: bold;
}

.alert_title img {
    height: 16px;
    vertical-align: middle;
}

.action_err img {
    vertical-align: middle;
}

.drag-ng .drag-icon {
    background-image: url(../images/drag_ng.gif);
}

.drag-ok .drag-icon {
    background-image: url(../images/drag_ok.gif);
}

.drag-cover {
    background-color: white;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    opacity: 0.85;
}

.drag-icon {
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 16px;
    height: 16px;
    left: 3px;
    position: absolute;
    top: 4px;
    z-index: 100;
}
.download-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    cursor: pointer;
}
/*ダウンロードアイコンをホバーした際に青色に変更する*/
.download-icon:hover {
    filter: invert(47%) sepia(30%) saturate(1187%) hue-rotate(176deg) brightness(93%) contrast(92%);
}

.drag-ghost {
    white-space: nowrap;
    color: #0000FF;
    margin: 3px 3px 0px 20px;
}

.drag-hover {
    background-color: #CEF9CF;
    display: block;
}

.drag-hover2 {
    background-color: #f3e3c1;
    display: block;
}

#data a.blue-normal,
.blue-normal {
    font-weight: normal;
    color: #0066CC;
}
.black-normal {
    font-weight: normal;
    color: var(--gray-color-800);
}
.black-strong {
    font-weight: bold;
    color: var(--gray-color-800);
}

/* ファイル通知情報タブ */
.select-distribution ul {
    margin: 0px;
    padding: 0px;
    float: left;
}

.select-distribution ul li {
    display: block;
    float: left;
    padding: 5px 0px 2px 0px !important;
    margin: 0px;
}

.select-distribution li a {
    padding: 5px 10px !important;
    background: url(../images/bg-tab.gif) top left repeat-x;
    border-right: #ccc 1px solid;
    border-left: #ccc 1px solid;
    margin: 0px !important;
    text-decoration:none;
    color:#494949;
}
.select-distribution a.dist-active {
    padding: 5px 10px !important;
    background:url(../images/bg-tabactive.gif) top left repeat-x;
    margin:0px !important;
    border-right:#ccc 1px solid;
    border-left:#ccc 1px solid;
    text-decoration:none;
    font-weight:bold;
    color:#494949;
}
.select-distribution li a:link {
    color:#272727;
}
.select-distribution li a:visited {
    color:#272727;
}
.select-distribution li a:hover {
    color:#CC0000;
}

div.back-button {
    margin:50px 20px 20px 20px !important;
}

/* アドレス帳miniwindow */
table.address-table-mini {
  border-collapse: collapse;
}

table.address-table-mini h3 {
    font-size: 100%;
    margin:5px 0px 5px 0px !important;
}

.address-complete {
    margin: 10px auto 5px auto;
    text-align: center;
    padding:10px;
    background-color: var(--blue-color-50);
}

.closeButton {
    margin: 10px auto 5px auto;
    text-align: left;
    padding:5px 5px 5px 15px;
    background-color: var(--gray-color-50);
}

.addrs {
    height: 75px;
    border: #CECECE 1px solid;
    overflow: auto;
    padding: 5px;
    text-align: left;
    white-space: nowrap;
    width: 200px;
    display: flex;
    flex-direction: column;
}

/* アドレス帳一覧 */
.addresslist {
    background-color: #99ccff;
    padding: 10px;
}

#grouplist ul {
   list-style: none none outside;
   margin:0px;
   padding:0px;
}

#grouplist ul li {
   margin:0px;
   padding:0px;
   LINE-HEIGHT: 11pt;
}

a.abutton {
    background:url(../images/bg-abutton.gif) repeat-x 0 0;
    margin: 5px 5px 0px 5px;
    padding:3px;
    border: #cccccc 1px solid;
    text-align: center;
    color:#444444 !important;
    width:180px;
    text-decoration:none !important;
}

a.abutton:hover {
    background:url(../images/bg-abutton-hover.gif) repeat-x 0 0;
    margin: 5px 5px 0px 5px;
    padding:3px;
    border: #ccbbbb 1px solid;
    text-align: center;
    color:#3f2e2e !important;
    text-decoration:none !important;
}

a.abutton:link, a.abutton:active {
    color:#444444;
    text-decoration:none !important;
}

#groupAddArea {
    display: none;
}

.groupAddArea {
    display: none;
}

#inputAddrArea {
    margin-bottom: 10px;
    display:none;
}

#inputAddrArea p {
    padding: 5px;
    border: #cccccc 1px solid;
    background: url(../images/bg-abutton.gif) repeat-x 0 0;
}

#inputAddrArea .tableOut {
    background: #f0f0f0 url(../images/bg-abutton.gif) repeat-x 0 0;
    padding-bottom: 10px;
    border-bottom: #cccccc 1px solid;
    border-right: #cccccc 1px solid;
    border-left: #cccccc 1px solid;
}

#inputAddrArea table {
    width: 100%;
}

#inputAddrArea table th {
    border-right: #cccccc 1px solid;
    border-top: var(--white-color) 1px solid;
    border-left: var(--white-color) 1px solid;
    text-align: right;
    padding: 3px;
    background: #f9f9f9 url(../images/bg-input-th.gif) repeat-x bottom left;
    color: var(--gray-color-800);
    font-weight: normal;
    white-space: nowrap;
}

#inputAddrArea table td {
    border-right: #cccccc 1px solid;
    border-top: var(--white-color) 1px solid;
    border-left: var(--white-color) 1px solid;
    padding: 3px;
    background: #f9f9f9 url(../images/bg-input-th.gif) repeat-x bottom left;
}

.editAddrBtn, .addAddrBtn {
    display: none;
    margin-top: 5px;
    text-align: center;
    background-color: #F0F0F0;
}

#addPowerArea {
    margin-bottom: 10px;
    display: none;
}

#addPowerArea p {
    padding: 5px;
    border: #cccccc 1px solid;
    background: url(../images/bg-abutton.gif) repeat-x 0 0;
}

#addPowerArea .tableOut {
    background: #f0f0f0 url(../images/bg-abutton.gif) repeat-x 0 0;
    padding-bottom: 10px;
    border-bottom: #cccccc 1px solid;
    border-right: #cccccc 1px solid;
    border-left: #cccccc 1px solid;
}

#inputPowerArea {
    margin-bottom: 10px;
    display:none;
}

#inputPowerArea p {
    padding: 5px;
    border: #cccccc 1px solid;
    background: url(../images/bg-abutton.gif) repeat-x 0 0;
}

#inputPowerArea .tableOut {
    background: #f0f0f0 url(../images/bg-abutton.gif) repeat-x 0 0;
    padding-bottom: 10px;
    border-bottom: #cccccc 1px solid;
    border-right: #cccccc 1px solid;
    border-left: #cccccc 1px solid;
}

#inputPowerArea table {
    width: 100%;
}

#inputPowerArea table th {
    border-right: #cccccc 1px solid;
    border-top: var(--white-color) 1px solid;
    border-left: var(--white-color) 1px solid;
    text-align: left;
    padding: 3px;
    background: #f9f9f9 url(../images/bg-input-th.gif) repeat-x bottom left;
    color: var(--gray-color-800);
    font-weight: normal;
    white-space: nowrap;
}

#inputPowerArea table td {
    border-right: #cccccc 1px solid;
    border-top: var(--white-color) 1px solid;
    border-left: var(--white-color) 1px solid;
    padding: 3px;
/*    background: #f9f9f9 url(../images/bg-input-th.gif) repeat-x bottom left; */
    background: var(--white-color);
}

input.w98-p { width: 98%; }

/* uploaderダウンロードのテーブル */
table.uploader-dl td {
    padding: 5px;
}

table.uploader-dl h3 {
    font-size: 100%;
}

table.uploader-dl h4 {
    color: var(--gray-color-800);
    padding: 0px;
    margin: 10px 0px 0px 0px;
}

table.uploader-dl p {
    margin: 0px;
    padding: 0px;
}

table.uploader-dl ul {
    font-size: x-small;
    margin:0px 0 0 10px;
    padding:0px;
    list-style: disc inside;
}

table.uploader-dl ul li {
    margin:0px;
    padding:0px;
    list-style: disc inside;
}

table.filelist {
    border-collapse: collapse;
    white-space: nowrap;
}

table.filelist th {
    border: 1px solid var(--white-color);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 3px !important;
}

table.filelist td {
    border: 1px solid var(--white-color);
    vertical-align: middle;
    white-space: nowrap;
}

.tag-list {
    padding : 5px;
    margin: 5px;
    background: var(--white-color);
    border: 1px solid #CCC;
}

.tag-list a ,.tag-list a:link {
    font-size: 0.9em;
    text-decoration: underline !important;
    font-weight: normal !important;
}

.selectGroup {
  font-size: 0.9em;
  margin: 10px 30px 10px 30px;
}

.group-list{
    margin-top: 5px;
    margin-bottom: 5px;
}
.group-name {
    font-size: 0.8em;
    margin: 0px 10px 0px 0px;
    padding: 4px;
    color: var(--white-color);
    background: #777777;
    font-weight: lighter !important;
}

table.detail-list {
    border-collapse: collapse;
    margin: 10px;
}

table.detail-table th {
    padding:5px;
    white-space: nowrap;
    background-color: #58c6bd;
    color: var(--white-color);
    border-top: #d4dfde solid 1px;
    border-left: #d4dfde solid 1px;
    border-bottom: #e9faf9 solid 1px;
    border-right: #e9faf9 solid 1px;
}

table.detail-table td {
    padding:5px;
    white-space: nowrap;
    background-color: #e9f3f2;
    color: #292c2c;
    border-top: #d4dfde solid 1px;
    border-left: #d4dfde solid 1px;
    border-bottom: #e9faf9 solid 1px;
    border-right: #e9faf9 solid 1px;
}

ul.leftList {
    list-style-type: none;
    list-style-position: inside;
    margin:0px 0 0 0px;
    padding:5px;
}

ul.leftList li {
    background : url("../images/ico-list.gif") 0 center no-repeat;
    padding-left: 13px;
}

#notice_list {
    margin:5px 0 0 10px;
    line-height:1.5em;
}

#notice_member {
    margin-top: 5px;
}

/* サーバエラーページ */
.error-message-area {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: var(--red-color-50);
    color: var(--white-color);
    padding: 15px;
    margin-top: 20px;
    border : var(--red-color-600) 1px solid;
}

.error-message-area h2 {
   margin:0px 0px 10px !important;
   padding:0px !important;
   color: var(--red-color-600);
   font-size:140%;
   letter-spacing: 0.2em;
   font-weight: bold;
}

.error-message-area p {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background: var(--white-color);
    color: var(--red-color-600);
    padding: 15px;
    margin-top: 20px;
    border : var(--red-color-600) 1px solid;
}

/* Layout style */
.disp-none { display: none; }
.hidden { display: none; }

.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.flex-align__center {
    justify-content: center;
    align-items: center;
}

.flex-wrap {
    flex-flow: column;
}

.flex-stretch { align-items: stretch; }
.flex-gap { gap: 10rem; }
.flex-gap__xsmall { gap: 2rem; }

.flex.__buttons {
    margin: 3rem 0;
}


.flex-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.flex-scroll {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.fixed-buttons__buttom {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid var(--gray-color-200);
    background-color: var(--gray-color-50);
    gap: 2rem;
}

.fixed-buttons__buttom .mail-form_button { margin-bottom:0; }



/* Text colors */
.text-danger { color: var(--text-danger); }
.text-warning { color: var(--text-warning); }

#ll { text-align: left; }
#cc { text-align: center; }
#rr { text-align: right; }

.rr { text-align: right; }
.cc { text-align: center !important; }
.vt { vertical-align: top; }
.vc { vertical-align: middle; }
.vb { vertical-align: bottom; }
.nowrap { white-space : nowrap; }
.line-a { background-color: var(--gray-color-50); }
.line-b { background-color: var(--white-color); }

.f-normal { font-weight: normal; }
.normal-bold { color: var(--gray-color-800) !important; font-weight: bold !important; }

.f-small { font-size:x-small; }
.f90-p { font-size:90%; }

.text-size-small {
    font-size: 1.2rem;
}

.p-right-10 { padding-right: 10px; }


/* opacity */
.o40 {
    opacity: .40;
    filter: alpha(opacity=40);
    -ms-filter: "alpha(opacity=40)";
    -khtml-opacity: .40;
    -moz-opacity: .40;
}

/* cursor */
.droppable{
    cursor: drag-and-drop;
}

.pointer {
    cursor: pointer;
}

/* 指定パスワード欄disableをグレーに */.
input[name='self_password']:disabled {
    background-color: #F0F0F0;
}
/* for IE6 */
.disabled { background-color: #F0F0F0; }

#copyright {
    margin: 5px 5px 0px 20px;
}

#groupLink {
    font-family: 'メイリオ', Meiryo, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color:#435B67;
    margin-bottom: 20px;
    margin-left: 20px;
}
#groupLink a { color: #435B67; }

.file_name {
    font-weight: bold;
    font-size: 15px;
}
.file_footer{
    border: none;
    border-top: dashed 1px #000000;
    height: 1px;
}

/* 確認画面用 ファイルメモ */
#fileMemo {
    border: 0;
    width: 90%;
}
#fileMemo table{
  border-collapse: separate;
  border-spacing: 1px;
  width: 100%;
}
#fileMemo td {
  padding: 5px 5px 5px 5px;
}
#fileMemo .title{
  padding: 0px;
  font-weight: bold;
  font-size: 10px;
  background-color: #DDDDDD;
}
#fileMemo .text{
  font-size: 10px;
  background-color: var(--white-color);
}

/* jQuery File Upload */
span.uploaded {
    font-weight:normal;
    color: #0066cc;
}
span.normal {
    font-weight:normal;
    color: var(--gray-color-800);
}
/* 自動改行 */
.breakWord {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
    word-break:break-all;
}

/* -------------------------------------------------
   * Submit button
---------------------------------------------------- */
/* 共通 */
.inputButton {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
    font-size: small !important;
    padding: 3px 8px 3px 26px;
    cursor: pointer;
    vertical-align: middle;
    font-weight: normal !important;
    text-decoration: none !important;
    border-radius: 4px;        /* CSS3草案 */
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 4px;   /* Firefox用 */
}

a.inputButton {
    padding: 5px 8px 5px 26px !important;
}
.inputButton.noValue{
    /* 文字無しで矢印だけのバージョン */
    padding: 3px 8px 3px 20px !important;
}

a.input-padding-normal {
    padding: 5px 8px 5px 8px !important;
}

/* input button for IE7 */
*:first-child+html .inputButton {
    overflow: visible;
}

.spacedButton {
    letter-spacing: 0.5em;
}

/* 追加ボタン */
.preview-download-button,
.mail-form_button {
    padding: 0.6rem;
    margin-bottom: 1rem;
    border-radius: 0.4rem;
    cursor: pointer;
    border: 1px solid var(--gray-color-500);
    background-color: var(--gray-color-50);
    font-size: 1.3rem;
}

.button__primary {
    background-color: var(--blue-color-500);
    color: var(--white-color);
    border: 1px solid var(--blue-color-500);
    /* min-widthは不要になるため削除 */
}

.button__primary:hover {
    background-color: var(--blue-color-600);
    border: 1px solid var(--blue-color-600);
}



/* ベース:青 矢印:なし */
.blue-none {
    color: #F1F1F1 !important;
    padding: 5px 15px 5px 15px;
    background: #0061ff url(../images/bg-button-blue-arrow-none.gif) 0 center repeat-x;
    border-style: solid;
    border-top: #5b97fa solid 1px;
    border-left: #3183fc solid 1px;
    border-right: #0560b8 solid 1px;
    border-bottom: #004d8f solid 1px;
    text-shadow: #000 1px 1px 3px; /* FireFox, Webkit, Opera */
    box-shadow: #A1A1A1 1px 1px 1px; /* FireFox, Webkit, Opera */
}

/* ベース:青 矢印:黄色右向き */
.blue-yellow-r {
    color: #F1F1F1 !important;
    background: #0061ff url(../images/bg-button-blue-arrow-left.gif) 0 center repeat-x;
    border-style: solid;
    border-top: #5b97fa solid 1px;
    border-left: #3183fc solid 1px;
    border-right: #0560b8 solid 1px;
    border-bottom: #004d8f solid 1px;
    text-shadow: #000 1px 1px 3px; /* FireFox, Webkit, Opera */
    box-shadow: #A1A1A1 1px 1px 1px; /* FireFox, Webkit, Opera */
}
.blue-yellow-r:hover,.blue-none:hover {
    color: #F1F1F1 !important;
}
/* ベース:グレー 矢印:グレー左向き(戻るボタン等) */
.gray-gray-l {
    color: #404040 !important;
    background: #fafafa url(../images/bg-button-gray-arrow-left.gif) 0 center repeat-x;
    border-style: solid;
    border-top: #9e9e9e solid 1px;
    border-left: #9b9b9b solid 1px;
    border-right: #898989 solid 1px;
    border-bottom: #898989 solid 1px;
    text-shadow: #bcbcbc 1px 1px 1px; /* FireFox, Webkit, Opera */
    box-shadow: #c2c2c2 1px 1px 1px; /* FireFox, Webkit, Opera */
}
/* ベース:グレー 矢印:グレー右向き(メーラーからボタン等) */
.gray-gray-r {
    color: #404040 !important;
    background: #fafafa url(../images/bg-button-gray-arrow-right.gif) 0 center repeat-x;
    border-style: solid;
    border-top: #9e9e9e solid 1px;
    border-left: #9b9b9b solid 1px;
    border-right: #898989 solid 1px;
    border-bottom: #898989 solid 1px;
    text-shadow: #bcbcbc 1px 1px 1px; /* FireFox, Webkit, Opera */
    box-shadow: #c2c2c2 1px 1px 1px; /* FireFox, Webkit, Opera */
}

/*  矢印無しグレーボタン(閉じるなど） */
.gray-gray {
    color: #404040 !important;
    border-style: solid;
    border-top: #9e9e9e solid 1px;
    border-left: #9b9b9b solid 1px;
    border-right: #898989 solid 1px;
    border-bottom: #898989 solid 1px;
    text-shadow: #bcbcbc 1px 1px 1px; /* FireFox, Webkit, Opera */
    box-shadow: #c2c2c2 1px 1px 1px; /* FireFox, Webkit, Opera */
}

/* 矢印分の余白をなくす */
.gray-gray.inputButton{
    padding: 3px 8px 3px 8px;
}

.gray-gray-l:hover,.gray-gray-r, .gray-gray:hover {
    color: #404040 !important;
}

/* ベース:ダークグレー 矢印:赤右向き(削除ボタン等) */
.darkgray-red-r {
    color: var(--white-color);
    background: #fafafa url(../images/bg-button-darkgray-arrow-red-left.gif) 0 center repeat-x;
    border-style: solid;
    border-top: #a1a2a1 solid 1px;
    border-left: #a1a2a1 solid 1px;
    border-right: #575657 solid 1px;
    border-bottom: #3e3e3e solid 1px;
    text-shadow: #000 1px 1px 3px; /* FireFox, Webkit, Opera */
    box-shadow: #c2c2c2 1px 1px 1px; /* FireFox, Webkit, Opera */
}

.downloadButtonArea {
  padding: 30px;
  border: 2px solid #c5d0da;
  text-align: center;
  background-color: #e8f0f7;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}

/* buttonタグ(一斉配信：ファイルあり用) */
.Button {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
    font-size: small !important;
    padding: 5px 8px 5px 26px;
    cursor: pointer;
    vertical-align: middle;
    font-weight: normal !important;
    text-decoration: none !important;
    border-radius: 4px;        /* CSS3草案 */
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 4px;   /* Firefox用 */
}

table.table-striped td { white-space: nowrap; }

/* 配布・セキュリティ用テーブル */
#security{
    border: none;
}
#security td {
    padding: 0px;
    width: auto;
    white-space: nowrap;
}

.file-search-form {
    float: right;
    color: var(--white-color);
    padding-right: 10px;
}

/* qtip2 */
.qtip {
    max-width: none !important;
}
.qtip-error {
    z-index:17000 !important;
}
.qtip-addr-list ul {
    max-width: 500px;
    max-height: 100px;
    width: auto;
    overflow: auto;
    list-style: none;
    padding: 0px;
    margin: 0;
}
.qtip-addr-list ul li {
    /*    margin: 5px 5px 5px 5px;*/
}
.qtip-addr-list ul li span {
    color: var(--gray-color-800) !important;
    font-weight:normal;
 }
.clipcopy div {
    position: relative;
}
.copy-button {/*メーラ系URLコピーボタン*/
    color: #404040 !important;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
    font-size: small !important;
    padding: 5px 8px;
    cursor: pointer;
    vertical-align: middle;
    font-weight: normal !important;
    text-decoration: none !important;
    border-radius: 4px;        /* CSS3草案 */
    background: rgb(252,252,252);
    background: linear-gradient(180deg, rgba(252,252,252,1) 0%, rgba(192,192,192,1) 100%);
    border-style: solid;
    border-top: #9e9e9e solid 1px;
    border-left: #9b9b9b solid 1px;
    border-right: #898989 solid 1px;
    border-bottom: #898989 solid 1px;
    text-shadow: #bcbcbc 1px 1px 1px; /* FireFox, Webkit, Opera */
    box-shadow: #c2c2c2 1px 1px 1px; /* FireFox, Webkit, Opera */
}

.copy-button:before {
    padding: 0 0;
    display: inline-block;
    content: url('../images/icon-clipboard.png');
}

.tooltip {
    display: none;
    position: absolute;
    padding: 6px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: var(--gray-color-600);
    color: var(--white-color);
    opacity: 0.9;
    margin-top: 12px ;
}

.tooltip:before {
    content: '';
    position: absolute;
    left: 20px;
    top: -15px;
    display: block;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 15px solid var(--gray-color-600);
    border-left: 10px solid transparent;
    opacity: 0.9;
}

/* 配布などでの宛先/宛先Cc/宛先Bcc/アップロード通知先/ファイル/miniwindのファイルの削除ボタン */
#address_list .address_info a,
#address_list_cc .address_info a,
#address_list_bcc .address_info a,
#address_list_notice .address_info a,
#TB_ajaxContent #file_list .sendfile_info a,
#sendfile_list .sendfile_info a,
.selected_superiors span.superior_info a,
#file_list .sendfile_info a {
    display: inline-block;
    color: var(--gray-color-800);
    border: 1px #acafb6 solid;
    border-radius: 4px;
    padding: 1px 3px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.file_tooltip {
    position: relative;
    display: inline-block;
}

.balloon_bottom { /* ツールチップのスタイル */
    position: absolute;
    top: 80%; /* Y軸の位置 */
    left: 50%;
    margin-top: 15px; /* テキストとの距離 */
    padding: 8px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: var(--gray-color-600); /* ツールチップの背景色 */
    font-size: 1.0rem;
    color: var(--white-color);
    visibility: hidden; /* ツールチップを非表示に */
    opacity: 0; /* 不透明度を0％に */
    z-index: 1;
}

.balloon_bottom::before {
    content: "";
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 15px solid var(--gray-color-600);
    border-left: 10px solid transparent;
    position: absolute;
    left: 25px;
    top: -15px;
    transform: translateX(-50%);
}

.file_tooltip:hover .balloon_bottom {
    top: 100%;
    visibility: visible;
    opacity: 1;
    left: 0px;
}

/* ホバーすると右下に表示される改行なしのツールチップ */
.balloon_bottom_nowrap {
    display: none; /* デフォルトで非表示 */
    position: absolute;
    top: 80%; /* Y軸の位置 */
    left: 80%;
    padding:  5px !important; /* テキストとの距離 */
    white-space: nowrap;
    z-index: 10;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    border-radius: 2px !important;
    background-color: var(--gray-color-600); /* ツールチップの背景色 */
    font-size: 1.0rem;
    color: var(--white-color);
}

.target_tooltip {
    display: inline;
}

.file_tooltip:hover .balloon_bottom_nowrap {
    display: block;
}

.favorite_folder_marker {
    padding-right: 12px;
    background-image: url(../images/ico-favorite.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    cursor: pointer;
}

.favorite_folder_pointer {
    padding-right: 12px;
    background-image: url(../images/ico-favorite-on.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    cursor: pointer;
}

.folder_path_upload {
    background-color: rgba(255,255,255,.8);
    padding: 10px;
    color: #8a8a8a;
}

.folder_name_upload {
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 0px;
}

.selected_superiors {
    height: 274px;
    border: var(--gray-color-100) 1px solid;
    overflow: auto;
    text-align: left;
    white-space: nowrap;
    padding: 5px;
}

.superior_select {
    vertical-align: top;
    min-width: 200px;
}

.add_arrow_button {
    display: inline-block;
    border: 1px solid #CCCCCC;
    padding: 0.4em;
    border-radius: 4px;
    background: #E5E5E5;
    background: linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 100%);
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.1));
}

.add_arrow_button:hover {
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
}

.triangle-right {
    display: inline-block;
    border-style: solid;
    border-width: 12px 0 12px 22px;
    border-color: transparent transparent transparent #0066CC;
    vertical-align: middle;
}

.links{
    margin-left: 1rem;
    margin-top: 0.6rem;
    line-height: 1.4;
}

.button_disabled{
    cursor:not-allowed;
    pointer-events: none; /* クリック無効 */
}
.pointer_events_none {
	pointer-events: none;
}

.toast {
  position: fixed;
  top: 30px;
  right: 30px;
  padding: 15px;
  border-radius: 5px;
  opacity: 0.9;
  font-size: 16px;
  z-index: 1000;
  border-radius: 5px;
  background-color: lightgray; //TODO:見栄えを整える
}

.space-between{
    /* 子要素を両端揃えにする */
    text-align: justify;
    display: flex;
    justify-content: space-between;
}

.info-circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background-image: url(../images/info-circle.svg);
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
    background-size: contain;
    background-position: center;
}

.info-circle::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -35px;
    background-color: var(--gray-color-600);
    color: var(--white-color);
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    display: none;
    z-index: 10;
}

.info-circle:hover::after {
    display: block;
}
.img-icon {
    width: 1.5rem ;
    height: 1.5rem;
}
/*プレビュー機能 start*/
.tr-highlight {
    /* 選択された行のスタイル */
    background-color: var(--blue-color-100) !important;
}
/* Shiftを押したときのスタート位置のハイライト */
.tr-startHighlight {
    outline: 2px solid var(--blue-color-400);
    border-radius: 4px;
    outline-offset: -0.07rem;
}

.center-close-button {
    position: inline-block;
    background-color: var(--white-color);
    padding-top:15px;
    text-align: center;
    z-index: 100;
    border-top: #ccc 1px solid;
}

.preview-content {
    position: grid;
    margin-top: 10px;
    margin-bottom: 0px;
    height: 83%;
    width: 100%;
}
.preview-content:has(audio) {
    display: inline;
}
.preview-content > audio {
    height: 7%;
}
.preview-file {
    height: 100%;
    width: 100%;
}
img.preview-file {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.preview-frame {
    padding:10px;
    padding-bottom: 0px;
    height: 98vh; /*スクロールバーが出ないようにする*/
}

.downloading {
    padding: 0.6rem 1.2rem;
    margin-bottom: 1rem;
    border-radius: 0.4rem;
    background-color: var(--blue-color-500);
    color: var(--white-color);
}

.spinner {
  width: 1.4rem;
  height: 1.4rem;
  border: 4px solid var(--blue-color-200);
  border-top: 4px solid var(--white-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/*プレビュー機能 end*/
.preview-able-blue {
    color: var(--blue-color-600);
}

.file_preview_icon {
    display: inline-flex;
    align-items: center;
    vertical-align: sub;
    height: 100%;
    margin-left: 5px;
    margin-right: 20px;
}
/* インライン要素を縦方向で真ん中になるように揃える */
.file_preview_icon > a ,
.inline-flex-center-y {
    display: inline-flex;
    align-items: center;
}
/* ファイル一覧でのプレビューボタンは他のアイコンに揃える */
.cc > .file_preview_icon {
    margin-right: 0px;
    vertical-align: baseline;
}

/* 要素を縦にリストのように並べる */
#sendfile_list,
.flex-column {
    display: flex;
    flex-direction: column;
}

/* ローディング画面 */
/* ローディング画面全体の背景 */
.dispNone { display:none; }
.dispFlex { display:flex; }

.loading-overlay {
    /*dispNoneとdispFlexを切り替えて表示*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading-overlay p {
    color: var(--white-color);
    margin: 15px;
}
.loading-overlay .loading {
    text-align: center;
    position: fixed;
    top: 25%;
    left : 20%;
}