@charset "utf-8";

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

article.area_header{
width: 100%;
margin-bottom: 20px
}

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

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

section#area_select_mobile{
display: none
}

ul.area_select{
text-align: center;
border-bottom: solid 1px #ccc;
display: flex;
justify-content: space-between
}

ul.area_select li{
/*width: 420px; 路線オミット*/
width: 840px;
display: block;
padding: 15px 0px 10px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
top:1px;
background: #ff8080;
border: solid 1px #ccc;
color:#fff;
font-size:20px
}

li.area_select{
border-bottom: solid 1px #fff!important;
background: #fff!important;
color:#ff6e9b!important
}

div.area_change{
padding: 20px 20px 0px 20px;
border:solid 1px #ccc;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top:none;
margin-bottom: 20px;
}


div.area_space{
background-color: #56c2e3;
background-image: url("https://www.transparenttextures.com/patterns/grid-noise.png");
display: flex;
justify-content: space-between;
padding: 20px 20px 5px 20px;
border-radius: 5px;
flex-wrap:wrap;
margin-bottom: 20px
}

article.area_space{
width: 32%;
text-align: center;
padding: 10px;
background: #fff;
border-radius: 5px;
border: #4ba82f solid 1px;
box-shadow: 0 1px 3px 0 #c7c7c7;
margin-bottom: 15px
}

h3.area_space{
font-size:15px;
margin-bottom: 15px
}

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

