@charset "utf-8";


/*--------------------information--------------------*/

article.area_header{
width: 94%;
margin: 0px auto 20px auto
}

ul.area_information{
width: 94%;
margin: 0px auto 20px auto;
border:solid 2px #ff6e9b;
border-radius: 8px;
}

/*--------------------area_select--------------------*/

section#area_select_mobile{
text-align: center;
padding: 20px;
position: relative;
overflow: hidden;
color: #fff
}

div.area_select_mobile{
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: flex-start
}

a.area_select_mobile{
width: 32%;
position: relative;
padding: 8px 0;
color: #13131e;
text-align: center;
box-shadow: inset 0 -2px #a9a9a0;
background: -webkit-linear-gradient(top,#fff 1%,#f2f2f2 100%);
background: linear-gradient(to bottom,#fff 1%,#f2f2f2 100%);
border-radius: 20px;
text-align: center
}

img.area_select_mobile_icon{
width: 35%;
margin: 0px auto 10px auto
}

h5.area_select_mobile{
font-size:18px;
margin-bottom: 5px
}

h6.area_select_mobile{
font-size:11px;
color:#13131e;
}

section#area_select_mobile:after{
content: "";
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: absolute;
top:0px;
left: 0px;
}

img.area_select_mobile{
width: 100%;
top:0px;
left:0px;
position: absolute;
}

h2.area_select_mobile{
font-size:18px;
margin-bottom: 5px;
position: relative;
z-index: 1
}

h3.area_select_mobile{
font-size:14px;
position: relative;
z-index: 1;
margin-bottom: 15px
}


ul.area_select{
display: none
}

div.area_space{
display: none;
}

div.area_grids{
display: none
}

/*--------------------recommendation--------------------*/

section#recommendation{
padding: 20px 0px 20px 0px;
overflow: hidden
}

h2.recommendation{
font-size:16px;
text-align: center;
line-height: 1.4
}

div.recommendation{
width: 94%;
margin: 0px auto;
}

article.recommendation{
padding: 18px;
border: 1px solid rgba(204,204,204,.35);
box-shadow: 0 1px 2px rgba(0,0,0,.35);
box-sizing: border-box;
background-color: #fff;
border-radius: 10px;
}

h3.recommendation{
font-size:11px;
color:#ff6e9b;
margin-bottom: 10px;
}

a.recommendation{
font-size:16px;
line-height: 1.4;
color:#5d9dcc;
margin-bottom: 15px;
text-decoration: underline;
display: block
}

li.recommendation_image{
width: 30%;
}

p.recommendation_image{
width: 100%;
aspect-ratio: 1 / 1;
background: #dcdcdc
}

/*--------------------easy--------------------*/

section.easy{
padding: 20px 3% 20px 3%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
position: relative;
z-index: 1
}

section.gray{
box-shadow: none;
margin-bottom: 0px;
background: #f5f3f0;
position: relative;
z-index: 0
}

.mb20{
margin-bottom: 20px
}

h2.area_mobie{
color:#ff6e9b;
font-size:16px;
margin-bottom: 10px
}

img.area_mobie{
width: 24px;
display: inline-block;
vertical-align: middle;
margin-right: 5px
}

h2.easy{
color: #543535;
font-size: 16px;
padding-left: 10px;
padding-bottom:10px
}

h2.gray{
color: #999;
font-size: 14px;
padding-left: 0px;

}

h2.center{
text-align: center;
padding-left:0px;
}

img.easy_icon{
width: 18px;
display: inline-block;
vertical-align: middle;
margin-right: 5px
}

div.easy_search{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px
}

article.easy_search{
width: 40px;
}

article.easy_search img{
width: 30px;
margin: 0px auto 5px auto;
}

h3.easy_search_icon{
text-align: center;
font-size:10px;
color:#ff6e9b
}

label.easy_search_select{
width: calc(100% - 50px );
height: 54px;
border-radius: 10px;
border:solid 1px #ccc;
display: block;
position: relative
}

