@charset "UTF-8";

/** --------------------------------------------------------------------------*
 * @file        メール受付WEBフォーム用CSS定義ファイル（クライアント配置）
 *
 * @author      Kuniaki Nakajima
 * @version     2.0.0
 * 
 *----------------------------------------------------------------------------*/

.communicationColorList {
    color: #002B62;
    color: #EB6E00;
    color: #04127C;
    color: #65B3A4;
    color: #1E32A5;
    color: #286EBE;
    color: #419B91;
    color: #D2BE00;
    color: #A0D8Ad;
    color: #DC8C23;
    color: #BE375A;
    color: #858585;
    color: #000000;
    color: #ffffff;
}


/** ######################################################################### *
 *  ■ CSSクラス共通定義
 ** ######################################################################### */

/*-------------------------------------------------------------------*
 * CSSクラス共通定義   
 *-------------------------------------------------------------------*/
/*-- 確認画面非表示 --*/
.hiddenCnf {
    display: none;
}
.modalCnf {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -0%);
    padding: 0.5em;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);   /* modalに影を作る */
    z-index: 9;                /* z-indexでmodalAlertの下に位置させる */
}
.overlayCnf {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.4);    
    z-index: 5;                 /* z-indexの数字を0と10の間の数字にし、bodyとmodalの真ん中に位置させる */
    /* backdrop-filter: blur(3px); */  /* 一番下のbody領域をぼやかす */
}

/*-- お知らせ用 クラス --*/
.notice {
    padding-bottom: 0.5em;
}
.notice p {
    text-align: left;
}
.notice .right {
    display: table;
    margin-left: auto;
    text-align: left;
}
/*-- 画面ロック用 クラス --*/
.screenUnLock {
    display: none;
}
.screenLock {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.4);    
    z-index: 5;                 /* z-indexの数字を0と10の間の数字にし、bodyとmodalの真ん中に位置させる */
    /* backdrop-filter: blur(3px); */  /* 一番下のbody領域をぼやかす */
}
/*-- システムメンテナンス用 クラス --*/
.systemMaintenance {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 85%;
    transform: translate(-50%, -50%);
    border: 1px solid #cccccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background-color: white;
    z-index: 10;                 /* z-indexの数字を0と10の間の数字にし、bodyとmodalの真ん中に位置させる */
    /* backdrop-filter: blur(3px); */  /* 一番下のbody領域をぼやかす */
}

/*-- inBox内向け table クラス--*/
table.innerTable {
    border-collapse: collapse;
    border:2px solid #bbb; 
    text-align: left;
}
table.innerTable tr {
    margin-bottom:1em;
}
table.innerTable th {
    text-align: center;
    background-color: lightgrey;
}
table.innerTable th,
table.innerTable td{
    border:3px solid #bbb; 
    padding-left: 1em;
    padding-right: 1em;
}
table.innerTable select,
table.innerTable input {
    margin: 1em;
    outline:silver solid 2px;
}
/*-- --*/
table.innerTable2 {
    border-collapse: collapse;
    border:2px solid #bbb; 
    text-align: left;
    table-layout: auto;
    width: auto;
}
table.innerTable2 th {
    text-align: center;
    background-color: lightgrey;
}
table.innerTable2 th,
table.innerTable2 td {
    border:3px solid #bbb; 
    padding: 0.2em;
}
table.innerTable2 select,
table.innerTable2 input {
    margin: 0.2em;
    outline:silver solid 2px;
}
table.innerTable2 select {
    flex: 1;                        /* select が残り幅の中で伸び縮みする                */
    min-width: 0;                   /* Flexレイアウト内で select が縮められるようになる */
    max-width: 100%;
    padding-right: 1.5em;
}
table.innerTable2 label {
    white-space:nowrap;
    align-items:center;
}
.innerTable2 input[type="button"] {
    padding-left: 1em;
    padding-right: 1em;
}

/*-- 空のテーブル --*/
table.noneTable {
    border-collapse: collapse;
    border: none;
}
table.noneTable,
table.noneTable td,
table.noneTable th {
    border: none;
    background-color: beige;    /* ツールチップ背景色 */
    margin: 0em;
    padding: 0em;
    text-align: left;
}

/* select内のデータが長すぎる場合縮小して表示させる */
.selectOverWidth {
    flex: 1;                        /* select が残り幅の中で伸び縮みする                */
    min-width: 0;                   /* Flexレイアウト内で select が縮められるようになる */
    max-width: 100%;
    padding-right: 1.5em;
}
.selectFile input[type="button"] {
    padding: 0.2em 1em 0.2em 1em;
}


/*-------------------------------------------------------------------*
 * CSS ID個別定義   
 *-------------------------------------------------------------------*/
#InquiryFooter table,
#InquiryFooter th,
#InquiryFooter td {
    border: none;
}
#InquiryDetail table,
#InquiryDetail th,
#InquiryDetail td {
    border: none;
}

table#loginTable {
    border-collapse: collapse;
    border:2px solid #bbb; 
    margin-bottom:0.5em;
    text-align: left;
}
table#loginTable tr {
    margin-bottom:1em;
}
table#loginTable th {
    text-align: center;
    background-color: lightgrey;
}
table#loginTable th,
table#loginTable td{
    border:3px solid #bbb; 
}
table#loginTable select,
table#loginTable input {
    margin: 0.2em;
    outline:silver solid 2px;
}


/*-------------------------------------------------------------------*
 * デバイス別 個別クラス定義（※上書き設定を考慮し最後に以下を設定） 
 *-------------------------------------------------------------------*/
/* パソコン用       1024px～ */
@media screen and (min-width:769px){
    .outBox {
        width: 90%;
        max-width: 640px;
    }
    .systemMaintenance {
        font-size: medium;
    }
    #lockTitle,
    #timePperiod {
        font-size: large;
    }
}
/* タブレット用     641px～1023px */
@media screen and (min-width:641px) and (max-width:768px){
    .outBox {
        width: 90%;
        max-width: 640px;
    }
    .systemMaintenance {
        font-size: medium;
    }
    #lockTitle,
    #timePperiod {
        font-size: large;
    }
}
/* スマホ用         420px～640px     */
@media screen and (min-width:420px) and (max-width:640px){
    .outBox {
        width: 100%;
        font-size: small;
    }
    .systemMaintenance {
        font-size: small;
    }
    #lockTitle,
    #timePperiod {
        font-size: medium;
    }
}
/* スマホ初期型用   ～419px */
@media screen and (max-width:419px){
    body {
        font-size: small;
    }
    select,
    input,
    textarea {
        font-size: small;
    }
    .outBox {
        width: 100%;
        font-size: small;
    }
    .inBox .head {
        font-size: small;
    }
    table.innerTable2,
    table.innerTable2 select,
    table.innerTable2 input, 
    table.innerTable2 label {
        font-size: x-small;
    }
    table.innerTable2 input[type="text"] {
        max-width: 10em;
    }
    #modal p {
        font-size: small;
    }
    #selectPurchase {
        margin-left: 2em;
    }
    .systemMaintenance {
        font-size: small;
    }
    #lockTitle,
    #timePperiod {
        font-size: small;
    }
}

/** (End Of File) ----------------------------------------------------------- **/