a.area_space_button{
width: 48%;
color:#fff;
font-size:12px;
padding: 5px 0px 5px 0px;
border: 1px solid #4ba82f;
box-shadow: 0 -1px 0 #478d36 inset;
text-shadow: 0 1px 2px rgba(0,0,0,.3);
font-weight: 700;
border-radius: 6px;
background: #66cf5a;
background: -webkit-linear-gradient(top,#66cf5a 0,#48ae3a 100%);
background: linear-gradient(to bottom,#66cf5a 0,#48ae3a 100%);
}

span.area_space_button {
    width: 48%;
    color: #caa6a6;
    font-size: 12px;
    padding: 5px 0px 5px 0px;
    border: 1px solid #4ba82f;
    box-shadow: 0 -1px 0 #478d36 inset;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    font-weight: 700;
    border-radius: 6px;
    background: linear-gradient(to bottom, #566156 0, #363136 100%);
}

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

div.area_grids_inner{
width: 48%
}

h3.area_grid{
font-size:14px;
border-bottom: solid 1px #ccc;
padding-bottom: 5px
}

h3.area_grid:before{
content: "";
width: 7px;
height: 15px;
display: inline-block;
background: #ff6e9b;
margin-right: 5px;
vertical-align: middle
}

div.area_grid{
display: flex;
align-items: flex-start;
flex-wrap:wrap;
padding: 20px 0px;
justify-content: left!important
}

a.area_grid{
font-size:13px;
text-decoration: underline;
color:#ff6e9b;
margin-right: 20px
}

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

section#recommendation{
border: 1px solid #ccc;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
padding-bottom: 20px
}

h2.recommendation{
color: #444;
font-size:14px;
padding: 10px 0px 10px 20px;
background: #f2f2f2;
margin-bottom: 20px;
}

div.new_arrivals{
width: 90%;
margin: 0px auto 0px auto
}

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

section.easy{
padding: 10px 5px 5px 5px;
border: 1px solid #dbd1bd;
background: #f5f0e7;
border-radius: 4px;
margin-bottom: 20px
}

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

div.easy{
background: #fff;
padding: 20px;
}

div.easy_select{
display: flex;
align-items: center;
justify-content: left;
margin-bottom: 15px
}

div.easy_select:last-of-type{
margin-bottom: 0px
}

label.easy_select{
width: 24%;
height: 34px;
display: block;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 6px;
position: relative;
margin: 0px 2px;
}

label.easy_select:after{
content: "▼";
color:#ff6e9b;
position: absolute;
top:50%;
transform: translateY(-50%);
right: 15px
}

label.easy_select select{
color:#999;
border-radius: 6px;
text-indent: 10px;
}

p.easy_check{
min-width: 23%;
font-size:13px;
color: #444
}

label.easy_check{
width: 18px;
height: 18px;
color:#444;
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}

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:26px;
color:#ff6e9b
}

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

a.hourly_wage{
width: 380px;
height: 50px;
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;
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
}

a.short_term{
width: 19%;
display: block;

padding-top: 10px;
color: #543535;
text-align: center;
border: 1px solid #dbd1bd;
font-weight: 400;
border-radius: 4px
}

h3.short_term{
padding-right: 5px;
font-size: 18px;
padding: 5px 0px 5px 0px;
background: url("../img/icon/arrow_green.png") no-repeat center right 20px;
background-size: 12px;
}

a.short_term span{
font-size:13px;
display: block;
margin: 5px -1px -1px;
padding: 4px 0 6px;
color: #fff;
box-shadow: 0 -2px 0 #d1872b inset;
background: #ffbb69;
border-radius: 0 0 6px 6px
}

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

a.conditions{
padding: 5px 15px 5px 10px;
color: #543535;
border: 1px solid #dbd1bd;
border-bottom: 2px solid #dbd1bd;
background: #fff;
background: linear-gradient(to bottom,#fff 50%,#eeeae3 100%);
border-radius: 6px;
display: flex;
align-items: center
}

p.conditions_icon{
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
position: relative
}

p.conditions_icon img{
width: 90%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
position: absolute
}

h3.conditions{
font-size: 16px
}

img.conditions{
width: 12px;
margin-left: 15px
}

label.free_word{
width: 80%;
height: 40px;
border:solid 1px #ccc;
display: inline-block;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 1px 1px 3px #dcdcdc;
vertical-align: middle;
}

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

.free_word_submit{
width: 180px;
height: 40px;
display: inline-block;
background: #ff6e9b url("../img/icon/search_w.png") no-repeat left 25px center;
background-size: 18px;
border-radius: 5px;
color:#fff;
margin-left: 15px
}

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

section.new_recruit{
background: #f2f2f2;
border: 1px solid #ccc;
margin-bottom: 20px
}

h2.new_recruit{
color: #444;
font-size: 16px;
padding: 10px 0px 10px 15px
}

div.new_recruit{
background: #fff;
padding: 10px 20px 10px 20px
}

a.new_recruit{
display: flex;
align-items: center;
padding: 15px 15px 15px 10px;
border-bottom: dotted 1px #ccc;
position: relative
}

h4.new_recruit{
font-size:13px;
color: #ff6e9b;
text-decoration: underline
}

p.new_recruit{
margin-right: 6px;
padding: 3px 5px;
color: #fff;
font-size: 12px;
background: #fca01a;
 border-radius: 2px;
}

h5.new_recruit{
font-size:13px;
color: #444;
position: absolute;
right: 0px
}

img.new_recruit{
width: 12px;
display: inline-block;
vertical-align: middle;
margin-left: 5px
}

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

section.other{
margin-bottom: 20px
}

h2.other{
font-size:16px;
padding: 10px;
color: #543535;
background: #f5f0e7;
margin-bottom: 15px;
}

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

ul.other{
border-bottom: solid 1px  #ccc;
border-right: solid 1px  #ccc;
border-left: solid 1px  #ccc;
}

ul.other:first-of-type{
border-top: solid 1px  #ccc;
}

li.other_left{
padding: 15px;
width: 200px;
background: #f2f2f2;
font-size:13px;
color: #444
}

li.other_right{
padding: 15px;
display: flex;
align-items: center;
justify-content: left;
flex-wrap: wrap
}

a.features{
width: 30%;
margin-bottom: 10px;
font-size:13px;
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:#ff6e9b;
text-decoration: underline;
margin-bottom: 15px;
}

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

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

section#popular_stores{
padding: 10px 15px;
border: 1px solid #dbd1bd;
border-radius: 4px;
position: relative;
margin-bottom: 20px
}

h2.popular_stores{
color: #543535;
font-size: 14px;
}

a.popular_stores{
font-size:13px;
color: #444;
position: absolute;
right: 20px;
top:50%;
transform: translateY(-50%)
}

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

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

h2.area_section{
font-size:18px;
color:#666666;
margin-bottom: 20px;
}

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: #ff6e9b;
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;
margin: 0px;
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
}