@charset "UTF-8" ;
/* *****************************************************************
	共通設定 start
****************************************************************** */

html{
    height:100%; /*ブラウザいっぱいに高さを取得*/
}
body{
     width: 100%;
     height:100%; /*ブラウザいっぱいに高さを取得*/
     margin:0;
     padding:0;
}
#wrapper{
    width:100%;
    margin:0 auto;
    position: relative;/*フッターの位置設定の基準*/
    min-height: 100%;/*最低値を100％にしておけばコンテンツ量が増えた分だけ伸びる*/
    height: auto !important;/*ie6用*/
    height: 100%;   
    background-color: #ffffff;/*コンテンツの背景色は全体囲みのココに指定*/
}

.header{
    text-align: center ;			/* テキスト、画像の真ん中寄せ */
/*
    background-image:  url("/public/images/PC/questionnaire_head-bg.png");
    background-repeat:repeat-x;
    height:100%;
    width:100%;
*/
}
/* ロゴ画像 */
.logo {
    background-image: url(/public/images/PC/2Q9_header.png);
    background-repeat: no-repeat;
    background-size:contain;
    height:132px;
    width:1280px;
    margin: auto;
}
.contents{
    height:auto;
    text-align:center;
    padding-bottom: 100px;/*footerの高さ分だけ余白を設ける*/
}
.main  {
           padding-top:50px;
           padding-left:10px;
           margin-left:auto;           /* IE以外用の中央寄せ */
           margin-right:auto;          /* IE以外用の中央寄せ */
           text-align:left;            /* 中身を左寄せに戻す */
           width:430px;                /* 幅 */
           color:#000000;              /* 文字色 */
/*           border: solid 1px #000000;*/
          }


.footer{
    background-image:  url("/public/images/PC/2Q9_footer-bg.png");
    background-repeat:repeat-x;
    position: absolute;/*wrapperの基準の絶対配置*/
    bottom: 0; /*一番下に配置*/
    height: 104px;
    width: 100%;
}
.footerpic {
    background-image: url(/public/images/PC/2Q9_footer.png);
    background-repeat: no-repeat;
    background-size:contain;
    height:104px;
    width:1280px;
    margin: auto;
}
/* スマホだけに適用するCSS */
@media screen and (max-width:1050px)
{
    body {
            font-size: 13px ;	/* 文字サイズ */
    }
    .header{
        background-image : none;
    }
      /* ロゴ画像 */
     .logo{
         background-image: url(/public/images/mobile/2Q9_m-header.png);
        height:368px;
        width:100%;
     }
 .main  {
           padding-top:15px;
           padding-left:10px;
           margin-left:auto;           /* IE以外用の中央寄せ */
           margin-right:auto;          /* IE以外用の中央寄せ */
           text-align:left;            /* 中身を左寄せに戻す */
           width:80%;                /* 幅 */
           color:#000000;              /* 文字色 */
/*           border: solid 1px #000000;*/
          }
   /* フッター画像 */
     .footer{
         display:none;
     }
}
@media screen and (max-width:950px)
{
     .logo{
        height:333px;
     }
}
@media screen and (max-width:900px)
{
     .logo{
        height:316px;
     }
}
@media screen and (max-width:850px)
{
     .logo{
        height:298px;
     }
}
@media screen and (max-width:800px)
{
     .logo{
        height:280px;
     }
}
@media screen and (max-width:750px)
{
     .logo{
        height:263px;
     }
}
@media screen and (max-width:700px)
{
     .logo{
        height:245px;
     }
}
@media screen and (max-width:650px)
{
     .logo{
        height:228px;
     }
}
@media screen and (max-width:600px)
{
     .logo{
        height:210px;
     }
}
@media screen and (max-width:550px)
{
     .logo{
        height:193px;
     }
}
@media screen and (max-width:500px)
{
     .logo{
        height:175px;
     }
}
@media screen and (max-width:450px)
{
     .logo{
        height:158px;
     }
}
@media screen and (max-width:400px)
{
     .logo{
        height:140px;
     }
}
@media screen and (max-width:350px)
{
     .logo{
        height:122px;

     }
}

