@charset "UTF-8";
/*
//////////////////////////////////////////////////////////////////////////////

search_introduction.css
- 働き方紹介

//////////////////////////////////////////////////////////////////////////////
*/
/* 一覧 - 共通
===============================================
=============================================== */
.search_company .form_btn { max-width: 570px; margin: 10px auto 0; }
@media screen and (min-width: 600px) { .search_company .form_btn { margin: 20px auto; } }
.search_company .dl_form01 .form_btn { margin: 10px auto; }
@media screen and (min-width: 600px) { .search_company .job_search_slct02 { position: relative; margin-left: 40px; }
  .search_company .job_search_slct02::before { position: absolute; top: 0; left: -40px; display: block; content: "×"; width: 40px; height: 40px; font-weight: bold; color: #00a99d; font-size: 3.2rem; } }

@media screen and (min-width: 960px) { .sort_area { max-width: 800px; margin: auto; } }
.sort_area .slct_wrap { margin-bottom: 0; text-align: center; }
@media screen and (min-width: 600px) { .sort_area .slct_wrap { margin-top: 0; } }
.sort_area .multiply { display: none; }
@media screen and (min-width: 600px) { .sort_area .multiply { display: block; } }
.sort_area .slct { width: 100%; }
@media screen and (min-width: 600px) { .sort_area { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .sort_area .slct_wrap { width: calc(50% - 20px); }
  .sort_area .slct { width: 100%; margin: 0; } }

.sort_all { display: inline-block; color: #00a99d; text-align: center; min-width: 120px; border-bottom: 2px solid #00a99d;}
@media screen and (min-width: 600px) { .sort_all { padding: 0 15px; } }
.sort_all b { font-size: 1.6rem; }
@media screen and (min-width: 600px) { .sort_all b { font-size: 2.4rem; } }

.more_condition li { margin: 5px 0; width: 100%; }
@media screen and (min-width: 600px) { .more_condition { display: flex; justify-content: space-between; }
  .more_condition li { width: auto; } }
@media screen and (min-width: 960px) { .more_condition { margin: 0 0 0 20px; padding-top: 12px; } }

.more_btn { display: inline-block; margin-top: 20px; }
@media screen and (min-width: 960px) { .more_btn { margin-right: 20px; margin-bottom: 0; } }
.more_btn a { margin: 0; }
.more_btn a.active { border-radius: 4px 4px 0 0; }

.sort_more_area { padding: 10px; margin: 0; background: #d8eeec; }
@media screen and (min-width: 600px) { .sort_more_area .ico_form li { width: 33%; }
  .sort_more_area .ico_form.ico_form_nowrap li { width: 50%; } }
@media screen and (min-width: 960px) { .sort_more_area { margin: -1px 20px 0; padding: 20px; }
  .sort_more_area .ico_form li { width: 20%; } }
.sort_more_area .form_box { margin-bottom: 10px; }

.js_accordion dt { cursor: pointer; background: url("../img/icon/icn_arw01_b.svg") no-repeat right center; background-size: 16px 16px; }
.js_accordion dt.open { background: url("../img/icon/icn_arw01_t.svg") no-repeat right center; background-size: 16px 16px; }

.search_company .sort_more_area .form_btn { max-width: 100%; }
.search_company .sort_more_area .form_btn li + li { margin-left: 10px; }

.form_btn .btn { width: 100%; }

.sort-num { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 5px 0; border-top: 1px solid #cacaca; border-bottom: 1px solid #cacaca; }

/* 一覧 - リスト
===============================================
=============================================== */
/* 一覧 - マップ
===============================================
=============================================== */
/* 地図表示
============================== */
.map_area { background: #fff; margin: auto 10px; }
@media screen and (min-width: 960px) { .map_area { margin: auto 20px; } }
.map_area iframe { vertical-align: bottom; }

/* 詳細
===============================================
=============================================== */
.company_detail .list_tag { margin: 20px 0 0; padding: 0; }
@media screen and (min-width: 960px) { .company_detail .list_tag { margin: 0; } }
.company_detail .list_tag li { display: inline-block; margin-bottom: 5px; padding: 0 10px; background: #00a99d; font-weight: bold; color: #fff; border-radius: 30px; }
.company_detail .list_info { margin-top: 10px; padding: 10px 10px 10px 1em; background: #d8eeec; }
@media screen and (min-width: 960px) { .company_detail .list_info { padding: 20px 20px 20px 2em; } }
.company_detail .s-work_btn { list-style: none; margin: 10px 0 20px; padding: 0; }
@media screen and (min-width: 600px) { .company_detail .s-work_btn { display: flex; justify-content: center; } }
.company_detail .s-work_btn li { margin-top: 10px; }
@media screen and (min-width: 600px) { .company_detail .s-work_btn li { width: 48%; margin: 10px 1% 0; } }
.company_detail .s-work_btn .btn { width: 100%; max-width: 100%; margin-top: 0; padding: 5px 9px; text-align: center; }
@media screen and (min-width: 960px) { .company_detail .s-work_btn .btn { padding: 10px; } }
.company_detail .s-work_btn .btn img { vertical-align: sub; }
.company_detail .s-work_btn .btn.btn_scout span { display: block; padding: 5px 0 5px 36px; background: url("../img/icon/icn_scout_wh.svg") no-repeat left center; background-size: 36px 36px; }
.company_detail .s-work_btn .btn.btn_scout:hover span { background: url("../img/icon/icn_scout.svg") no-repeat left center; background-size: 36px 36px; }
.company_detail .s-work_btn .btn.btn_qr span { display: block; padding: 5px 0 5px 36px; background: url("../img/icon/icn_qr_wh.svg") no-repeat left center; background-size: 36px 36px; }
.company_detail .s-work_btn .btn.btn_qr:hover span { background: url("../img/icon/icn_qr.svg") no-repeat left center; background-size: 36px 36px; }
.company_detail .appeal { padding-top: 0; }
.company_detail .appeal h2 { margin: 20px 0 5px; font-size: 1.6rem; color: #00a99d; }
@media screen and (min-width: 600px) { .company_detail .appeal h2 { margin-top: 30px; font-size: 2.0rem; } }
@media screen and (min-width: 960px) { .company_detail .appeal h2 { margin-top: 40px; font-size: 2.4rem; } }
.company_detail .appeal .appeal_photo { text-align: center; }
.company_detail .appeal .appeal_photo img { width: 100%; max-width: 860px; height: auto; }
.company_detail .detail-dltable { display: flex; flex-wrap: wrap; max-width: 880px; margin: 20px auto 0; border: 1px solid #cacaca; border-radius: 10px; }
.company_detail .detail-dltable dt, .company_detail .detail-dltable dd { border-top: 1px solid #cacaca; }
.company_detail .detail-dltable dt:first-of-type, .company_detail .detail-dltable dd:first-of-type { border-top: none; }
.company_detail .detail-dltable dt { width: 7em; padding: 10px; background: #d8eeec; border-right: 1px solid #cacaca; font-weight: bold; }
@media screen and (min-width: 600px) { .company_detail .detail-dltable dt { width: 12em; } }
.company_detail .detail-dltable dt:first-of-type { border-radius: 8px 0 0 0; }
.company_detail .detail-dltable dt:last-of-type { border-radius: 0 0 0 8px; }
.company_detail .detail-dltable dd { width: calc(100% - 7em); margin: 0; padding: 10px; background: #fff; word-wrap: break-word; }
.company_detail .detail-dltable dd:first-child { border-top: none; }
.company_detail .detail-dltable dd:first-of-type { border-radius: 0 8px 0 0; }
.company_detail .detail-dltable dd:last-of-type { border-radius: 0 0 8px 0; }
@media screen and (min-width: 600px) { .company_detail .detail-dltable dd { width: calc(100% - 12em); } }
@media screen and (min-width: 960px) { .company_detail .detail-dltable dd { padding: 15px; } }
.company_detail .detail-dltable_address { display: flex; justify-content: space-between; margin: 0; }
.company_detail .detail-dltable_address span { width: calc( 100% - 50px); }
.company_detail .detail-dltable_address .btn_icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.company_detail .detail-dltable_address .btn_icon:hover img { opacity: 1; }
.company_detail .pr_movie_inner { position: relative; width: 100%; padding-top: 56.25%; }
.company_detail .pr_movie_inner iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

.box_wrap_people { display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 10px; }

.box_people { width: 100%; border: 1px solid #cacaca; border-radius: 10px; transition: .2s; }
@media screen and (min-width: 600px) { .box_people { width: calc(50% - 5px); margin: 20px 0 0; } }
@media screen and (min-width: 960px) { .box_people { width: calc(50% - 10px); }
  .box_people:hover { border-color: #00a99d; background: #d8eeec; } }
.box_people + .box_people { margin-top: 20px; }
@media screen and (min-width: 600px) { .box_people + .box_people { margin-top: 30px; } }
@media screen and (min-width: 600px) { .box_people:nth-child(-n+2) { margin-top: 0; }
  .box_people:nth-child(2n-1) { margin-right: 5px; } }
@media screen and (min-width: 600px) and (min-width: 960px) { .box_people:nth-child(2n-1) { margin-right: 10px; } }
@media screen and (min-width: 600px) { .box_people:nth-child(2n) { margin-left: 5px; } }
@media screen and (min-width: 600px) and (min-width: 960px) { .box_people:nth-child(2n) { margin-left: 10px; } }

.box_people a { position: relative; display: block; width: 100%; height: 100%; padding: 10px; text-decoration: none; }
@media screen and (min-width: 960px) { .box_people a { padding: 20px; } }
.box_people a::after { position: absolute; bottom: -10px; right: 0; z-index: 0; display: block; content: ""; width: calc(100% - 20px); height: 100%; border-radius: 10px; }
.box_people .box_contens { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; position: relative; z-index: 1; }
@media screen and (min-width: 960px) { .box_people .box_contens { display: block; }
  .box_people .box_contens::after { content: ""; display: block; clear: both; }
  .box_people .box_contens::before { content: ""; display: block; clear: both; } }
.box_people .thumb { flex-shrink: 0; width: 100px; margin: 0; }
@media screen and (min-width: 960px) { .box_people .thumb { float: left; width: 160px; margin: 0; } }
.box_people .thumb img { width: 100%; height: auto; }
.box_people .thumb img:hover { opacity: 1; }
.box_people .info { width: calc( 100% - 110px); }
@media screen and (min-width: 960px) { .box_people .info { float: right; width: calc( 100% - 180px); } }
.box_people .tag span { display: inline-block; margin: 0 5px 5px 0; padding: 3px 10px 1px; background: #00a99d; color: #fff; line-height: 1.3; font-weight: bold; font-size: 1.0rem; border-radius: 10px; }
@media screen and (min-width: 960px) { .box_people .tag span { font-size: 1.2rem; } }
.box_people .tag span:last-child { margin-right: 0; }
.box_people .name { margin: 10px 0 0; color: #00a99d; font-weight: bold; font-size: 1.8rem; line-height: 1.1; }
@media screen and (min-width: 960px) { .box_people .name { font-size: 2.4rem; } }
.box_people .name span { font-size: 1.2rem; }
@media screen and (min-width: 960px) { .box_people .name span { font-size: 1.8rem; } }
.box_people .txt { width: 100%; color: #333; }
@media screen and (min-width: 960px) { .box_people .txt { float: right; width: calc( 100% - 180px); } }
.box_people .txt p { margin: 10px 0 0; }

.pop_qr { max-height: 500px; min-width: 300px; }
@media screen and (min-width: 600px) { .pop_qr { max-height: 600px; } }
.pop_qr .contents_wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.pop_qr .contents_wrap p { width: 100%; margin-bottom: 0; }
.pop_qr .img_qr { text-align: center; }
.pop_qr .img_qr img { width: 50%; height: auto; }

/* 働き方紹介
===============================================
=============================================== */
/* タグ
======================= */
.detail_tag { list-style: none; width: 100%; margin: 10px 0 0; padding: 0; }
@media screen and (min-width: 600px) { .detail_tag { margin-top: 20px; } }
.detail_tag li { display: inline-block; margin: 0 5px 5px 0; padding: 3px 10px 1px; background: #00a99d; color: #fff; line-height: 1.3; font-size: 1.2rem; font-weight: bold; border-radius: 10px; }
@media screen and (min-width: 960px) { .detail_tag li { font-size: 1.4rem; } }

/* プロフィール
======================= */
.profile { margin-bottom: 20px; background: #f8f8f8; border-radius: 10px; }
@media screen and (min-width: 600px) { .profile { display: flex; margin-top: 10px; margin-bottom: 40px; border-radius: 15px; } }
@media screen and (min-width: 960px) { .profile { border-radius: 20px; } }
.profile h1 { margin: 0; font-size: 2.8rem; line-height: 1.1; }
@media screen and (min-width: 960px) { .profile h1 { font-size: 3.6rem; } }
.profile h1 span { font-size: 2.0rem; }
@media screen and (min-width: 960px) { .profile h1 span { font-size: 2.4rem; } }
.profile_txt > *:first-child { margin-top: 0; }
.profile_txt > *:last-child { margin-bottom: 0; }
@media screen and (min-width: 600px) { .profile_txt { flex-grow: 1; } }
.profile_img { margin: 20px 0 0; text-align: center; }
@media screen and (min-width: 600px) { .profile_img { flex-shrink: 0; width: 30%; max-width: 200px; margin: 0 0 0 20px; } }
@media screen and (min-width: 960px) { .profile_img { width: 240px; max-width: 240px; margin: 0 0 0 40px; } }
.profile_img img { max-width: 100%; height: auto; }

/* 1日の流れ
======================= */
.oneday { margin-bottom: 20px; }
@media screen and (min-width: 600px) { .oneday { margin-bottom: 40px; font-size: 1.5rem; } }
@media screen and (min-width: 960px) { .oneday { font-size: 1.8rem; } }
.oneday_list { list-style: none; padding: 0; }
.oneday_list li { position: relative; display: flex; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid #cacaca; }
@media screen and (min-width: 600px) { .oneday_list li { flex-wrap: nowrap; align-items: center; padding: 20px 20px 20px 0; } }
@media screen and (min-width: 960px) { .oneday_list li { padding: 30px 40px 30px 0; } }
.oneday_list li::after { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 8px; border-color: #cacaca transparent transparent transparent; }
.oneday_list li:first-child::after { display: none; }
.oneday_time { width: 100%; }
@media screen and (min-width: 600px) { .oneday_time { flex-shrink: 0; width: 120px; text-align: center; } }
@media screen and (min-width: 960px) { .oneday_time { width: 240px; } }
.oneday_time span { font-size: 1.2em; font-weight: bold; color: #333; text-align: center; border-radius: 4px; }
@media screen and (min-width: 600px) { .oneday_time span { width: 115px; } }
@media screen and (min-width: 960px) { .oneday_time span { width: 140px; } }
.oneday_contents { margin-top: 6px; }
@media screen and (min-width: 600px) { .oneday_contents { margin-top: 0; } }

.list_col02 .oneday_time span { color: #00a99d; }

/* QA
======================= */
.box_qa { font-size: 1.5rem; }
@media screen and (min-width: 960px) { .box_qa { font-size: 1.8rem; } }
.box_qa + .box_qa { margin-top: 2em; }
@media screen and (min-width: 600px) { .box_qa + .box_qa { margin-top: 30px; } }

.question { min-height: 27px; padding-left: 44px; font-weight: bold; background: url("../img/icon/icn_q.svg") no-repeat left 10px top 3px; background-size: 24px 24px; }
@media screen and (min-width: 600px) { .question { min-height: 35px; padding-left: 55px; background-position: left 15px top 3px; background-size: 32px 32px; } }
@media screen and (min-width: 960px) { .question { min-height: 51px; padding-left: 93px; background-position: left 25px top 6px; background-size: 48px 48px; } }

.answer { margin-top: 1em; padding: 1em 10px; background: #f8f8f8; border-top: 1px solid #cacaca; }
@media screen and (min-width: 600px) { .answer { padding: 20px 20px 20px 10px; } }
@media screen and (min-width: 960px) { .answer { display: flex; padding: 20px 40px 40px 20px; } }
.answer p { margin: 0 0 10px; }
.answer_txt { min-height: 27px; padding-left: 34px; background: url("../img/icon/icn_a.svg") no-repeat left 0 top 3px #f8f8f8; background-size: 24px 24px; }
@media screen and (min-width: 600px) { .answer_txt { min-height: 35px; padding-left: 47px; background-position: left 5px top 3px; background-size: 32px 32px; } }
@media screen and (min-width: 960px) { .answer_txt { flex-grow: 1; min-height: 51px; padding-left: 73px; background-size: 48px 48px; } }
.answer_img { margin: 10px auto 0 !important; text-align: center; }
@media screen and (min-width: 960px) { .answer_img { flex-shrink: 0; width: 300px; margin-top: 5px !important; margin-left: 40px !important; } }
.answer_img img { max-width: 100%; height: auto; }