@charset "utf-8";


header.list_header{
width: 100%;
margin: 0px auto 20px auto;
}

/*--------------------breadcrumb--------------------*/

ol {
width: 100%;
font-size: 11px;
padding: 20px 0px 20px 10px;
border-bottom: solid 1px #efefef;
margin-bottom: 30px
}

ol li{
display:inline-block;
vertical-align: middle;
color:#fff
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#000
}

ol li:last-child:after{
content: '';
display: none;
}

ol li a {
text-decoration: none;
color: #000;
}

ol li:first-child a{
background-size: 11px;
}

ol li a:hover {
text-decoration: underline;
}

h1.list{
font-size:14px;
margin-bottom: 10px
}

h4.list{
font-size:12px;
color: #888;
line-height: 1.4;
}

/*--------------------list_detail-------------------*/

div.list_page_detail{
border: 1px solid #ccc;
border-radius: 4px;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 8px;
margin-bottom: 20px
}

div.list_page_detail_left{
width: 815px;
}

ul.list_detail{
margin-bottom: 10px
}

li.list_detail_title{
padding: 10px;
width: 110px;
font-size: 14px;
background: #ffefd9;
border-radius: 4px 0 0 0;
font-weight: 700;
}

li.list_detail_detail{
padding: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
border-bottom: dotted 1px #ccc
}