label.easy_search_select:after{
content: "＜";
position: absolute;
color: #b0b0b5;
width: 10px;
height: 10px;
top:50%;
transform: translateY(-50%) rotate(-90deg) scale(0.8, 1.3);
right: 20px
}

label.easy_search_select select{
color: #b0b0b5;
font-weight: 400;
border-radius: 10px;
font-size:15px;
text-indent: 10px
}

article.hourly_wage{
width: 40%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px;
background: #eee;
border-radius: 4px;
}

h3.hourly_wage{
font-size:13px;
color:#444
}

p.hourly_wage{
font-size:13px;
color:#666;
text-align: center;
margin: 15px 0px 15px 0px
}

p.hourly_wage small{
font-size:13px;
color:#444
}

a.hourly_wage{
width: 100%;
max-width: 340px;
height: 50px;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
background: #ff6e9b;
color: #fff;
margin-left: 15px;
display: flex;
align-items: center;
justify-content: center
}

h4.hourly_wage{
font-size: 22px;
color: #ffff00;
margin-right: 20px
}

h4.hourly_wage small{
font-size: 14px;
color: #fff;
margin-left: 5px;
}

h5.hourly_wage{
font-size: 20px;
color: #fff
}

/*--------------------short_term--------------------*/

div.short_term{
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap:wrap
}

a.short_term{
width: 32%;
display: block;
background: #fff;
padding: 10px;
text-align: center;
border: 1px solid #a9a9a0;
font-weight: 400;
border-radius: 10px
}

h3.short_term{
font-size: 16px;
background: url("../img/icon/arrow_pnk.png") no-repeat center right 5px;
background-size: 11px;
}

h3.short_term small{
display: block;
font-size:11px;
font-weight: 400;
margin-top: 2px
}

a.short_term span{
font-size:12px;
display: block;
color:#999
}

/*--------------------conditions--------------------*/

a.conditions{
width: 32%;
display: block;
background: #fff;
padding: 8px;
text-align: center;
border: 1px solid #a9a9a0;
font-weight: 400;
border-radius: 10px;
}

a.long{
width: 64%;
}

a.large{
padding: 20px 0px 20px 0px
}

p.conditions_icon{
display: none;
}

h3.conditions{
font-size: 16px;
background: url("../img/icon/arrow_pink.png") no-repeat center right 5px;
background-size: 11px;
}

h3.conditions small{
display: block;
font-size:11px;
font-weight: 400
}

img.conditions{
display: none;
}

label.free_word{
width: 85%;
height: 46px;
border:solid 1px #ccc;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: none;
}