/* *****************************************************************
	共通設定 end
****************************************************************** */
/* *****************************************************************
	質問TOP画面画像設定 start
****************************************************************** */
/* Topメインボディ画像 */
#topbody {
    background-image: url(/public/images/topbody.png);
    background-repeat: no-repeat;
    height:500px;
    width:500px;
    background-size:contain;
    margin: auto;
}
/* スマホだけに適用するCSS */
@media screen and (max-width:700px)
{
     /* TOPメインボディ画像 */
     #topbody{
         width:600px;
         height:600px;
     }
}
/* スマホだけに適用するCSS */
@media screen and (max-width:600px)
{
     /* TOPメインボディ画像 */
     #topbody{
         width:500px;
         height:500px;
     }
}
/* スマホだけに適用するCSS */
@media screen and (max-width:500px)
{
     /* TOPメインボディ画像 */
     #topbody{
         width:400px;
         height:400px;
     }
}
/* スマホだけに適用するCSS */
@media screen and (max-width:400px)
{
     /* TOPメインボディ画像 */
     #topbody{
         width:300px;
         height:300px;
     }
}

/* *****************************************************************
	質問TOP画面画像設定 end
****************************************************************** */
/* *****************************************************************
	完了画面画像設定 start
****************************************************************** */
/* ENDメインボディ画像 */
.endbody {
    background-image: url(/public/images/PC/end_2Q9.png);
    background-repeat: no-repeat;
    height:250px;
    width:500px;
    background-size:contain;
    margin: auto;
}
/* スマホだけに適用するCSS */
@media screen and (max-width:700px)
{
    .endbody {
        background-image: url(/public/images/mobile/end_2Q9.png);
        height:388px;
        width:388px;
    }
}
/* スマホだけに適用するCSS */
@media screen and (max-width:600px)
{
    .endbody {
        height:333px;
        width:333px;
    }
}
/* スマホだけに適用するCSS */
@media screen and (max-width:500px)
{
    .endbody {
        height:277px;
        width:277px;
    }
}
/* スマホだけに適用するCSS */
@media screen and (max-width:400px)
{
    .endbody {
        height:222px;
        width:222px;
    }
}

/* *****************************************************************
	完了画面画像設定 end
****************************************************************** */
/* *****************************************************************
	質問画面の回答部分で使用する設定 start
****************************************************************** */
.ctrbox {
    float:left;
    width:20px;
    margin-bottom:15px;
}
.answerbox {
    float:left;
    width:380px;
    margin-bottom:15px;
}
.txtarea{
    width:350px;
    height:100px;
}
.confmsg{
    margin-top:5px;
    margin-bottom:10px;
}
.qNo{
    background-repeat: no-repeat;
    height:70px;
    width:70px;
    background-size:contain;
}
/* スマホだけに適用するCSS */
@media screen and (max-width:700px)
{
    .answerbox {
        float:left;
        width:80%;
        margin-bottom:15px;
    }
    .txtarea{
        width:90%;
    }

}
/* *****************************************************************
	質問画面の回答部分で使用する設定 end
****************************************************************** */
/* *****************************************************************
	ユーザ情報入力画面で使用する設定 start
****************************************************************** */
.view_item {
	width:420px;
	height :50px;
}
.view_item_btn_area {
	width:420px;
	height :80px;
}
.view_title {
	float:left;
	width:150px;	
}
.view_title_btn {
	float:left;	
	width:90px;
}
.view_control {
	float:left;	
	width:250px;
}
.view_item .view_control input {
	width:250px;
}
@media screen and (max-width:700px)
{
    .view_control
    {
        clear:both;
    }
    .view_item .view_control input {
        width:80%;
    }
    .view_title_btn {
	display:none;
}

}
.clear{
    clear:both;
}
.start_required{
    font-weight: bold;
    color: red;
    
}
#error_message{
    font-weight: bold;
    padding-bottom:10px;
}
/* *****************************************************************
	ユーザ情報入力画面で使用する設定 end
****************************************************************** */