/*
============================================================================
 スマホ専用 (640px以下)
============================================================================ 
*/
@media screen and (max-width:640px){ /* SP */

    .no_sp{
        display: none;
    }

    .no_pc{
        display: inline;
    }

    div.no_pc,
    p.no_pc{
        display: block;
    }



    .exp_parent{
        margin-right: 0;
    }

    .exp p{
        display: inline; /*横*/
        font-size: 12px;
        padding: 3px;
        background-color: #efe;
        color: #080;
        margin: 2px auto 2px 0px;
        width: auto;
        border-radius: 8px;
        text-align: center;
        border: 1px solid #080;
    }

    .rating img{
        width:  20px;
        height: 20px;
    }


    /* ================================================================================================ */
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    select ,
    textarea{
        font-size: 16px;
    }

    /* ================================================================================================ */
    /*  基本のレイアウト                                                                                */
    /* ================================================================================================ */

    /* SP用ぱんくず */
    .step_bar_sp {
        display:inline;
    }


    /* ---------------------
     header
    ------------------------*/
    #header{
        position:static;
    }

    /* ---------------------
     header
    ------------------------*/
    #head_pc{
        display: none;
    }
    #head_sp{
        display: block;
    }

    #header .logo{
        width:150px;
    }

    #headerAfterWrap{
        margin-top:0px;
    }


    /* ================================================================================================ */
    .contents_s{
        float:left;
        width:98%;
        padding:5px;
        margin-left: 2px;
    }

    .contents_s .contents_box .side_login_menu ul li{
        padding:10px 15px 10px 35px;
        font-size: 16px;

    }

    .contents_m{
        float:left;
        width:100%;
    }

    /* ================================================================================================ */
    /* ======== 評価の共通部品 ========*/
    /* #### しごとば評価(拠点への評価) ####*/

    /* #### おしごと評価(ワーカーへの評価) ####*/
    .worker_rating_total div{
      margin: 5px 0 5px 0;
    }
    .worker_rating_total span:before,
    .worker_rating_total span:after
    {
      display: block;
      margin  :0;
      padding: 0;
      line-height: 1;
      text-align: center;
    }

    .worker_rating_total.sp_short span:after
    {
        display: none;
    }

    .worker_rating_total.sp_short p.icon{
      width:40px;
    }

    .worker_rating_total.sp_short p.icon{
      width:40px;
    }
    .worker_rating_total.sp_short p.number{
      font-size:75%;
    }



    /* ================================================================================================ */
    /**
     * 通常入力フォーム用テーブル
     * 詳細表示用テーブルも同じデザイン
     */

    /* ######## テーブル ########*/
    /* テーブル全般 */
    table.form{
        border: none;
    }

    table.form tr th,
    table.form tr td{
        box-sizing:border-box;

        display: block;
        float: left;
        width: 100%;
        text-align: left;
        border: solid 1px #ccc;
    }

    table.form tr th{
        margin-top:5px;
        padding: 7px 15px;
        border-bottom: none;
        font-weight: bold;
    }


    table.form tr td select,
    table.form tr td input[type="text"]{
        box-sizing:border-box;
        width:90%;
    }

    /**
     * 一覧表示リスト用テーブル
     */

    /* 見出しセル */
    table.list thead {
        display: none;
    }

    /* 各セル */
    table.list tr {
        border-bottom: 3px dotted #ccc;
    }

    table.list th {
        display: block;
        float: left;
        width: 98%;
    }

    table.list td {
        display: block;
        float: left;
        width: 98%;
    }
    table.list td .div-badger{
        float: left;
    }

    /* ---------------------
     TOPページ
    ------------------------*/

    /* ---------------------
     原稿：一覧
    ------------------------*/

    #step_bar_box{
        display: none;
    }

    /* ---------------------
     あんしん定額プラン
    ------------------------*/

    /* ---------------------
     プラン確認(オーナー)：拠点別利用料金
    ------------------------*/
    .price_base_list_for_sp{
        display: block;
    }
    .price_base_list_for_pc{
        display: none;
    }

    /* ---------------------
     プラン確認(店長)：利用料金
    ------------------------*/
    .price_detail_for_sp{
        display: block;
    }
    .price_detail_for_pc{
        display: none;
    }

    div.each_block.planbtn{
        float:none;
        display:inline-block;
        width: 80%;
        margin-top: 15px;
    }

    .info_box{
        display: block;
        margin: 10px;
        padding-left: 5px;
        border: 3px solid #ccc;
        border-radius: 12px;
    }

    /* ---------------------
     申し込み画面ボタン
     -----------------------*/
    .plan_btn_for_sp{
        display: block;
    }
    .plan_btn_for_pc{
        display: none;
    }

    /* ================================================================================================ */
    /*  ページ個別設定                                                                                  */
    /* ================================================================================================ */
    /* ---------------------
     TOPページ
    ------------------------*/
    div.each_block {
        float: left;
        width: 300px;
        margin: 5px 5px 10px 5px;

        padding: 10px;
    }
    div.each_block.small {
        width: 40%;
    }
    div.each_block.large {
        float: none;
        display:inline-block;
        max-width:400px;
        width:90%
    }

    div.each_block div.each_block_header{
        width:  100%;
        height: 90px;
    }

    /* ---------------------
     原稿：一覧
    ------------------------*/

    /* ---------------------
     原稿：詳細
    ------------------------*/

    /* ---------------------
     原稿：入力(編集)
    ------------------------*/
    table.work.form{
        border: none;
    }

    table.work.form tr th,
    table.work.form tr td{
        box-sizing:border-box;

        display: block;
        float: left;
        width: 100%;
        text-align: left;
        border: solid 1px #ccc;
    }

    table.work.form tr th{
        margin-top:5px;
        padding: 7px 15px;
        border-bottom: none;
        font-weight: bold;
    }
    table.work.form tr td{
        border-top: none !important;
    }


    table.work.form th:first-of-type{
        /*margin-top:0;*/
    }


    table.work.form tr td.help{
        display: none;
    }

    table.work.form tr td textarea{
        width:85%;
    }

    table.work.form tr td select,
    table.work.form tr td input[type="text"]
    {
        box-sizing:border-box;
        width:85%;
    }


    table.work.form input.address,
    table.work.form input.station{
        width:85%;
    }

    table.work.form .address_title{
        width: auto;
        display: block;
        text-align: left;
        margin-top: 5px;
    }

    table.work.form select.prefecture{
        /*width:50%;*/
        width:100px;
    }

    table.work.form tr td select[name^="n_work_time"],
    table.work.form tr td select[name^="n_rest_time"],
    table.work.form tr td select[name^="n_adopt_time"],
    table.work.form tr td select[name^="n_app_accept_start_time"],
    table.work.form tr td select[name^="n_app_accept_end_time"]
    {
        /*width: 80px;*/
        width: 73px;
    }
    table.work.form tr td select[name^="n_work_time"].day,
    table.work.form tr td select[name^="n_rest_time"].day,
    table.work.form tr td select[name^="n_adopt_time"].day,
    table.work.form tr td select[name^="n_app_accept_start_time"].day,
    table.work.form tr td select[name^="n_app_accept_end_time"].day
    {
        width: 80px;
    }


    table.form .pre_comment{
        width: auto;
        display: block;
        text-align: left;
        margin-top: 5px;
    }


    table.work.form tr td span.pre_comment{
        display: block;
    }


    /* ---------------------
     原稿：確認
    ------------------------*/

    /* ---------------------
     原稿：完了
    ------------------------*/

    /* ---------------------
     ワーカー：一覧
    ------------------------*/
    .app_adopt_term{
        float: left;
    }


    /* ---------------------
     ワーカー：詳細
    ------------------------*/


    /* ---------------------
     拠点選択、ひな型選択：一覧
    ------------------------*/
    .list_box{
        box-sizing:border-box;
        padding: 0 5px;
        width: 100%;
    }

    .list_box ul li input[type="checkbox"],
    .list_box ul li input[type="radio"]{
        margin-left: 10px; 
    }


    .list_box ul li label{
        width: 80%;
    }

    .list_box ul li{
        margin: 2%;
    }

    /* ---------------------
     募集する職種（事例集）(m17)
    ------------------------*/
    /* ▼ ステップ１-２：募集する職種（事例集） /m17/m1701.html ▼ */


    table.o_detail th {
        box-sizing:border-box;

        display: block;
        float: left;
        width: 100%;
        text-align: left;
        margin-top:5px;
    }



    table.o_detail td {
        box-sizing:border-box;

        display: block;
        float: left;
        width: 100%;
        min-height: 1.4em;
    }
    table.o_detail td.value {
        border-bottom: none;
    }

    table.o_detail td.helpTips {
        border: 1px solid #555;
        border-top: none;
        width: 100%;
    }


    table.o_detail td.hanei {

    }

    table.o_detail select#n_template_prototype_id{
        width:100%;
        font-size: 12px;
    }

    /* ▲ ステップ１-２：募集する職種（事例集） /m17/m1701.html ▲ */


    /** プラン選択 */
    div.plan_select_block {
        float: left;
        width: 300px;
        margin: 5px 5px 10px 5px;

        padding: 10px;
    }
    div.plan_select_block.small {
        width: 40%;
    }
    div.plan_select_block.large {
        float: none;
        display:inline-block;
        max-width:400px;
        width:90%
    }

    div.plan_select_block div.plan_select_block_header{
        width:  100%;
        height: 90px;
    }

    /**
     採用取消
    **/
    /* ---------------------
     採用後評価注意
    ------------------------*/
    .adopt_cancel_warning_sp{
        display: block;
    }
    .adopt_cancel_warning_pc{
        display: none;
    }

    /* ######## プラン表示のブロックリンク ########*/
    div.plan_disp_block {
        max-width: 270px;
        width: 270px;
        font-size: 13px;
    }

    /* 募集作成確認画面の応募受付期間表示(SP) */
    .work_create_app_accept_sp {
        display:block;
    }

    /* 募集作成確認画面の応募受付期間表示(PC) */
    .work_create_app_accept_pc {
        display:none;
    }

}

/* ############  ###########*/
@media screen and (max-width:360px){ /* SP */
    .worker_photo {
        margin-right: 15px;
    }

    .exp p {
        font-size: 11px;
    }

}