@charset "utf-8";
@import url("general.css");
@import url("reset.css?x");
/* ================================================================================================ */
/* ######## 初期値変更 ########*/
body{
/*    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana,Arial,Osaka,sans-serif;*/
    font-family: "メイリオ", "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Meiryo, Geneva, Arial, Verdana, sans-serif;

    font-size:18px;
    line-height:1.4;
    color:#333;
    background:#FFF;
}


/*-----------------------*/
/*おてつだいワーカーマップ*/
/*-----------------------*/

/*マップ*/
.map{
  box-sizing: border-box;
  display: block;
  height: 320px;
  width: 100%;
}

/*コンテンツの範囲*/
.section-basic{
  font-size: 10px;
  padding: 20px 0;
}

/*コンテンツを並べる*/
.section-basic__group{
    display: flex;
}

/*見出し*/
.section-basic__heading{
  color: green;
  border-left: 4px solid green;
  font-size: 20px;
  font-weight: bold;
  padding-left: 6px;
}

/*おてつだいワーカーマップの解説範囲*/
.form-input__explanation{
    color: black;
    background-color: #FFEEFF;
/*    border: 1px solid red;*/
    display: block;
    font-size: 12px;
    margin: 4px 0;
    padding: 4px;
}

/*おてつだいワーカーマップの解説の見出し*/
.form-input__explanation-heading{
    color: red;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 4px;
}

/*おてつだいワーカーマップの解説の内容*/
.form-input__explanation-text{
    color: black;
    display: block;
    font-size: 12px;
    padding: 4px;
}

/*説明箇所*/
.form-input__description{
    color: gray;
    display: flex;
    font-size: 12px;
}

/*説明箇所：赤字*/
.form-input__description-red{
    color: red;
    }

/*説明箇所：青字*/
.form-input__description-blue{
    color: blue;
    }


/*-----------------------*/
/*店舗選択*/
/*-----------------------*/

.card-base-head{
    color: black;
    border: 1px solid gray;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 10px;
    position: relative;
}

/*表示名*/
.card-base-head__sort{
    display: inline-block;
  }

/*記号*/
.card-base-head__arrow::after{
    content:"▼";
    width: 20px;
    float: right;
}

/*選択パネル*/
.card-base-head__panel{
    box-sizing: border-box;
    display: none;
    left: 0;
    position: absolute;
    top: 36px;
    width: 100%;
    z-index: 6;
  }

/*選択リスト*/
.card-base-head__list{
    background-color: #fff;
    border: 1px solid #CCC;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    max-height: 650px;
    min-width: 140px;
    overflow-y: auto;
  }

/*選択リストのアイテム*/
.card-base-head__list-item{
    display: block;
    padding: 10px;
    position: relative;
}

/*チェックボックスを非表示*/
.card-base-head__check-option{
    display: none;
}

/*ラベルにあたるところ*/
.card-base-head__check-label{
    font-weight: normal;
}


/*-----------------------*/
/*ワーカーレポートの受け取りボタン*/
/*-----------------------*/

.radio{
    margin: 20px 0 40px 0;
}
.radio-input{
    display: none;
}
.radio-input + label{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
  font-size: 14px;
}
.radio-input + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio-input:checked + label{
  color: #009a9a;
}
.radio-input:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: #009a9a;
  border-radius: 50%;
}

.radio-input + label::active{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: #009a9a;
  border-radius: 50%;
}


/*-----------------------*/
/*タブ*/
/*-----------------------*/

.tab{
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

/*タップされている状態のもの*/
.tab__item{
    padding: 9px 0;
    border-bottom: 1px solid green;
    background-color: white;
    color: green;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

/*タップされている状態のもの*/
.tab__active{
    padding: 9px 0;
    border-bottom: 5px solid green;
    background-color: #e2edd7;
    color: green;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
}

/*タブ切り替え*/
/*区画。タップで表示。*/
.tab__pane{
  display: none;
}

/*デフォルトで「掲載件数」を表示させておく*/
.tab__pane-active{
  display: block;
}


/*-----------------------*/
/*イベント（共通）*/
/*-----------------------*/

/*カルーセル表示*/
.carousel{
    display: flex;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

/*イベントの範囲*/
.event{
    background-color: #fff; /*白色*/
    border: 1px solid gray;
    box-sizing: border-box;
    margin-right: 6px;
    overflow: hidden;
    padding: 8px;
    height: 244px;
    width:350px;
    display: block;
    flex: none;
  }

/*イベントの見出し*/
.event__heading{
    color: gray;
    font-size: 14px;
    font-weight: bold;
    padding: 4px;
  }

/*チェッカーのコンテナ*/
.event__checker{
    color: gray;
    display: flex;
    font-size: 12px;
    margin-left: auto;
}

/*チェッカーの内容*/
.event__check{
    background-color: #fff; /*白色*/
    border: 1px solid gray;
    border-radius: 4px;
    padding: 4px 6px;

}

/*イベントのコンテナ*/
.event__container{
    color: gray;
    display: flex;
    margin-bottom: 10px;
  }

/*募集内容のコンテナ*/
.event__container-client{
    background-color: white;
    border-radius: 6px;
    color: gray;
    display: flex;
    padding: 6px;
  }

/*ワーカー詳細のコンテナ*/
.event__detail-worker{
    display: block;
    font-size: 12px;
    height: 70px;
}

/*依頼者詳細のコンテナ*/
.event__detail-client{
    display: block;
    font-size: 12px;
    height: 60px;
}

/*依頼者画像のコンテナ*/
.event__detail-client-photo{
    display: block;
    margin-left: auto;
}

/*詳細を見るリンク*/
.event__more{
    color: blue;
    display: block;
    font-size: 10px;
    text-align: center;
    padding: 6px;
}

/*ワーカー画像*/
img.photo-worker{
    font-family: "object-fit: contain;";   /*IE対策*/
    object-fit: contain;
    width: 60px;
    height: 40px;
    margin: 0 8px 0 0;
}

/*依頼者画像*/
img.photo-client{
    font-family: "object-fit: contain;";   /*IE対策*/
    object-fit: contain;
    width: 78px;
    height: 52px;
}

/*ワーカー・依頼者の名前*/
.event__name{
    color: black;
    display: block;
    font-size: 14px;
    font-weight: bold;
}

/*ワーカーの登録住所（市区町村）*/
.event__address{
    color: gray;
    margin: 2px 0 2px auto;
    font-size: 12px;
}

/*ワーカーのPR*/
.event__introduction{
    margin: 2px 0;
    height: 32px;
    width: 268px;
}

/*依頼者の募集概要*/
.event__item{
    margin: 2px 0;
}

/*イベント発生時間*/
.event__date{
    color: gray;
    display: block;
    font-size: 10px;
    padding: 4px;
    text-align: right;
}

/*評価のコンテナ*/
.event__evaluation{
    align-items: center;
    display: flex;
    font-size: 10px;
}

/*また働きたい！*/
.event__evaluation-heart::before{
    padding-right: 2px;
    color: pink;
    content: "♥";
    width: 10px;
}

/*いいね！*/
.event__evaluation-sun::before{
    padding-right: 2px;
    color: orange;
    content: "☀";
    margin-left: 4px;
    width: 10px;
}

/*おしい*/
.event__evaluation-cloud::before{
    padding-right: 2px;
    color: gray;
    content: "☁";
    margin-left: 4px;
    width: 10px;
}

/*ざんねん*/
.event__evaluation-rainy::before{
    padding-right: 2px;
    color: blue;
    content: "☂";
    margin-left: 4px;
    width: 10px;
}

/*採用取消*/
.event__evaluation-cancel::before{
    padding-right: 2px;
    color: red;
    content: "取消";
    margin-left: 4px;
    width: 20px;
}

/*欠勤*/
.event__evaluation-yasumi::before{
    padding-right: 2px;
    color: red;
    content: "休";
    margin-left: 4px;
    width: 10px;
}


/*-----------------------*/
/*イベント（採用）*/
/*-----------------------*/
.event-employment{
    background-color: #E6FFE9; /*薄いグリーン*/
    border: 1px solid green;
    box-sizing: border-box;
    margin-right: 6px;
    overflow: hidden;
    padding: 6px;
    height: 244px;
    width:350px;
    display: block;
    flex: none;
  }

/*イベントの見出し*/
.event__heading-employment{
    font-size: 14px;
    font-weight: bold;
    padding: 4px;
    color: green;
  }

/*チェッカー*/
.event__check-employment{
    border: 1px solid green;
    border-radius: 4px;
    background-color: green;
    padding: 4px 6px;
    color: white;
}


/*-----------------------*/
/*イベント（応募）*/
/*-----------------------*/
.event-application{
    background-color: #D7EEFF; /*薄いブルー*/
    border: 1px solid blue;
    box-sizing: border-box;
    margin-right: 6px;
    overflow: hidden;
    padding: 6px;
    height: 244px;
    width:350px;
    display: block;
    flex: none;
  }

/*イベントの見出し*/
.event__heading-application{
    font-size: 14px;
    font-weight: bold;
    padding: 4px;
    color: blue;
  }

/*チェッカー*/
.event__check-application{
    border: 1px solid blue;
    border-radius: 4px;
    background-color: blue;
    padding: 4px 6px;
    color: white;
}













































/* aタグ */
a{ 
    color:#305D82;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
    opacity:0.5;
}
a:visited{
    color:#305D82;
}
a:link{
    color:#305D82;
}
a.normal{ 
    text-decoration: underline;
    color:#00F;
}

#header_box a img:hover,
#contents   a img:hover,
#pageup     a img:hover{
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;
}


input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="search"]{
    -webkit-appearance:none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box;

    height: 36px;
    padding: 7px 10px;
    margin-left: 1px;
    margin-right: 1px;

    font-size: 14px;
    line-height: 1.66667;
    color: #333333;
    background-color: white;
    background-image: none;
    border: 1px solid #DDDccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
    -webkit-transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
    -o-transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
    transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
}

textarea{
    -webkit-appearance:none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box;

    padding: 7px 10px;
    margin-left: 1px;
    margin-right: 1px;

    font-size: 14px;
    line-height: 1.66667;
    color: #333333;
    background-color: white;
    background-image: none;
    border: 1px solid #DDDccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
    -webkit-transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
    -o-transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
    transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
}

/* placeholderをフォーカスした時に空にする*/
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }


