@charset 'UTF-8';
/*smart_phone_config*/
/*共通パーツ化が困難だったため追記*/
/* *****************************
 *
 * INDEX file to Scss or Sass.
 *
 **************************** */
.wrap
{
    background-image: url(../images/company/backImage.png);
    background-repeat: repeat-x;
    background-position: 0 -34px;
}

.inner
{
    width: 1120px;
    margin-right: auto;
    margin-left: auto;
}
@media screen and (max-width: 768px)
{
    .inner
    {
        width: 100%;
    }
}

#head
{
    width: 1120px;
    margin-right: auto;
    margin-left: auto;
    padding: 30px 0 30px 0; 

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #head
    {
        overflow: hidden;

        width: 100%;
        padding: 15px 0 15px 0;
    }
}
#head h1
{
    font-size: 227%;

    display: block;

    width: 30%;
    margin: 1% 40% 1%;
    margin-left: 29%;
    padding: 3%;
    padding-left: 8%;

    text-align: center;

    color: #3fa79e;
    background-color: rgba(255, 255, 255, .7);
    background-image: url(../images/company/questionIcon.png);
    background-repeat: no-repeat;
    background-position: 25% 45%;
}
@media screen and (max-width: 768px)
{
    #head h1
    {
        font-size: 153.9%;

        width: auto;
        margin: 0;
        padding: 8% 0;
        padding-left: 9%;

        background-position: 26% 50%;
        background-size: 9%;
    }
}
#head p
{
    font-size: 182%;
    line-height: 153.9%; 

    padding: 1%;

    text-align: center;

    color: #fff;
}
@media screen and (max-width: 768px)
{
    #head p
    {
        font-size: 16px;

        padding: 2% 7%;
    }
}
#head p.phone
{
    display: none;
}
@media screen and (max-width: 768px)
{
    #head p.pc
    {
        display: none;
    }
    #head p.phone
    {
        display: block;
    }
}

form ul
{
    display: block;

    width: 100%;
    margin-bottom: 2%; 
    padding: 1%;

    text-align: left;
    /* 部品グループの背景色 */

    border: 1px #c0c0c0 solid;
    background-color: #fff;
    background-color: #f9f9f9;
}
@media screen and (max-width: 768px)
{
    form ul
    {
        width: 100%;
    }
}

