@charset "UTF-8";

/** --------------------------------------------------------------------------*
 * @file        メール受付WEBフォーム用CSS定義ファイル
 *              （購入前のお問い合わせ専用）
 *
 * @author      Kuniaki Nakajima
 * @version     2.0.0
 * 
 *----------------------------------------------------------------------------*/


/*-- --*/
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: transparent;
    margin: 0em;
    padding: 0em;
    text-align: left;
}

/*-- 確認画面非表示 --*/
.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領域をぼやかす */
}

/*-------------------------------------------------------------------*
 * デバイス別 個別クラス定義（※上書き設定を考慮し最後に以下を設定） 
 *-------------------------------------------------------------------*/
/* パソコン用       1024px～ */
@media screen and (min-width:769px){
    .outBox {
        width: 90%;
        max-width: 640px;
    }
}
/* タブレット用     641px～1023px */
@media screen and (min-width:641px) and (max-width:768px){
    .outBox {
        width: 90%;
        max-width: 640px;
    }
}
/* スマホ用         420px～640px     */
@media screen and (min-width:420px) and (max-width:768px){
    .outBox {
        width: 100%;
        font-size: small;
    }
}
/* スマホ初期型用   ～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;
    }
}

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