/* select */
select {
/*
    -webkit-appearance:none;
*/
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box;

    height: 36px;
    padding: 7px 10px;
    margin-left: 1px;
    margin-right: 1px;

    font-size: 14px;
    line-height: 1.66667;
    color: #333333;
    background-color: white;
    background-image: none;
    border: 1px solid #DDDccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
    -webkit-transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
    -o-transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
    transition: border-color ease-in-out 0.12s, box-shadow ease-in-out 0.12s;
}

/* ボタン 既存のbutton/submit */
input[type="submit"],
input[type="button"] {
    -webkit-appearance:none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box;

    padding: 0 1.2em;

    float: none;
    z-index: auto;

    cursor: default;
    opacity: 1;
    overflow: visible;
    border: 1px solid rgba(211,211,211,1);
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    font: normal normal bold 1em/2em Arial, Helvetica, sans-serif;
    color: rgba(114,114,114,1);
    -o-text-overflow: clip;
    text-overflow: clip;
    white-space: nowrap;
    background: rgba(234,234,234,1);
    -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,0.8) , 0 1px 0 0 rgba(0,0,0,0.298039) ;
    box-shadow: 0 0 1px 1px rgba(255,255,255,0.8) , 0 1px 0 0 rgba(0,0,0,0.298039) ;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8) ;
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    -webkit-transform: none;
    transform: none;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}
input[type="submit"]:hover,
input[type="button"]:hover {
  cursor: pointer;
  border: 1px solid rgba(178,178,178,1);
  color: rgba(76,76,76,1);
  @include box-shadow(0 0 1px 1px rgba(255,255,255,0.8) inset, 0 1px 0 0 rgba(0,0,0,0.298039) );
}
input[type="submit"]:active,
input[type="button"]:active {
  position: relative;
  cursor: default;
  top: 1px;
  border: 1px solid rgba(211,211,211,1);
  color: rgba(114,114,114,1);
  @include background(rgba(247,247,247,1));
  @include box-shadow(0 0 1px 1px rgba(255,255,255,0.8) inset, 0 1px 0 0 rgba(0,0,0,0.298039) inset);
  @include transition(none);
}





hr {
    height: 2px;
    background-color: #ddd;
    border: none;
    color: #DDD;
}

/* バッヂ */
.div-badger{
    position:relative;
}

.badger-number {
    font-size: 16px;
}
.badger-text {
    font-size: 16px;
}
.badger-badge {
    padding: 4px 8px;
}
.badger-outter {
    height: 31px;
    border-radius: 18px;
    border: 0px;
}
.badger-inner {
    height: 31px;
    min-width: 31px;
    border-radius: 18px;
    margin: 0;
}

/* ================================================================================================ */
/* ######## 汎用 ########*/
/* ######## フォントなど ########*/
/* 文字寄せ */
.center{
    text-align:center !important;
}
.left{
    text-align:left !important;
}
.right{
    text-align:right !important;
}
.cancel{
    text-decoration:line-through !important;
}

.nowrap{
    white-space: nowrap;
}

.underline{
    text-decoration: underline;    
}


/* フォントカラー */

.green {
    color:#008000;
}
.blue {
    color:#0000ff;
}
.red {
    color:#ff0000;
}
.gray {
    color:#aaa;
}
.white {
    color:#fff;
}
.black {
    color:#111;
}

.bg-green {
    background:#008000;
}
.bg-blue {
    background:#0000ff;
}
.bg-red {
    background:#ff0000;
}
.bg-gray {
    background:#aaa;
}
.bg-darkgray {
    background:#777;
}
.bg-white {
    background:#fff;
}
.bg-black {
    background:#111;
}

/* font-weight */
.bold{
    font-weight: bold;
}

/* ######## ブロックの配置 ########*/
/* フロート */
.float_left {
    float:left;
}
.float_right {
    float:right;
}

/* display */
.inline {
    display: inline;
}
.inline_block {
    display: inline-block;
}
.none {
    display:none;
}

div.margin_auto {
    margin: auto;
}