label.free_word input[type="text"]{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.free_word_submit{
width: 15%;
height: 46px;
background: #ff6e9b url("../img/icon/search_w.png") no-repeat center;
background-size: 18px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color:#fff;
color: transparent;
}

/*--------------------new_recruit--------------------*/

section.new_recruit{
margin-bottom: 20px;
padding: 20px 5% 20px 5%;
background: #fff;
}

h2.new_recruit{
color:#ff6e9b;
font-size:16px;
margin-bottom: 10px
}

a.new_recruit{
padding: 10px 0px 10px 0px;
border-bottom: dotted 1px #ccc;
position: relative;
display: block;
background: url(../img/icon/arrow_gray.png) no-repeat center right 0px;
background-size: 12px;
padding-right: 20px
}

p.new_recruit{
display: none;
}

h4.new_recruit{
font-size:12px;
line-height: 1.6;
color: #666;
text-decoration: underline;
display: inline;
}

h5.new_recruit{
font-size:12px;
color: #999;
display: inline;
margin-left: 20px
}

img.new_recruit{
display: none;
}

/*--------------------other--------------------*/

section.other{
width: 94%;
margin: 0px auto 20px auto;
background: #fff;
padding: 15px 15px 0px 15px;
border-radius: 10px
}

h2.other{
font-size:16px;
margin-bottom: 15px;
line-height: 1.2
}

a.other{
font-size:12px;
color:#ff6e9b;
display: inline-block;
text-decoration: underline;
margin-right: 20px;
margin-bottom: 20px
}

ul.other{
display: block;
margin-bottom: 15px;
border-bottom: dotted 1px #ccc;
padding-bottom: 15px
}

li.other_left{
display: block;
margin-bottom: 15px
}

li.other_right{
display: block;
}

a.features{
margin-right: 20px;
display: inline-block;
margin-bottom: 20px;
font-size:12px;
color: #ff6e9b;
text-decoration: underline
}

/*--------------------faq--------------------*/

h3.faq{
font-size:14px;
border-bottom: dotted 1px #ccc;
padding: 15px 0px 15px 0px;
color:#666
}

h3.faq:hover{
cursor: pointer
}

h3.faq:before{
content: "Q.";
display: inline-block;
margin-right: 5px;
color:#999
}

div.faq{
background: #f2f2f2;
padding: 20px;
display: none
}

h4.faq{
font-size:14px;
color:#666;
margin-bottom: 15px;
}

h4.faq:before{
content: "A.";
display: inline-block;
margin-right: 5px;
color:#ff6e9b
}

a.faq{
display: block;
font-size:14px;
color:#5d9dcc;
text-decoration: underline;
margin-bottom: 15px;
}

a.faq:before{
content: "・";
display: inline-block;
margin-right: 5px;
color:#999
}

/*--------------------popular_stores--------------------*/

section#popular_stores{
display: none;
}



/*--------------------area_popup--------------------*/

section.area_container{
width: 100%;
margin: 0px auto 20px auto;;
padding: 20px;
border:solid 1px #ccc;
border-radius: 10px
}

div.area_grid{
display: flex;
align-items: flex-start;
justify-content: space-between
}

div.area_grid_left{
width: 250px
}

ul.area_grid_left,ul.area_grid_left li{
display: block;
background: #efefef;
font-size:13px;
}

ul.area_grid_left{
border:solid 1px #ccc;
border-bottom: none;
}

li.area_grid_left{
padding: 10px 0px 10px 15px;
border-bottom: solid 1px #ccc
}

li.area_grid_left:hover{
cursor: pointer;
opacity: 0.7
}

li.area_grid_left_select{
background: #fff!important;
position: relative
}

li.area_grid_left_select:before{
content:"";
width: 10px;
height: 100%;
background: #efa440;
position: absolute;
top:0px;
left:0px
}

div.area_grid_right{
width: 700px
}

section.area_check{
border: 1px solid #dbd1bd;
border-radius: 5px;
background: #efefef;
overflow: hidden
}

h3.area_check,h4.area_check{
padding: 15px 0px 15px 15px
}

h3.area_check{
background: #fff
}

lavel.area_check{
width: 18px;
height: 18px;
display: inline-block;
position: relative;;
vertical-align: middle
}

input[type="checkbox"]{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left:0px;
border:none
}

a.area_check{
display: inline-block;
color: #5D9DCC;
margin-left: 5px;
text-decoration: underline
}

span.area_check{
font-size: 11px
}

article.area_check{
border-top: 1px solid #dbd1bd;
border-bottom: 1px solid #dbd1bd;
background: #f2eee3;
}

div.area_check{
width: calc(100% - 10px);
margin-left: 10px
}