#contents
{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

/*フォーム対応ができない為別体裁作成*/
#caution
{
    font-size: 123.1%;

    display: block;

    width: 80%;
    margin: 0 auto 2% auto;
    padding: 3% 4%;

    text-align: left;

    background-color: #fff;
    background-color: #f9f9f9;
    /* 部品グループの背景色 */
}
@media screen and (max-width: 768px)
{
    #caution
    {
        font-size: 100%; 

        width: 96%;
    }
}
#caution ul#contactIntro
{
    margin-bottom: 4%;
}
#caution ul#contactIntro li.closure
{
    margin-bottom: 20px;
    padding: 20px;

    border: 1px solid #ef4e74;
}
#caution ul#contactIntro li.closure h3
{
    margin-bottom: 5px; 

    text-align: center;

    color: #ef4e74;
}
#caution ul#contactForm
{
    width: 100%;
}
#caution ul#contactForm li
{
    float: left;

    width: 49%;
    margin-right: 2%;

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #caution ul#contactForm li
    {
        font-size: 13px;
    }
}
#caution ul#contactForm li.last
{
    margin-right: 0;
}
#caution ul#contactForm li a
{
    display: block;

    padding: 2% 5%;

    color: #fff;
}
@media screen and (max-width: 768px)
{
    #caution ul#contactForm li a
    {
        font-size: 11px; 

        padding: 2% 0;
    }
}

/*フォーム対応ができない為別体裁作成*/
#care
{
    width: 80%;
    margin: 3% auto 3%;
}
@media screen and (max-width: 768px)
{
    #care
    {
        width: 100%;
        padding: 2%;
    }
}
#care p
{
    font-size: 153.9%;
    font-weight: bold; 

    margin-bottom: 2%;

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #care ul
    {
        padding: 3%;
    }
}
#care ul li
{
    font-size: 116%; 

    margin-top: 1%;
}
@media screen and (max-width: 768px)
{
    #care ul li
    {
        font-size: 12px;
        line-height: 1.3;

        margin-bottom: 5px;
    }
}

/* --- フォームエリア --- */
form.contact
{
    /* フォームエリアの幅 */
    font-size: 93%;

    width: 70%;
    margin: 0 auto;
}
@media screen and (max-width: 768px)
{
    form.contact
    {
        width: 100%;
    }
}

/* --- フォームエリア内の段落 --- */
form.contact p
{
    line-height: 130%;
}

/* --- 段落内の「必須」画像 --- */
form.contact p.attention img
{
    vertical-align: middle;
}

form.contact p.attention
{
    color: #fff;
}

/* --- 部品グループ --- */
form.contact div.fields
{
    margin-bottom: 3%;
    /* 部品グループの下マージン */
    padding: 1%;
    /* 部品グループの背景色 */

    border: 1px #c0c0c0 solid;
    /* 部品グループのパディング */
    background-color: #f9f9f9;
    /* 部品グループの境界線 */
}
@media screen and (max-width: 768px)
{
    form.contact div.fields
    {
        padding: 1%;

        border: none;
    }
}

/* --- テーブル --- */
form.contact table
{
    width: 100%;
    /* テーブルの幅 */

    border: 1px solid;
    /* テーブルの境界線 */
    border-color: #c0c0c0 #999 #999 #c0c0c0;
    /* テーブルの境界線色（上右下左） */
}
@media screen and (max-width: 768px)
{
    form.contact table
    {
        padding: 1%;
    }
}

/* --- キャプション --- */
form.contact caption
{
    /* キャプションの文字色 */
    font-weight: bold; 

    margin-bottom: 1%;
    /* キャプションの下マージン */
    padding: 2% 3%;
    /* キャプションの境界線色（上右下左） */

    text-align: left;

    color: #808080;
    /* キャプションの背景 */
    border: 1px solid;
    /* キャプションの境界線 */
    border-color: #c0c0c0 #999 #999 #c0c0c0;
    /* キャプションのパディング（上下、左右） */
    background: #f9f9f9 url(caption_back1.gif) repeat-x;
}

/* --- 見出しセル（th） --- */
form.contact th
{
    line-height: 130%; 

    width: 24%;
    /* 見出しセルの幅 */
    padding: 2% 3%;
    /* 見出しセルの下境界線 */

    text-align: left;
    /* 見出しセルの背景色 */

    border-bottom: 1px #c0c0c0 dotted;
    /* 見出しセルのパディング（上下、左右） */
    background-color: #f5f5f5;
}
@media screen and (max-width: 768px)
{
    form.contact th
    {
        padding: 1%;
    }
}

/* --- 見出しセル内の補足テキスト --- */
form.contact th span.supplement
{
    font-weight: normal;
}

/* --- データセル（td） --- */
form.contact td
{
    padding: 2% 3% 3%;
    /* データセルの背景色 */

    border-bottom: 1px #c0c0c0 dotted;
    /* データセルのパディング（上、左右、下） */
    background-color: #fff;
    /* データセルの下境界線 */
}
@media screen and (max-width: 768px)
{
    form.contact td
    {
        padding-left: 1%;
    }
}

/* --- データセル内の補足テキスト --- */
form.contact td span.supplement
{
    color: #808080;
}

/* --- 必須項目セル --- */
form.contact td.required
{
    width: 5%;
    padding-left: 3%; 
    /* 必須項目セルの背景色 */

    text-align: center;
    /* 必須項目セルの幅 */

    background-color: #3fa79e;
}

/* --- 任意項目セル --- */
form.contact td.arbitrary
{
    background-color: #29a297;
    /* 任意項目セルの背景色 */
}

/* --- フォーム部品 --- */
form.contact input,
form.contact select,
form.contact textarea
{
    margin-bottom: 1%;
    /* フォーム部品の下マージン */
}
@media screen and (max-width: 768px)
{
    form.contact input,
    form.contact select,
    form.contact textarea
    {
        width: 100%;
    }
}

/* --- フォーム部品のサイズ --- */
/* --- （長めのテキスト入力欄） --- */
#company,
#section,
#name,
#name2,
#email,
#address,
#email2,
#title
{
    width: 70%;
    /* フォーム部品の幅 */
}

#title
{
    width: 80%;
    /* フォーム部品の幅 */
}

/* --- （短めのテキスト入力欄） --- */
#tel1,
#tel2,
#tel3,
#fax1,
#fax2,
#fax3
{
    width: 20%;
    /* フォーム部品の幅 */
}

#zip1,
#zip2
{
    width: 20%;
    /* フォーム部品の幅 */
}

/* --- （複数行のテキスト入力欄） --- */
#message
{
    width: 100%;
    /* フォーム部品の幅 */
    height: 100%;
    /* フォーム部品の高さ */
}

#remark
{
    width: 80%;
    /* フォーム部品の幅 */
    height: 100%;
    /* フォーム部品の高さ */
}

/* --- ボタン --- */
form.contact input.btnQestion
{
    font-size: 182%;

    display: block;

    width: 40%;
    height: 4%;
    margin-top: 5%; 
    margin-right: auto;
    margin-left: auto;
    padding-top: 1%;
    padding-left: 5%;

    text-align: center;

    color: #fff;
    background-image: url(../images/hallpage/daiichiYazirushi.png);
    background-repeat: no-repeat;
    background-position: 10% 60%;
}
@media screen and (max-width: 768px)
{
    form.contact input.btnQestion
    {
        font-size: 123.1%;

        width: auto;
        padding: 0 15%;
    }
}

form.contact input.btnTopBack
{
    font-size: 182%;

    display: block;
    float: left;

    width: 20%;
    height: 4%;
    margin-top: 2%; 
    margin-right: auto;
    margin-left: 20%;
    padding-top: 1%;
    padding-left: 5%;

    text-align: center;

    color: #fff;
    background-image: url(../images/hallpage/daiichiYazirushiBack.png);
    background-repeat: no-repeat;
    background-position: 10% 60%;
}

button#doneBack
{
    font-size: 182%;

    display: block;

    width: 300px;
    height: 80px;
    margin-top: 30px; 
    margin-right: auto;
    margin-left: auto;
    padding-top: 5px;
    padding-left: 30px;

    text-align: center;

    color: #fff;
    background-image: url(../images/hallpage/daiichiYazirushiBack.png);
    background-repeat: no-repeat;
    background-position: 35px 30px;
}

.sectionDone
{
    height: 800px;
}

p.alert
{
    font-weight: bold; 

    color: red;
}

p.alert2
{
    font-weight: bold; 

    color: red;
}

.btn
{
    display: block;
}
.btn input.buttonBack
{
    font-size: 182%;

    display: block;
    float: left;

    width: 20%;
    height: 4%;
    margin-top: 5%; 
    margin-right: auto;
    margin-left: 10%;
    padding-top: 1%;
    padding-left: 5%;

    text-align: center;

    color: #fff;
    background-image: url(../images/hallpage/daiichiYazirushiBack.png);
    background-repeat: no-repeat;
    background-position: 10% 60%;
}
@media screen and (max-width: 768px)
{
    .btn input.buttonBack
    {
        font-size: 123.1%;

        width: 30%;
    }
}
.btn input.buttonNext
{
    font-size: 182%;

    display: block;
    float: right;

    width: 40%;
    height: 4%;
    margin-top: 5%; 
    margin-right: 10%;
    margin-left: auto;
    padding-top: 1%;
    padding-left: 5%;

    text-align: center;

    color: #fff;
    background-image: url(../images/hallpage/daiichiYazirushi.png);
    background-repeat: no-repeat;
    background-position: 10% 60%;
}
@media screen and (max-width: 768px)
{
    .btn input.buttonNext
    {
        font-size: 123.1%;

        width: 45%;
        margin-right: 10%;
    }
}