/* ######## カラーボタン(a) ########*/
/* ボタン化 */
.btn{ 
    text-align:center;
    /*font-size:14px;*/

    box-shadow:         3px 4px 3px -3px #DDD
    -webkit-box-shadow: 3px 4px 3px -3px #DDD
    -moz-box-shadow:    3px 4px 3px -3px #DDD
    -ms-box-shadow:     3px 4px 3px -3px #DDD

    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius: 3px;
    border-radius:3px;

    /*margin-bottom:5px;*/
    margin-top: 5px;
    
    overflow:hidden;
    display:inline-block;
    line-height:1;
    /*position:relative;*/

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.btn:hover{ 
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;
}
.btn span{
    padding-top:10px;
    padding-bottom:10px;
    display:inline-block;
    background-position: left center !important;
}

/* ボタン 背景色*/
.btn_bg_red_001{
    background: #d93434;
    background-image: -webkit-linear-gradient(top, #d93434, #b82b2b);
    background-image: -moz-linear-gradient(top, #d93434, #b82b2b);
    background-image: -ms-linear-gradient(top, #d93434, #b82b2b);
    background-image: -o-linear-gradient(top, #d93434, #b82b2b);
    background-image: linear-gradient(to bottom, #d93434, #b82b2b);
    color:#FFF;
}


input[type="submit"].btn_bg_red_001,
input[type="button"].btn_bg_red_001{
    background: #d93434;
    background-image: -webkit-linear-gradient(top, #d93434, #b82b2b);
    background-image: -moz-linear-gradient(top, #d93434, #b82b2b);
    background-image: -ms-linear-gradient(top, #d93434, #b82b2b);
    background-image: -o-linear-gradient(top, #d93434, #b82b2b);
    background-image: linear-gradient(to bottom, #d93434, #b82b2b);
    color:#FFF;
    letter-spacing: 2px;
}

input[type="submit"].btn_bg_green_001,
input[type="button"].btn_bg_green_001{
    background: #0F0;
    background-image: -webkit-linear-gradient(top, #2a4, #2a4);
    background-image: -moz-linear-gradient(top, #2a4, #2a4);
    background-image: -ms-linear-gradient(top, #2a4, #2a4);
    background-image: -o-linear-gradient(top, #2a4, #2a4);
    background-image: linear-gradient(to bottom, #2a4, #2a4);
    color:#FFF;
    letter-spacing: 2px;
}

input[type="submit"].btn_bg_gray,
input[type="button"].btn_bg_gray{
    background: #DDD;
/*
    background-image: -webkit-linear-gradient(top, #2a4, #2a4);
    background-image: -moz-linear-gradient(top, #2a4, #2a4);
    background-image: -ms-linear-gradient(top, #2a4, #2a4);
    background-image: -o-linear-gradient(top, #2a4, #2a4);
    background-image: linear-gradient(to bottom, #2a4, #2a4);
*/
    color:#FFF;
    letter-spacing: 2px;
}

/*.btn_bg_gray{       background:url(../images/common/btn_bg_004.gif)  left bottom repeat-x; color:#555 !important; border:1px solid #d9d9d9; padding:0 15px;}*/
/*.btn_bg_darkgray{   background:url(../images/common/btn_bg_002.gif)  left bottom repeat-x; color:#FFF !important; border:1px solid #999; padding:0 15px;}*/
.btn_bg_gray{       background: #eaeaea                              left bottom repeat-x; color:#555 !important; /*border:1px solid #d9d9d9;*/ padding:0 15px;}
.btn_bg_darkgray{   background: #a1a1a1                              left bottom repeat-x; color:#FFF !important; border:1px solid #999; padding:0 15px;}
.btn_bg_blue_001{   background: url(../images/common/btn_bg_006.gif) left bottom repeat-x; color:#FFF !important; border:1px solid #3399cc; padding:4px 15px;}
.btn_bg_blue_002{   background: url(../images/common/btn_bg_006.gif) left bottom repeat-x; color:#FFF !important; padding:4px 15px;  border:2px solid #FFF;}
/*.btn_bg_red_001{ background: url(../images/common/btn_bg_001.gif) left bottom repeat-x; color:#FFF !important; padding:4px 15px;  border:2px solid #FFF;}*/
.btn_bg_yellow_001{ background: url(../images/common/btn_bg_007.gif) left bottom repeat-x; color:#FFF !important; padding:4px 15px;  border:2px solid #FFF; }
.btn_bg_green_001{  background: url(../images/common/btn_bg_003.gif) left bottom repeat-x; color:#FFF !important; padding:0 15px; border:1px solid #369314; }
.btn_bg_green_002{  background: url(../images/common/btn_bg_008.gif) left bottom repeat-x; color:#FFF !important; padding:0 15px; border:1px solid #66cc66;}
/*.btn_bg_green_003{  background: url(../images/common/btn_bg_009.gif) left bottom repeat-x; color:#FFF !important; padding:4px 15px; border:1px solid #339933;}*/
.btn_bg_green_003{  background: #2a4                                                     ; color:#FFF !important; padding:4px 15px; border:1px solid #339933;}


a[class^="btn_bg_"] span,
a[class*=" btn_bg_"] span {
    color:#FFF;
}
a.btn_bg_gray span{
    color:#555;
}


/* 長さ */
.btn_51{  width:51px;   padding:0 !important;}
.btn_73{  width:73px;   padding:0 !important;}
.btn_96{  width:96px;   padding:0 !important;}
.btn_143{ width:143px;  padding:0 !important;}
.btn_151{ width:151px;  padding:0 !important;}
.btn_189{ width:189px;  padding:0 !important;}
.btn_229{ width:229px;  padding:0 !important;}
.btn_276{ width:276px;  padding:0 !important;}

/* 高さ */
.btn_h51{  height: 51px;display: table-cell; vertical-align: middle; line-height: 1.5;}
.btn_h73{  height: 73px;display: table-cell; vertical-align: middle; line-height: 1.5;}
.btn_h96{  height: 96px;display: table-cell; vertical-align: middle; line-height: 1.5;}
.btn_h143{ height:143px;display: table-cell; vertical-align: middle; line-height: 1.5;}
.btn_h151{ height:151px;display: table-cell; vertical-align: middle; line-height: 1.5;}
.btn_h189{ height:189px;display: table-cell; vertical-align: middle; line-height: 1.5;}
.btn_h229{ height:229px;display: table-cell; vertical-align: middle; line-height: 1.5;}
.btn_h276{ height:276px;display: table-cell; vertical-align: middle; line-height: 1.5;}




/* 検索サブミットボタン（小さいやつ） */
#search_submit_buttom {
    cursor: pointer;
    margin:0;
    padding: 0 4px;
    min-height:0;
}


/* ######## ブロックリンク ########*/
div.each_block {
    box-sizing: content-box;
/*    border-radius: 5px; */
    float: left;
    width: 300px;
    margin: 5px 10px 10px 15px;
    padding: 10px;
/*    border: 1px solid #dddddd; */
/*    border-radius: 3px; */
    background-color:#fb7;
    color: #fff;
}
div.each_block.small {
    box-sizing: content-box;
    width: 190px;
    display:inline-block;
}

div.each_block.large {
    background-color:#ff9642;
    float: none;
    display:inline-block;
    max-width:400px;
    width:95%
}

div.each_block:hover {
    opacity:0.9;
    text-decoration: underline;
}


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

div.each_block_header p{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    word-break: keep-all;

    text-align: center;
}

div.each_block p.each_block_description{
    font-size: 11px;
    margin: 0 0 10px;
    color: #333;
}



/* ######## ツールチップ ########*/
i.cluetip{
    color:#060;
}

.comment_block{
    border: dashed 0px blue;
    margin: 5px;
    padding: 5px;
    background-color: #eee;
}

/* 廃止予定 */
/* ######## 全体グレーアウト用 ########*/
div#gray_panel{
    background-color : #333; /* 元の値: #333 */
    width    : 100%;
    height   : 9999px;
    position : fixed;
    top      : 0;
    left     : 0;

    opacity    : 0.5;
    filter     : alpha(opacity=50);     /* IE 6,7*/
    -ms-filter : "Alpha(Opacity=50)";   /* For IE 8 */

    display  : none;
    z-index  : 40;
}

/* ######## カレンダー(datepicker) ########*/
/* 日曜日のカラー設定 */
.ui-datepicker-calendar tbody tr td:first-child a{
    background: none!important;       /* 背景画像を利用しているのでリセット*/
    background-color: #fcc!important; /* 背景色を設定*/
    color: #f00!important;            /* 文字色を設定*/
}
/* 土曜日のカラー設定 */
.ui-datepicker-calendar tr td:last-child a{
    background: none!important;       /* 背景画像を利用しているのでリセット*/
    background-color: #ccf!important; /* 背景色を設定*/
    color: #00f!important;            /* 文字色を設定*/
}

.ui-datepicker { z-index: 55 !important; }

/* 廃止予定 */
/* ######## lodaing ########*/
.loading {
  position: fixed;
  top: 40%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  line-height: 100px;
  font-size: 56px;
  color: #fff; /* 元の値: #fff */
  text-align: center;
  background-color: #888;
  opacity: 0.8;
  border-radius: 10px;
}

/* ローディング(背景付き) */
#backdrop_loading {
    background-color : #333;
    width: 100%;
    height: 100%;
    position: fixed;
    height: 9999px;
    z-index: 99999;
    top: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "Alpha(Opacity=50)";
    display: none;
}
#backdrop_loading_spinner {
  position: fixed;
  top: 40%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  line-height: 100px;
  font-size: 56px;
  color: #fff;
  text-align: center;
  background-color: #888;
  display: none;
  opacity: 0.8;
  border-radius: 10px;
  z-index: 100000;
}

/* ローディング(背景なし) */
#simple_loading {
    background-color : #333;
    width: 100%;
    height: 100%;
    position: fixed;
    height: 9999px;
    z-index: 99999;
    top: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "Alpha(Opacity=50)";
    display: none;
}
#simple_loading_spinner {
  position: fixed;
  top: 40%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  line-height: 100px;
  font-size: 56px;
  color: #fff;
  text-align: center;
  background-color: #888;
  display: none;
  opacity: 0.8;
  border-radius: 10px;
  z-index: 100000;
}

/* ================================================================================================ */
/* ======== 評価の共通部品 ========*/
/* #### レビュー部品 ####*/
/* レビュータイトル */
.rating_comment_title {
  background: #eee;
}
/* 返答 */
.response_line_2 li.response_head{
  background: #eee;
}
.response_line_2 li.response_body{
  border: 2px solid #eee;
}

/* #### しごとば評価(拠点への評価) ####*/
.base_rating_total div{
  margin: 10px 5px 10px 0;
}
.base_rating_total span:before,
.base_rating_total span:after
{
  display: block;
  margin  :0;
  padding: 0;
  line-height: 1;
  text-align: center;
}
.base_rating_total p.icon{
  width:60px;
}

/* １：また働きたい：ハート */
span.b-rat1:before{
  font-family: FontAwesome;
  content: "\f004";
  color:#E510AA;
  font-size:100%;
}
.base_rating_total span.b-rat1:after{
  content: "また働きたい！";
  color:#E510AA;
  font-size:35%;
}

/* ２：いいね：太陽 */
span.b-rat2:before{
  content: "\02600";
  color:#EE6600;
  font-size:100%;
}
.base_rating_total span.b-rat2:after{
  content: "いいね！";
  color:#EE6600;
  font-size:40%;
}

/* ３：おしい：くもり */
span.b-rat3:before{
  content: "\f0c2";
  font-family: FontAwesome;
  color:#656565;
}
.base_rating_total span.b-rat3:after{
  content: "おしい";
  color:#656565;
  font-size:40%;
}

/* ４：ざんねん：雨 */
span.b-rat4:before{
  content: "\f0e9";
  font-family: FontAwesome;
  color:#4169e1;
}
.base_rating_total span.b-rat4:after{
  content: "ざんねん";
  color:#4169e1;
  font-size:40%;
}

/* ５は欠番 */
/* 6：(ワーカー)欠勤(連絡あり)(利用なし) */
span.b-rat6:before{
  content: "\032A1";
  color:#F55;
}
.worker_rating_total span.b-rat6:after{
  content: "--";
  color:#F55;
  font-size:40%;
}
/* 7：(ワーカー)欠勤(連絡なし)(利用なし) */
span.b-rat7:before{
  content: "\032A1";
  color:#F55;
}
.worker_rating_total span.b-rat7:after{
  content: "--";
  color:#F55;
  font-size:40%;
}
/* 8：(ワーカー)ワーカー都合キャンセル(利用なし) */
span.b-rat8:before{
  content: "\032A1";
  color:#F55;
}
.worker_rating_total span.b-rat8:after{
  content: "--";
  color:#F55;
  font-size:40%;
}


/* ９：採用取消：取消 */
span.b-rat9:before{
  content: "\ff58";
  font-family: 'icomoon' !important;
  color:#F55;
}
.base_rating_total span.b-rat9:after{
  content: "採用取消";
  color:#F55;
  font-size:40%;
}

/* #### おしごと評価(ワーカーへの評価) ####*/
.worker_rating_total div{
  margin: 10px 0 10px 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 p.icon{
  width:60px;
}

/* １：グッジョブ：ハート */
span.w-rat_osumi:before{
  font-family: FontAwesome;
  content: "\f004";
  color:#bf9000;
  font-size:100%;
}
.worker_rating_total span.w-rat_osumi:after{
  content: "お墨付き";
  color:#bf9000;
  font-size:40%;
}

/* １：グッジョブ：ハート */
span.w-rat1:before{
  font-family: FontAwesome;
  content: "\f004";
  color:#E510AA;
  font-size:100%;
}
.worker_rating_total span.w-rat1:after{
  content: "グッジョブ！";
  color:#E510AA;
  font-size:40%;
}

/* ２：いいね：太陽 */
span.w-rat2:before{
  content: "\02600";
  color:#EE6600;
  font-size:100%;
}
.worker_rating_total span.w-rat2:after{
  content: "いいね！";
  color:#EE6600;
  font-size:40%;
}

/* ３：おしい：くもり */
span.w-rat3:before{
  content: "\f0c2";
  font-family: FontAwesome;
  color:#656565;
}
.worker_rating_total span.w-rat3:after{
  content: "おしい";
  color:#656565;
  font-size:40%;
}

/* ４：ざんねん：雨 */
span.w-rat4:before{
  content: "\f0e9";
  font-family: FontAwesome;
  color:#4169e1;
}
.worker_rating_total span.w-rat4:after{
  content: "ざんねん";
  color:#4169e1;
  font-size:40%;
}

/* ５は欠番 */
/* ６：欠勤連絡あり */
span.w-rat6:before{
  content: "\032A1";
  color:#F55;
}
.worker_rating_total span.w-rat6:after{
  content: "欠勤";
  color:#F55;
  font-size:40%;
}

/* 7：欠勤連絡なし */
span.w-rat7:before{
  content: "\032A1";
  color:#F55;
}
.worker_rating_total span.w-rat7:after{
  content: "欠勤";
  color:#F55;
  font-size:40%;
}

/* 8：ワーカー都合キャンセル */
span.w-rat8:before{
  content: "\032A1";
  color:#F55;
}
.worker_rating_total span.w-rat8:after{
  content: "欠勤";
  color:#F55;
  font-size:40%;
}

/* ９：(依頼者)採用取消：取消(利用なし) */
span.w-rat9:before{
  content: "\ff58";
  font-family: 'icomoon' !important;
  color:#FF0000;
}
.worker_rating_total span.w-rat9:after{
  content: "採用取消";
  color:#FF0000;
  font-size:40%;
}

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



/* ================================================================================================ */



/* ================================================================================================ */
/*  基本のレイアウト                                                                                */
/* ================================================================================================ */
/* ---------------------
 header
------------------------*/
#head_pc{
    display: block;
}
#head_sp{
    display: none;
}

#header{
    margin-bottom:10px;
    width:100%;
    background-color:#FFF;
    top:0px;
    position:fixed;
    z-index:50;
}

.ver_experience #header{border-bottom:2px solid #fbb03b;}
.ver_short #header{border-bottom:2px solid #f4165b;}
.ver_regist #header{border-bottom:2px solid #009245;}

#headWrap{
    /*background:url(../images/common/head_bg_002.png) right bottom no-repeat;*/
    max-width :945px;
    margin:0 auto;
    padding:0 0 0 0;
    display:block;
}

#headerAfterWrap{
    max-width :945px;
    margin:0 auto;
    padding:0 0 0 0;
    display:block;
}

#header .header_left{
    float:left;
}

#header .header_right{
    float:right;
}

/* ---------------------
 footer
------------------------*/
#footer{
    text-align:left;
    padding:10px 5px;
    margin-top: 20px;
    background:#2a4;
    color:#fff;
    border-bottom:2px solid #888;
    font-size: 12px;

}

#footer a{
    color:#fff;
}

#footWrap{
    max-width :945px;
    margin:0 auto;
    padding:0 0 0 0;
    display:block;
}

#footer .footer_left{
    float:left;
}

#footer .footer_right{
    float:right;
}


/* ---------------------
 ccontents
------------------------*/
#contents{
    max-width: 1000px; /* ページの幅 */
    margin: 0 auto; /* センタリング */
    padding-left:  5px; 
    padding-right: 5px;
}



/* ---------------------
 contents_l 1pain
------------------------*/

.contents_l{
    float:left;
    /*max-width: 940px;*/
    width: 100%;
}

.contents_l h2{
    left bottom repeat-x; border:1px solid #ddd; font-weight:bold; margin-bottom:15px; font-size:17px;
    padding:7px 15px;
    background: #ffdede;
    background: -moz-linear-gradient(top, #fff 0%, #fff 15%, #DDD);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.15, #fff), to(#DDD));
    background: -webkit-linear-gradient(top, #fff 0%, #DDD 100%);
    background: -o-linear-gradient(top, #fff 0%, #DDD 100%);
    background: -ms-linear-gradient(top, #fff 0%, #DDD 100%);
    background: linear-gradient(top, #fff 0%, #DDD 100%);

}




/* ---------------------
 contents_m (2pain左メイン)
------------------------*/
.contents_m{
    float:left;
    max-width: 700px;
    width: 100%;
}


.contents_m h2{
    left bottom repeat-x; border:1px solid #ddd; font-weight:bold; margin-bottom:15px; font-size:17px;
    padding:7px 15px;
    background: #ffdede;
    background: -moz-linear-gradient(top, #fff 0%, #fff 15%, #DDD);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.15, #fff), to(#DDD));
    background: -webkit-linear-gradient(top, #fff 0%, #DDD 100%);
    background: -o-linear-gradient(top, #fff 0%, #DDD 100%);
    background: -ms-linear-gradient(top, #fff 0%, #DDD 100%);
    background: linear-gradient(top, #fff 0%, #DDD 100%);

}



/* ---------------------
 contents_s (2pain右サイドメニュー  )
------------------------*/
.contents_s{
    float:left;
    width:216px;
    padding:5px;
    margin-left: 10px;
    background:none;
    background-color:#EFE;
    text-align:center;
}

/* 共通スタイル */
.contents_s .contents_box {
    margin-bottom: 10px;
}

.contents_s .contents_box .side_menu{
    border:1px solid #EEE;
    border-top:0 none;
    padding:0px;
    background-color: #FFF;
    font-size: 12px;
    border:none;
    text-align:left;;
}

/* サイドメニュー ul dl */
.contents_s .contents_box .side_menu dl{
    margin:10px; 
    padding-bottom:10px;
    line-height:1.5;
    border-bottom: 2px #EEE dotted;
}


.contents_s .contents_box .side_menu ul{
    border-top:0;
}

.contents_s .contents_box .side_menu li{
    display:block;
    line-height:1.4;
    /*padding:10px;*/
}

.contents_s .contents_box .side_menu ul{
    border-top:0;
}

.contents_s .contents_box .side_menu li{
    display:block;
    line-height:1.4;
    /*padding:10px;*/
}

/* サイドメニュー p */
.contents_s .contents_box .side_menu p{
    line-height:1.3em;
    padding:3px 0;
}


/* サイドメニュー 機能メニュー部 */
.contents_s .contents_box .side_login_menu{
    border:1px solid #EEE;
    border-top:0 none;
    padding:0px;
    background-color: #FFF;
    font-size: 12px;
    border:none;
    text-align:left;;
}

.contents_s .contents_box .side_login_menu ul li{
    box-sizing: border-box;
    display:block;
    margin:3px auto 2px auto;
    padding:3px 15px 3px 35px;

    font-size: 14px;
    width: 95%;

    border:solid 1px #eee;
}


/* サイドメニュー タイトル */
.contents_s .contents_box h2{
    margin:0 auto;
    overflow:hidden;
    /*width:207px;*/ height:37px;
    padding:0 0 15px 0;
    text-align:center;
    background:none;
    border-bottom:1px solid #E2E5DF;
}


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

/* ######## テーブル ########*/
/* テーブル全般 */
table.form,
table.detail {
    /*border-collapse: separate;*/
    /*border-spacing: 2px;*/
    border:1px #bbbbbb solid;
    /*font-size:14px;*/
    margin-top: 5px;
    width:100%;
}
/* 各セル */
table.form   td, table.form th,
table.detail td, table.detail th {
    padding:6px;
}

/* 見出しセル */
table.form th,
table.detail th {
    font-weight:normal;
    text-align:left;
    background-color:#eeeeee;
    border-bottom: 1px dotted #888888;

    width:25%;
    white-space: nowrap;
}

table.form td,
table.detail td {
    background-color:#ffffff;
    border:1px dotted #888888;
}

/* 右側に表示するヘルプメッセージ */
table.form .help {
    padding-left: 10px;
    background-color:#ffffee;
    font-size: 80%;
    display: none;
}

table.none th,
table.none td {
    margin:0;
    padding:0;
    font-weight:normal;
    border:0px #888888;
    color:#000000;
    background-color:#FFFFFF;
}


table.detail td {
    border-bottom: 1px dotted #888888;
}

 /* normalのフォームテーブル */
table.normal.form tr th{
    padding:20px 15px;
}

table.normal.form tr td{
    padding: 15px 15px;
}

/* ######## ページャー ########*/





/* ######## 他 ########*/
/* 入力項目の[必須] */
.must {
    color: #eee;
    margin: 0 2px;
    background-color: #f70;
    padding: 5px;
    border-radius: 8px;
    font-size: small;
    white-space: nowrap;
}

/* エラー有り時の噴出し[入力エラー用] */
div#warning{
    position         :static;
    background-color :#ffcccc;
    color            :#993333;
    font-weight      :bold;
    text-align       :center;
    margin           :2px 0;
    padding          :16px 2px;
    border           :1px solid #FF0000;
}

/*  */
span.warning{
    color            :#993333;;
}

input[type="text"].input_error,
input[type="number"].input_error,
input[type="tel"].input_error,
input[type="password"].input_error,
input[type="search"].input_error{
    outline: 1px #faa dotted;
    background-color: #fdd;
}

/* 入力エラー */
select.input_error{
    outline: 1px #faa dotted;
    background-color: #fdd;
}

textarea.input_error{
    outline: 1px #faa dotted;
    background-color: #fdd;
}

ul li.input_error{
    background-color: #fee!important;
}


span.input_error{
    color:#f00;
    font-weight: bold;
    background-color: #fee;
    padding:2px 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    display:inline-block;
}
span.input_error:before {
  content: "\f071\0020";  /*「fa-exclamation-triangle」＋半角スペース*/
  font-family: FontAwesome;
}

div.atention,
p.atention{
    color:#0000FF;
    text-align:center;
    font-weight:800;
    background-color:#EEEEFF;
    padding:10px;
    border: 1px solid #0000FF;
}


/* ================================================================================================ */
/**
 * 一覧表示リスト用テーブル
 */
table.list {
    border:solid 0px #7a7;
    width:100%;
}
/* 奇数行 色変更 */
table.list tr:nth-child(2n+1) {
    background: #cfc;
}

/* 見出しセル */
table.list th {
    font-weight:normal;

    padding: 2px 10px;
    margin:0;
    text-align:center;

    border-left:solid 0px #d3d3d3;
    font-size: 14px;
}

/* 各セル */
table.list td {
    border-left:solid 0px #7a7;
    border-bottom:solid 0px #7a7;
    padding:2px 10px;
}

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

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

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

/* ---------------------
 申し込みボタン
 -----------------------*/
div.each_block.planbtn{
    float:none;
    display:inline-block;
    width: 80%;
    margin-top: 15px;
    background-color:#F94;
}

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

.info_box_shape{
    margin: 10px;
    padding-left: 5px;
    border: 3px solid #DDD;
}

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

/* ================================================================================================ */
/* ---------------------
 汎用：完了画面
------------------------*/
#complete {
    text-align: center;
    border: 0;
    padding: 30px 0 50px 0;
    line-height: 1.4;
}



/* ================================================================================================ */
/*  ページ個別設定                                                                                  */
/* ================================================================================================ */
/* ---------------------
 TOPページ
------------------------*/
.badger-number {
    font-size: 16px;
}
.badger-badge {
    padding: 4px 8px;
}
.badger-outter {
    height: 31px;
    border-radius: 18px;
    border: 0px;
}
.badger-inner {
    height: 31px;
    min-width: 31px;
    border-radius: 18px;
    margin: 0;
}


/* ---------------------
 募集：一覧
------------------------*/
.search_page{
    margin:0 0 10px 0;
    text-align:center;
}

.search_page p{
    /*font-size:13px;*/
    margin:0 0 5px 0;
}

.search_page p span{
    font-weight:bold;
    margin:0 3px;
}

.search_page ul{ border-bottom:1px solid #DBE1E1; padding-bottom:10px; margin-bottom:10px;}
.search_page.top ul{ border-bottom:none; border-top:1px solid #DBE1E1; padding:10px 0 0; margin:10px 0 0;}

.search_page ul li,
.search_page ul span{
    display:inline;
    padding:3px 0;
    /*font-size:14px;*/
}

.search_page li.focus{
    padding:3px 5px;
    font-weight:bold;
}

.search_page li a{
    text-decoration:none;
    padding:3px 5px;
    color:#959595;
}

.search_page li.back a{
    background:#DDD;
}

.search_page li.page a{
    background:#F5F5F5;
}

.search_page li a:hover{ text-decoration:underline;}

div.each_block.worklist{
    float:none;
    display:inline-block;
    width: 130px;
    margin-top: 15px;
}

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


/* ---------------------
 原稿：入力(編集)
------------------------*/
/* タイトル部 */
.work_section_title{
    font-weight: bold;
    color: #fff;
    font-size:24px;
    background-color: #aaa;
    padding: 5px;
}
/*
.use_time_plan .work_section_title{
    background-color: #2a4;
}
.fixed_price_plan .work_section_title{
    background-color: #f4787a;
}
*/

table.work.form tr th{
/*    min-height: 50px;*/
    padding:20px 15px;
    /*background-color: #90ee90;*/
    *background-color: #444;
}

/* そのつどプラン */
.use_time_plan table.work.form tr th {
    background-color: #efe;
    color: #080;
    border: 1px solid #2a4;
}
.use_time_plan table.work.form tr td {
    border: 1px solid #2a4;
}

/* あんしん定額プラン */
/*
.fixed_price_plan table.work.form tr th {
    background-color: #FCC;
}
*/
.fixed_price_plan table.work.form tr th {
    background-color: #fef3f3;
    color: #f4787a;
    border: 1px #f4787a solid;
}
.fixed_price_plan table.work.form tr td {
    border: 1px #f4787a solid;
}

/* タイトル付きのテーブルは、1行目のborder-top無しに */
.use_time_plan    .work_section_title + table.work.form tr:nth-child(1) th:not(.onborder) ,
.use_time_plan    .work_section_title + table.work.form tr:nth-child(1) td:not(.onborder) ,
.fixed_price_plan .work_section_title + table.work.form tr:nth-child(1) th:not(.onborder) ,
.fixed_price_plan .work_section_title + table.work.form tr:nth-child(1) td:not(.onborder) {
    border-top: 0px;
}







table.work.form tr td{
/*    min-height: 50px;*/
/*
    padding-left:  15px;
    padding-right: 15px;
*/
    padding: 15px 15px;
}

table.work.form tr td textarea{
    width:90%;
    height: 250px;
}

table.work.form tr td select,
table.work.form tr td input[type="text"],
table.work.form tr td input[type="tel"]{
    margin-top:2px;
}

table.work.form tr td p{
    vertical-align: middle;
}

/*勤務地*/
table.work.form #meeting_bgsheet .meeting_place,
table.work.form #meeting_bgsheet .dismiss_place{
    padding:10px;
    background-color: #efe;
    border: #DDD 2px dotted;
}

table.work.form select.prefecture{
}

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

table.work.form .address_title{
    width: 120px;
    display: inline-block;
    text-align: right;
}

/*地図*/
table.work.form div.map{
    width:92%;
    height:350px;
    margin: 5px auto;
    border: 1px dotted gray;
}

/*平均時給*/
table.work.form #ave_wage .tooltipBody{
    width       : 300px;
    font-size   : small;
    left        : 0em;
    top         : -10em;
    white-space : normal;
    word-break  : break-all;
    padding     : 2px;
    background: rgba(45,45,45, 0.5);
}

table.work.form #ave_wage div.ave_wage_value_wrap{
    text-align: center;
    padding: 5px;
    font-size: 42px;
    color: rgb(34, 34, 255);
    font-weight: bold;
}


/*時給・日給*/
table.work.form .select_radio ul li{
    box-sizing: border-box;
    display: block;
    float: left;
    background-color: #ffe;
    margin: 5px 10px;
    padding: 0 0 0 10px;
    border: 3px solid #DDD;
    width: 120px;
    border-radius: 12px;
}
table.work.form .select_radio ul li input[type="radio"]{
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
table.work.form .select_radio ul li label{
    display: inline-block;
    padding: 10px 0;
    width: 70%;
    vertical-align: middle;
}

table.work.form .select_radio ul li:hover{
    opacity: 0.7;
    background-color: #ffe;
    border-color: #eee;
    color: #000;
}
table.work.form .select_radio ul li label:hover{
    cursor:pointer;
}

table.work.form .select_radio ul li.chk{
    border-color: #fa6;
    /*background-color: #fee;*/
/* boldにより高さが変わってアイコンが移動してしまう問題の為、一旦コメントアウト
    font-weight:bold;
*/
    color: #ff3c00;
}

/*給与*/
table.work.form input[name="n_money"],
table.work.form input[name="n_money_midnight"],
table.work.form input[name="n_money_date"]
{
   width: 100px;
}


/*交通費*/
table.work.form select[name="n_fare"]{
    /*height: 150px;*/
}


/*給与支払い方法*/
table.work.form .select_payment_method_kind ul li{
    width: 80%;
}
table.work.form .select_payment_method_kind ul li label{
    width: 80%;
}

/*勤務日*/
table.work.form div.workday_select{
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #eee;
}

table.work.form div.workday_select.chk{
    border: 0px solid #ddd;
    background-color: #fff;
}

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_app_accept_start_time"],
table.work.form tr td select[name^="n_app_accept_end_time"]
{
    width: 70px;
    margin-left: 5px;
    margin-right: 5px;
}
table.work.form tr td select[name^="n_work_time"].day,
table.work.form tr td select[name^="n_rest_time"].day{
    box-sizing: border-box;
    width: 80px;
}



/*アピール*/
table.work.form .appeal ul li{
    box-sizing: border-box;
    display: inline-block;
    width: auto;
    white-space: nowrap;
    margin: 5px;
    padding: 1px 3px;
    border: 2px solid #eef;
    border-radius: 6px;
}
table.work.form .appeal ul li label{
    padding: 0;
}
table.work.form .appeal ul li input[type="checkbox"]{
    /*display: none;*/
    vertical-align: middle;
}
table.work.form .select_radio ul li.chk{
    color: #ff3c00;
    border: 2px solid;
}


/*強調アピール*/
table.work.form .kyoutyou_appeal ul li{
    display: inline-block;
    width: auto;
    white-space: nowrap;
    margin: 3px;
    padding: 1px 3px;
    /*border: 1px solid #DDD;*/
    border-radius: 6px;
}
table.work.form .kyoutyou_appeal ul li input[type="checkbox"]{
    /*display: none;*/
}
table.work.form .kyoutyou_appeal ul li label{
    opacity: 0.2;
}
table.work.form .kyoutyou_appeal ul li input[type="checkbox"]:checked + label{
    opacity: 1.0;
}


/**/
table.work.form tr td textarea[name^="zh_remarks_"]{
    height: 160px;
}


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

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

/* ---------------------
 ワーカー：一覧
------------------------*/

/* ---------------------
 ワーカー：詳細
------------------------*/
/* 職務経歴 */
table.work.form table.job_career {
    margin: 20px 2%;
}

table.work.form table.job_career thead tr th.title {
    border-top: 1px solid #aaa;
    border: 1px solid #aaa;
    padding: 5px 0px 5px 0px;
    text-align: center;
    background-color: #efefef;
    color: #5e5e5e;
}

/* ---------------------
 拠点選択、ひな型選択：一覧
------------------------*/
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  font-weight:bold;
  color: #ff3c00;
}

section.item_section {
    float: left;
    margin: 0px 14px 5px;
    line-height: 1.6;
}

section.item_section label {
    text-decoration: none;
    display: block;
    overflow: hidden;
}


.list_box{
  /*background-color: #f2f1f0;*/
  padding: 0 20px;
  margin: 0 auto; 
  width: 80%;
}

.list_box ul li{
    display: block;
    background-color: #ffe; 
    margin: 10px;
    padding-left: 5px;
    border: 3px solid #DDD;
    width: 95%;
    border-radius: 12px;
}

/* 募集/ひな型のリストは特殊 */
.list_box.worklist ul li {
    background-color: #fff;
    border-radius: 0px; 
}


.list_box ul li input[type="radio"],
.list_box ul li input[type="checkbox"]{
    width: 20px;
    height: 20px;

    vertical-align: middle;

}

.list_box ul li label{
    display: inline-block;
    padding: 10px 10px 10px 10px;
    width: 90%;
    vertical-align: middle;
}

.list_box ul li:hover{
    opacity: 0.7;
/*    background-color: #ffe; */
    border: 3px solid #eee;
    color: #000;
}
.list_box ul li label:hover{
    cursor:pointer;
}

.list_box ul li input[type="radio"]:checked + label ,
.list_box ul li input[type="checkbox"]:checked + label {
  font-weight:bold;
  color: #ff3c00;
}

.list_box ul li.chk{
    border: 3px solid #fa6;
    /*background-color: #fee;*/
}

.list_box ul li.input_error{
    /*border: 3px solid #f00;*/
    /*background-color: #fee;*/
}

.list_box ul li a{
    color: #333;
    text-decoration: none;
    opacity: 1.0;
}

.list_box table{
    word-break: break-all
}

.list_box table th{
    text-align:center;
}

.list_box table th.icon{
    width: 30px;
    color: #e5993b;
    vertical-align: top;
}

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

#template_prototype{
    width: 90%;
    margin: 10px auto;
}

table.o_detail {
    width: 95%;
    margin-bottom: 20px;
    /*font-size: 14px;*/
}
table.o_detail th {
    padding: 6px;
    border: 1px solid #777;
    width: 120px;
    text-align: right;
    background-color: #90ee90;
    white-space: nowrap;
}
table.o_detail td {
    padding: 15px;
    border: 1px solid #555;
}
table.o_detail td.value {
    line-height: 1.4em;
}
table.o_detail td.helpTips {
    border: none;
    width: 25px;
    vertical-align: bottom;
}
table.o_detail td.hanei {
    border: none;
    width: 110px;
    text-align: right;
    vertical-align: middle;
}
/* ▲ ステップ１-２：募集する職種（事例集） /m17/m1701.html ▲ */


/* ---------------------
 今までの評価 (mc14)(mc22)
------------------------*/
/* 評価の共通部品を参照 */

/* ---------------------
 身分証確認の入力：評価入力
------------------------*/
ul.rating_input label{
    display: inline-block;
    margin:  auto;
    width:   100%;
    border-radius: 15px;

    background-color: #f4f4f4;
    border: solid 2px #DDD;
    color: #888 ;
}

ul.rating_input  textarea{
    height: 60px;
    width: 100%;
    line-height: 1.3;
    background-color: #fff;
}

ul.rating_input p{
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    text-align: left;
}

ul.rating_input input[type="radio"]
{
  transform: scale(1.5);
  margin-left: 20px;
  margin-right: 10px;
}

ul.rating_input .checked{
    background-color: #FF7889 !important;
    color: white !important;
    font-weight: bold !important;
}

/* ---------------------
 お知らせ
------------------------*/
#infomationRoot .mustInfo,
#infomationRoot .otherInfo{
    box-sizing: border-box;
    width:95%;
    margin: 10px auto;
    border:1px dotted #aaa;
    padding: 10px;

    word-break: break-all;
}

.infoTitle{
    background-color: #def; padding: 3px;
}

.infoDetail{
    box-sizing: border-box;
    margin-top:10px;
    padding: 10px;
}



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

.competition{
    border: 2px #f00 solid;
    padding: 6px 12px;
    font-weight: bold;
    background-color: #fee;
    color: #f00;
    border-radius: 10px;
    font-size: 18px;
    width: 140px;
}
.highschool{
    border: 2px #f00 solid;
    padding: 6px 12px;
    font-weight: bold;
    background-color: #fee;
    color: #f00;
    border-radius: 10px;
    font-size: 18px;
    width: 140px;
}
.arrow,
.arrow2
{
    width: 100px;
    height: 30px;
    background: #8fc;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    font-size: 14px;

}
.arrow:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 30px solid #8fc;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 0px;
    left: 100%;
}
.arrow_value{
    display: table-cell;
    position: static;
    padding-left: 35px;
}


.larrow
{
    width: 100px;
    height: 30px;
    background: #8fc;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    font-size: 14px;

}
.larrow:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 30px solid #8fc;
    border-top: 17px solid transparent;
    border-bottom: 18px solid transparent;
    position: absolute;
    top: 0px;
    left: 100%;
}
.larrow_value{
    display: table-cell;
    position: static;
    padding-left: 35px;
}

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

.exp_parent{
    float:left;
    margin-top: 10px;
    margin-right: 30px;
}


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

.worker_photo{
    float:right;
    margin-right: 40px;
}


.no_pc{
        display: none;
    }


/** form用矢印 */
/** 現在表示中の画面を示す色の濃い矢印 */
.form_arrow_on
{
    width: 15%;
    height: 30px;
    background: #393;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
    font-size: 16px;
    color:#fff;
}
.form_arrow_on:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 30px solid #393;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 0px;
    left: 100%;
}
.form_arrow_on_value{
    vertical-align: -20%;
}

/** 前の画面、次の画面を示す色の薄い矢印 */
.form_arrow_off
{
    width: 15%;
    height: 30px;
    background: #ded;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
    font-size: 16px;
    color:#393;
}
.form_arrow_off:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 30px solid #ded;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    top: 0px;
    left: 100%;
}
.form_arrow_off_value{
    vertical-align: -20%;
}
a
/** 矢印を連続させる際の左マージン **/
.next_arrow_ml{
    margin-left:26px;
}

/** h2タグのデザインをh2以外でも使う場合の汎用class **/
.h2_like{
    left bottom repeat-x; border:1px solid #ddd; font-weight:bold; margin-bottom:15px; font-size:17px;
    padding:7px 15px;
    background: #ffdede;
    background: -moz-linear-gradient(top, #fff 0%, #fff 15%, #DDD);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.15, #fff), to(#DDD));
    background: -webkit-linear-gradient(top, #fff 0%, #DDD 100%);
    background: -o-linear-gradient(top, #fff 0%, #DDD 100%);
    background: -ms-linear-gradient(top, #fff 0%, #DDD 100%);
    background: linear-gradient(top, #fff 0%, #DDD 100%);
}

/** 枠をつける **/
.frame{
/*
    left bottom repeat-x; 
    border:1px solid #ddd; 
*/
    font-size:17px;
    padding:7px 15px;
}

.radius1 {
    border-radius: 1px;
}
.radius2 {
    border-radius: 2px;
}
.radius3 {
    border-radius: 3px;
}
.radius4 {
    border-radius: 4px;
}
.radius5 {
    border-radius: 5px;
}
.radius6 {
    border-radius: 6px;
}
.radius7 {
    border-radius: 7px;
}
.radius8 {
    border-radius: 8px;
}
.radius9 {
    border-radius: 9px;
}
.radius10 {
    border-radius: 10px;
}

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

/* ######## プラン選択のブロックリンク ########*/
div.plan_select_block {
    box-sizing: content-box;
    float: left;
    width: 300px;
    margin: 5px 10px 10px 15px;
    padding: 10px;

/*    border: 1px solid #dddddd; */
/*    border-radius: 10px; */
}
div.plan_select_block.small {
    box-sizing: content-box;
    width: 190px;
    display:inline-block;
}

div.plan_select_block.large {
    float: none;
    display:inline-block;
    max-width:400px;
    width:95%
}

div.plan_select_block:hover {
    opacity:0.9;
    text-decoration: underline;
}

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

div.plan_select_block_header p{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    word-break: keep-all;
    text-align: center;
}

/** そのつどプランのフォントと背景の色 **/
.color_plan_use_time {
    background-color:#DFD;
    color:#393;
}

/** そのつどプラン利用不可のフォントと背景の色 **/
.color_plan_use_time_dead {
    background-color:#DDD;
    color:#000;
}

/** あんしん定額プラン(利用中)のフォントと背景の色 **/
.color_plan_fixed_price {
    background-color:#FCC;
    color:#F00;
}

/** あんしん定額プラン(利用終了)のフォントと背景の色 **/
.color_plan_fixed_price_end {
    background-color:#DDD;
    color:#000;
}

/** 利用中プラン表示でリストの幅を拡張する **/
.list_box ul li label.plan{
  width:95%;
}

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

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

/* 応募者・採用者一覧でのお墨付き表示 */
.osumitsuki_container {
    margin-top: -10px;
    margin-right: 15px;
    text-align: center;
    font-weight: bold;
    line-height: 1em;
    color: #bf9000;
}

.osumitsuki_container img {
    display: block;
    width: 80px;
    margin: 0;
    margin-bottom: -10px;
}

/* 応募者・採用者一覧：自拠点のお墨付き表示 */
.osumitsuki_stamp {
    display: block;
    position: relative;
}
.osumitsuki_stamp::after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../../img/osumitsuki.png');
    opacity: 0.3;
}

/*お墨付き拠点の一覧表示*/
.osumitsuki_area {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 280px !important;
  overflow: scroll;
  overflow-x: hidden;
  vertical-align: top;
}

ul.osumitsuki_list li{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  -webkit-box-pack: flex-start;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0;
}

/*お墨付き拠点の画像表示*/
.osumitsuki_area .base_photo {
  float: left;
  overflow: hidden;
  position: relative;
  margin-right: 10px;
  width: 120px;
  height: 80px;
  background: #EFEFEF;
}
.osumitsuki_area .base_photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.osumitsuki_area .base_photo::before {
  display: block;
  content: '';
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.osumitsuki_area .base_photo::after {
  box-sizing: border-box;
  display: block;
  content: '';
  position: absolute;
  z-index: 10;
  left: 15%;
  width: 70%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../../img/osumitsuki.png');
}



/*
============================================================================
 スマホ専用 (640px以下)
============================================================================ 
*/
@import url("otet_common_smartphone2.css");