div.area_check h5.area_check_bar{
padding: 12px 0px 12px 25px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background: #f6f6f6;
background: #fff;
background: -webkit-linear-gradient(top,#fff 0,#efefef 100%);
background: linear-gradient(to bottom,#fff 0,#efefef 100%);
position: relative
}

/*h5.area_check_bar:after{
content: "＋";
width: 50px;
height: 80%;
position: absolute;
right: 0px;
top:50%;
transform: translateY(-50%);
border-left: solid 1px #ccc;
text-align: center;
font-size:18px;
line-height: 36px;
font-weight: bold;
}*/

h5.area_check_bar:hover{
cursor: pointer
}

a.area_check_small{
font-size:13px;
display: inline-block;
color: #5d9dcc;
margin-left: 5px;
text-decoration: underline
}

div.area_close{
padding: 30px 0px 0px 15px;
font-size:0px;
background: #fff;
display: none;
}

h5.area_check{
font-size:12px;
}

h5.divisions2{
width: 50%;
margin-bottom: 30px;
display: inline-block
}

h5.divisions1{
width: 100%;
margin-bottom: 30px;
display: block
}

section.area_search{
width: 1000px;
margin: 0px auto;
padding: 7px;
border: 1px solid #ffbb69;
box-sizing: border-box;
background: #ffefd9;
border-radius: 6px
}

h2.area_search{
font-size:13px;
background: #fff;
color: #666;
padding: 12px 0px 12px 15px;
border-radius: 4px;
margin-bottom: 10px
}

h2.area_search span{
display: inline-block;
font-weight: normal;
}

div.area_search{
display: flex;
align-items: center;
justify-content: space-between
}

article.area_search_left{
background: #fff;;
padding: 15px;
border-radius: 4px;
}

h3.area_search_left{
width: 240px;
color: #666;
font-weight: 700;
font-size:14px;
margin-bottom: 5px
}

p.area_search_left{
text-align: right;
font-size:26px;
color:#ff6e9b
}

p.area_search_left small{
color: #666;
font-weight: 700;
font-size:13px;
margin-left: 5px
}

div.area_search_right{
width: 700px;
background: #fff;;
padding: 15px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content:center
}

label.area_search_right{
width: 180px;
height: 50px;
display: block
}

input[type="submit"].area_search_right {
width: 250px;
height: 50px;
-webkit-appearance: none;
border: none;
font-size: 14px;
font-weight: bold;
box-shadow: 0 -1px 0 #478d36 inset;
border-radius: 5px;
background: linear-gradient(to bottom,#66cf5a 0,#48ae3a 100%);
color:#fff
}

a.clear{
display: block;
width: 180px;
height: 50px;
color: #543535;
font-size: 14px;
border: 1px solid #ccc;
 box-shadow: 0 -1px 0 #ccc inset;
text-shadow: 1px 1px 0 #fff;
font-weight: 700;
 background: #fff;
background: linear-gradient(to bottom,#fff 0,#f1f1f1 100%);
border-radius: 5px;
margin-left: 10px;
text-align: center;
line-height: 50px
}

/*--------------------railway--------------------*/

h3.railway{
background: linear-gradient(to bottom,#fff 0,#eeeae3 100%);
font-size:16px;
padding: 10px 0px 10px 0px;
color:#666
}

h3.railway:before{
content:"+";
display: inline-block;
font-size:24px;
width: 40px;
height: 100%;
text-align: center;
color: #83c46c
}

h3.railway:hover,h4.railway:hover{
cursor: pointer;
opacity: 0.7
}

article.railway{
width: calc(100% - 10px);
margin-left: 10px;
display: none;
}

h4.railway{
display: block;
padding: 10px 5px 10px 0px;
color: #666;
background: linear-gradient(to bottom,#fff 0,#efefef 100%);
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
font-size:13px
}

h4.railway:before{
content:"+";
display: inline-block;
font-size:22px;
width: 40px;
height: 100%;
text-align: center;
color: #666
}

section.area_search_section {
    width: 100%;
    margin: 0 auto;
    padding: 7px;
    border: 1px solid #ffbb69;
    box-sizing: border-box;
    background: #ffefd9;
    border-radius: 6px;
}


@media screen and (max-width: 390px) {

    /*  エリアモーダル  */

    div.area_search_right_modal{
        flex-wrap: wrap;
    }
    input[type="submit"].area_search_right{
        width: 100%;
    }
    a.clear{
        margin: 15px 0 0;
        width: 100%;
    }
}