a.list_detail{
display: inline-block;
font-size:12px;
padding: 6px 12px;
color: #666;
font-weight: 400;
border-radius: 4px;
border: 1px solid #ccc;
background: linear-gradient(to bottom,#fff 0,#f1f1f1 100%);
box-shadow: 0 -1px 0 #ccc inset;
}

a.list_detail_last{
margin-left: auto;
}

div.list_detail_area{
font-size:12px;
display: flex;
align-items: center;
color:#999;
margin-left: 10px;
}

label.list_detail_area{
width: 18px;
height: 18px;
margin-right: 5px;
position: relative
}

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

label.list_detail_detail{
width: 500px;
height: 40px;
border: 1px solid #ccc;
box-shadow: 0 1px 1px 0 rgba(80,80,80,.2) inset;
background: #f9f9f9;
border-radius: 6px;
overflow: hidden
}

label.list_detail_submit{
width: 160px;
height: 40px;
border:solid 1px #ff6e9b;
background: #fff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-left: 10px;
}

label.list_detail_submit input[type="submit"] {
width: 100%;
height: 100%;
background: #fff;
color:#ff6e9b;
background: url(../img/icon/search.png) no-repeat left 25px center;
background-size: 16px;
cursor: pointer
}

div.list_page_detail_right{
width: 300px
}

div.search_results{
width: 100%;
padding: 10px;
border: 1px solid #f9d498;
background: #fff2d8;
border-radius: 6px;
margin-bottom: 10px
}

article.search_results{
background: #fff;
padding: 10px;
margin-bottom: 10px
}

h3.search_results{
color:#666;
font-size:13px;
}

h3.search_results:first-of-type{
margin-bottom: 10px
}

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

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

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

a.search_results{
font-size:13px;
display: block;
padding: 12px;
color: #444;
border: 1px solid #ccc;
background: #fff;
border-radius: 4px;
text-align: center
}

article.search_results_mail{
border:solid 1px #ccc;
padding: 10px;
border-radius: 6px;
}

section.list_grid_right{
border:solid 1px #ccc;
padding: 5px;
border-radius: 6px;
margin-bottom: 10px
}

h2.list_grid_right_keep{
padding: 10px 0px 10px 0px;
background: #ffefd9;
text-align: center;
font-size:14px;
margin-bottom: 15px
}

h2.list_grid_right_keep span{
display: inline-block;
margin: 0px 5px 0px 5px;
font-size:26px;
color:#ff6e9b;
}

h2.list_grid_right{
padding: 10px 0px 10px 0px;
background: #f2f2f2;
text-align: center;
font-size:14px;
margin-bottom: 15px
}

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

h3.list_grid_right_keep{
font-size:13px;
color:#666;
margin-bottom: 10px
}

h4.list_grid_right_keep{
font-size:12px;
color:#999;
line-height: 1.4
}

a.list_grid_right{
width: 94%;
margin: 0px auto;
display: block;
border-bottom: solid 1px #ccc;
padding: 10px 0px 10px 0px;
position: relative
}

a.list_grid_right:after{
content: "";
width: 12px;
height: 12px;
display: block;
position: absolute;
top:50%;
transform: translateY(-50%);
right: 0px;
background: url(../img/icon/arrow_pnk.png) no-repeat center;
background-size: 12px;
}

h3.list_grid_right{
font-size:13px;
color:#666;
margin-bottom: 10px
}

h3.list_grid_right span{
display: inline-block;
margin: 0px 5px 0px 5px;
color:#ff6e9b;
}

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

ul.list_grid_right{
margin-top: 10px;
}

li.list_grid_right_image{
width:20%
}

li.list_grid_right{
padding-left: 10px;
}

p.list_grid_right{
font-size:11px;
color:#666
}

/*--------------------list_article--------------------*/

article.list_article{
padding: 15px;
color:#444;
border: 1px solid #ccc;
border-radius: 4px;
position: relative;
overflow:hidden;
margin-bottom: 15px
}

article.list_article:before{
content:"";
width: 100%;
height: 5px;
background: #ff6e9b;
display: block;
position: absolute;
top:0px;
left: 0px
}

div.list_article_icon{
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 20px
}

div.list_article_icon p{
margin-right: 6px;
font-size: 12px;
border-radius: 2px;
}

p.new_recruit{
padding: 3px 5px;
color: #fff;
background: #fca01a;
}

p.category{
padding: 1px 5px;
color: #fff;
background: #ff6e9b;
}

p.movie{
padding: 1px 5px;
color: #ff6e9b;
border:solid 1px #ff6e9b
}

img.list_article_icon{
width: 16px;
display: inline-block;
vertical-align: middle
}

p.visit{
padding: 1px 5px;
color: #30aa7b;
border:solid 1px #30aa7b
}

p.bonus{
margin-left: auto;
color:#ff6e9b
}

p.bonus span{
font-size:18px
}

ul.list_article_detail{
margin-bottom: 10px;
}

li.list_article_detail_image{
width: 25%;
vertical-align: top;
}

li.list_article_detail_title{
width: 55%;
padding-left: 15px;
vertical-align: top;
}

h4.list_article_detail{
font-size:14px;
color:#222;
margin-bottom: 10px
}

h3.list_article_detail{
font-size:18px;
color:#ff6e9b;
line-height: 1.4;
margin-bottom: 5px
}

p.list_article_detail{
font-size:13px;
color:#222;
font-weight: 400
}

li.list_article_detail_link{
width: 20%;
vertical-align: top;
padding-top: 30px
}

a.list_article_detail_link{
display: block;
width: 140px;
text-align: center;
margin: 0px auto;
font-size:13px;
position: relative;
padding: 5px 15px 5px 5px;
color: #ff6e9b;
border: 1px solid #ccc;
box-shadow: 0 -1px 0 #ccc inset;
background: #fff;
font-weight: 700;
border-radius: 6px;
background: url(../img/icon/arrow_pnk.png) no-repeat center right 10px;
background-size: 12px
}

ul.list_article_memo{
padding: 10px 0px 10px 0px;
border-bottom: dotted 1px #ccc;
font-size:13px;
}

li.list_article_memo_left{
width: 15%
}

div.list_article_benefits{
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: dotted 1px #ccc;
padding: 10px 0px 10px 0px;
flex-wrap:wrap;
margin-bottom: 10px
}

p.list_article_benefits{
min-width: 13%;
margin-right: 1.2%;
margin-bottom: 5px;
white-space: nowrap;
display: block;
padding: 2px 4px;
color: #f19dae;
font-size: 11px;
text-align: center;
border: 1px solid #ff6e9b;
background: #fff;
border-radius: 4px;
font-weight: 400;
}

div.barometer{
display: flex;
align-items: center;
margin-bottom: 10px
}

p.barometer{
font-size:12px;
color:#999;
margin-right: 5px;
background: url(../img/icon/icons8-barometer-24.png) no-repeat left 0px center;
background-size: 14px;
text-indent: 16px
}

ul.barometer{
width: 160px;
background: #fff;
border:solid 1px #ccc;
border-radius: 2px
}

ul.barometer li{
height: 20px;
background: #efefef;
border:solid 1px #fff
}

li.orange{
background: #ffbb69!important
}

p.aim{
display: block;
position: relative;
padding: 2px 10px 2px 10px;
color: #fff;
font-size: 11px;
line-height: 1.2;
background: #aaa;
border-radius: 4px;
margin-left: 10px;
margin-right: 10px
}

p.aim:before{
content: "";
position: absolute;
top: 50%;
left: -6px;
margin-top: -5px;
border-top: solid 5px transparent;
border-right: solid 8px #aaa;
border-bottom: solid 5px transparent;
}

p.number_of_people{
font-size:12px;
color:#999;
margin-right: 5px;
}

div.list_article_footer{
display: flex;
align-items: center;
background: #fcf0db;
padding: 10px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
justify-content: center
}

a.list_article_keep{
width: 200px;
color: #543535;
font-size: 15px;
padding: 7px;
border: 1px solid #ccc;
box-shadow: 0 -1px 0 #ccc inset;
text-shadow: 1px 1px 0 #fff;
font-weight: 700;
text-align: center;
background: linear-gradient(to bottom,#fff 0,#f1f1f1 100%);
border-radius: 6px;
margin-right: 15px
}

a.list_article_keep:before{
content: "";
width: 16px;
height: 16px;
background: url(../img/icon/star.png) no-repeat center;
background-size:16px;
display: inline-block;
margin-right: 5px;
position: relative;
top:2px
}

a.list_article_tel{
width: 200px;
font-size: 15px;
padding: 7px;
color: #ff6e9b;
border: 1px solid #ff6e9b;
box-shadow: 0 -1px 0 #ff6e9b inset;
background: #fff;
font-weight: 700;
border-radius: 6px;
text-align: center
}

a.list_article_translation{
width: 200px;
font-size: 15px;
padding: 7px;
color: #fff;
border: 1px solid #ff6e9b;
box-shadow: 0 -1px 0 #ff6e9b inset;
text-shadow: 0 1px 2px rgba(0,0,0,.3);
font-weight: 700;
border-radius: 6px;
background: rgb(255,110,221);
background: linear-gradient(180deg, rgba(255,110,221,1) 0%, rgba(255,110,155,1) 100%);
text-align: center;
margin-left: 15px
}

/*--------------------job page--------------------*/

ul.job{
margin-bottom: 15px;
}

li.job_left{
width: 550px;
border:solid 1px #ccc;
border-radius: 4px;
overflow: hidden;
vertical-align: top
}

li.job_right{
padding-left: 15px;
vertical-align: top
}

li.job_space_title{
width: 15%;
background: #f2f2f2;
text-align: center;
padding: 10px 0px 10px 0px;
border-bottom: solid 1px #fff
}

p.job_space_title_image{
width: 36px;
height: 36px;
background: #fff;
margin: 0px auto 5px auto;
border-radius: 25px;
position: relative
}

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

h3.job_space_title{
font-size:13px;
text-align: center
}

h4.job_space{
font-size:13px;
}

h4.gray{
color:#888
}

h5.job_space{
padding-top: 15px;
font-size:13px;
font-weight: 400;
line-height: 1.4
}

li.job_space{
padding: 10px 0px 10px 0px;
font-size:13px;
padding-left: 15px;
border-bottom: solid 1px #ccc
}

div.job_barometer{
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
margin-bottom: 15px
}

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

div.job_space{
border: 1px solid #ccc;
overflow: hidden;
border-radius: 4px;
margin-bottom: 15px
}

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

/*--------------------job movie--------------------*/

section.job_space_movie{
border: 1px solid #ffbb69;
border-radius: 4px;
margin-bottom: 15px
}

h3.job_space_movie{
padding: 5px 10px;
color: #fff;
font-size: 16px;
background: #ffbb69 url(../img/icon/job_page_movie.png) no-repeat center left 10px;
text-indent: 25px;
background-size: 22px
}

ul.job_space_movie{
width: 90%;
margin: 0px auto;
}

ul.job_space_movie li{
vertical-align: top;
width: 50%;
padding: 15px 0px 15px 0px
}

video.job_space_movie{
    width: 90%;
    max-height: 300px;
}

li.job_space_movie_right{
padding-left: 10px
}

h3.job_space_movie_right{
    font-size:18px;
    line-height: 1.4;
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
    max-height: 70px;
    overflow-y: auto;
}

h4.job_space_movie_right{
    font-size:14px;
    line-height: 1.5;
    font-weight: 400;
    max-height: 105px;
    overflow-y: auto;
}

div.job_image{
margin-bottom: 15px
}

p.job_image{
margin-bottom: 10px;
padding: 2px;
border: 1px solid #ccc;
}

h3.job_image{
text-align: center;
font-size:11px;
margin-bottom: 10px
}

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

img.job_image_thumbnail{
width: 33%;
padding: 2px;
border: 1px solid #fff;
}

img.job_image_thumbnail_select{
border: 1px solid #ccc;
}

article.job_image{
border:solid 1px #ffbb69;
padding: 40px 10px 10px 10px;
position: relative;
border-radius: 4px;
}

h3.job_image_costume{
width: 100%;
position: absolute;
top:0px;
left: 0px;
background: #ffbb69;
color:#fff;
font-size:14px;
padding: 7px 0px 7px 10px
}

.is_blur {
    filter: blur(5px);
}

div.list_page_detail_right_mobile {
    display: none;
}

/* 表示切替ボタン */
a.view-mode-btn { text-decoration:none; color:#333; }
a.view-mode-btn.active { background-color:#ff6e9b; color:#fff; border-color:#ff6e9b; }

/* 衣装グリッド 5列 */
div.costume_grid { display:flex; flex-wrap:wrap; gap:15px; }
div.costume_card { width:calc(20% - 12px); border:1px solid #eee; border-radius:8px;
    overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); }
div.costume_card a { display:block; text-decoration:none; color:inherit; }
div.costume_card_image { width:100%; aspect-ratio:3/4; overflow:hidden; background:#f5f5f5; }
div.costume_card_image img { width:100%; height:100%; object-fit:cover; }
div.costume_card_info { padding:8px 10px 12px; }
h3.costume_card_name { font-size:12px; color:#ff6e9b; margin-bottom:4px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
p.costume_card_area { font-size:11px; color:#888; margin-bottom:4px; }
p.costume_card_style { font-size:11px; color:#555; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== エリア選択UI - デスクトップ ===== */
.area-gps-btn { display: none; }

.area-inline-section-pc {
    gap: 4px;
}

.area-inline-section-pc .area-quick-btn {
    margin-bottom: 4px;
}

.area-sidebar-panel {
    display: block;
}