/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/


body[data-variant="old"] {
  .key_word {
    width: 100%;
    background: #fff;
    padding: 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  #info_title_td {
    border: 1px solid rgb(255, 182, 193);
    background-color: rgb(255, 192, 203);
  }

  #info_note_td {
    border: 1px solid rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
  }

  #notice_title_td {
    border: 1px solid rgb(255, 182, 193);
    background-color: rgb(255, 192, 203);
  }

  #notice_note_td {
    border: 1px solid rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
  }
}

body[data-variant="default"] {

  /******************
  company
******************/
  .company_search_wrap {
    max-width: 900px;
    margin: 0 auto;
    width: 90%;
  }

  .company_search_txt {
    font-size: 18px;
    margin-bottom: 40px;
    text-align: center;
  }

  .company_search_txt p {
    margin-bottom: 40px;
  }

  .company_search_txt p:last-child {
    margin-bottom: 0;
  }

  .company_search_list {
    background: #fff;
    border: 10px solid #99C8E8;
    padding: 20px 30px;
    margin-bottom: 80px;
  }

  .company_search_list li {
    line-height: 1.8;
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 15px;
  }

  .company_search_list li::before {
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
  }

  .company_search_list li:last-child {
    margin-bottom: 0;
  }

  .form_area_title {
    background: #2C81BD;
    color: #fff;
    font-size: 20px;
    letter-spacing: 4px;
    margin-bottom: 15px;
    padding: 4px;
    text-align: center;
  }

  .jobsearch_box dl {
    align-items: center;
    background-color: #fff;
    display: flex;
    padding: 20px;
  }

  .jobsearch_box dt {
    font-weight: 500;
    margin-right: 30px;
    text-align: center;
    width: 100px;
  }

  .jobsearch_box dd {
    flex: 1;
    margin-bottom: 0;
  }

  .check_list {
    display: flex;
    flex-wrap: wrap;
    gap: 13px 20px;
    margin-bottom: 0;
  }

  .check_list input[type="checkbox"]::before {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #000;
    left: 5px;
    width: 16px;
    height: 16px;
    top: -1px;
  }

  .check_list input[type="checkbox"]::after {
    border-bottom: 3px solid #2C81BD;
    border-left: 3px solid #2C81BD;
    top: -8px;
  }

  .check_list li label {
    margin-bottom: 0;
  }

  .list_x5 li {
    width: 17%;
  }

  .list_x3 li {
    width: 18%;
  }

  .list_x2 li {
    width: 48%;
  }

  .keyword dt {
    width: 145px;
  }

  .keyword dd input {
    background-color: #F2F2F2;
    padding: 10px 20px;
    width: 100%;
  }

  .other dt {
    width: 160px;
  }

  .search_btn_block {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0 70px;
  }

  .search_btn_block p {
    position: relative;
    margin-bottom: 0;
  }

  .search_btn_block input {
    transition: .4s;
  }

  .search_btn_block input:hover {
    cursor: pointer;
    opacity: .6;
  }

  .search_btn_submit input {
    background-color: #2C81BD;
    border: 1px solid #2C81BD;
    border-radius: 999px;
    color: #fff;
    letter-spacing: 1px;
    padding: 15px 50px 15px 40px;
    position: relative;
    font-size: 18px;
  }

  .search_btn_submit::after {
    content: url(/tanki/assets/portal/public_office_infos/index/arrow-white-d7c5039cb0efc4fb4f22d7d7636d2985ecf1ebf3aaa1d077665c679f579d896f.svg);
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .search_btn_reset input {
    background-color: #fff;
    border: 1px solid #2C81BD;
    border-radius: 999px;
    color: #2C81BD;
    letter-spacing: 1px;
    padding: 15px 50px 15px 40px;
    font-size: 18px;
  }

  .search_btn_reset::after {
    content: url(/tanki/assets/portal/public_office_infos/index/arrow-blue-ff505147bf13994d7841ec933d495d94821d99f370502f7c3a21f5f94144d0c5.svg);
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon_list {
    background: #fff;
    border: 10px solid #99C8E8;
    padding: 20px 20px;
    margin-bottom: 40px;
  }

  .icon_list_title {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
  }

  .icon_list_block {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 25px 2%;
    margin-bottom: 0;
  }

  .icon_list_block li {
    padding-left: 35px;
    position: relative;
    width: 32%;
  }

  .icon01::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon01-839bf84715211b2158619505f759c7a3a3d586b81d66d7217ae2e2cdf7669ead.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon02::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon02-6de37d26b93fe64ae0ad67baefaaf8f59a276ff3a179c5d90790043db6f462f9.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon03::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon03-b9db6bb0a12b944814769eee20466112f3139e8a17d322b5c91642e2a5d2ed40.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon04::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon04-aa516269c64a941b69a11fd993526297ef6220430ec1db41783cb92c554dde2b.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon05::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon05-6c558c32e94dae1646a1c65f452fb015adde7c59509711b89339b1399bc5e0ca.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon06::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon06-9b6f1d66168ebef82e7ce6bb149dc378fb4732fb639fe391ed6c3c42974d6807.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon07::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon07-6de4cf91d79814b8cca73b9a30107d6cc6e0c92cebe325cd211d85df80168e6b.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .icon08::before {
    content: url(/tanki/assets/portal/public_office_infos/index/icon08-78f629e0c78120af23e8796aaaa99ff21536f3c60ebff2c4da0d955e1c25ddf3.svg);
    position: absolute;
    top: 64%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .package_area_title {
    background: #C3DCBE;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    text-align: center;
  }

  .package_block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 5%;
    margin-bottom: 40px;
  }

  .package_box {
    background-color: #fff;
    width: 30%;
  }

  .package_box a {
    color: #000;
    display: block;
    padding: 15px 15px 20px;
    transition: .4s;
  }

  .package_box a:hover {
    opacity: .6;
    text-decoration: none;
  }

  .package_title {
    font-size: 18px;
    font-weight: bold;
  }

  .package_title span {
    margin-right: 10px;
  }

  .package_img {
    margin-bottom: 15px;
  }

  .package_info_block {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .package_info_cities {
    font-size: 14px;
    margin: 0 20px 0 0;
    padding-left: 22px;
    position: relative;
  }

  .package_info_cities::before {
    content: url(/tanki/assets/portal/public_office_infos/index/cities_icon-faded1887ddce263f76415318fcae7b078575d229d324b639cde455f88cd4aef.svg);
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .package_info_icons {
    display: flex;
    margin: 0;
  }

  .package_info_icons li {
    margin-right: 10px;
  }

  .more_btn {
    background-color: #2C81BD;
    border-radius: 999px;
    color: #fff;
    font-size: 18px;
    margin: 0 auto;
    max-width: 232px;
    padding: 8px 8px 8px 0;
    text-align: center;
  }

  .more_btn span {
    position: relative;
  }

  .more_btn span::after {
    content: url(/tanki/assets/portal/public_office_infos/index/package_arrow-efa7f04c1c4466580f24c2a99af8781d42bc2e72f6fe4ddacba6253f2874c238.svg);
    position: absolute;
    top: 45%;
    right: -15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .office_title {
    background: #99C8E8;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    text-align: center;
  }

  .office_block {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 2%;
  }

  .office_box {
    background: #fff;
    width: 32%;
  }

  .office_area a {
    color: #000;
    display: block;
    padding: 15px 15px 20px;
    transition: .4s;
  }

  .office_area a:hover {
    opacity: .6;
    text-decoration: none;
  }

  .office_cat {
    background: #99C8E8;
    font-size: 14px;
    padding: 2px;
    margin-bottom: 10px;
    text-align: center;
  }

  .office_name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }

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

  .office_icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .office_area {
    margin-bottom: 100px;
  }

  @media screen and (max-width: 1000px) {
    .pc_only {
      display: none;
    }

    .sp_only {
      display: block;
    }

    .footer_info {
      display: block;
    }

    .footer_info_box {
      width: 100%;
      margin-bottom: 40px;
    }

    .footer_link {
      flex-wrap: wrap;
      gap: 15px 35px;
      justify-content: center;
    }

    /* ハンバーガーメニュー */
    .openbtn {
      position: relative;
      background: #2C81BD;
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 5px;
      overflow: hidden;
    }

    /*ボタン内側*/
    .openbtn .openbtn-area {
      transition: all .4s;
      /*アニメーションの設定*/
    }

    .openbtn span {
      display: inline-block;
      transition: all .4s;
      /*アニメーションの設定*/
      position: absolute;
      left: 14px;
      height: 3px;
      border-radius: 2px;
      background: #fff;
      width: 45%;
    }

    .openbtn span:nth-of-type(1) {
      top: 15px;
    }

    .openbtn span:nth-of-type(2) {
      top: 23px;
    }

    .openbtn span:nth-of-type(3) {
      top: 31px;
    }

    /*activeクラスが付与されると .openbtn-areaが360度回転し、
  その中の線のtopの位置や形状が変化して×に*/
    .openbtn.show .openbtn-area {
      transform: rotateX(360deg);
    }

    .openbtn.show span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-135deg);
      width: 30%;
    }

    .openbtn.show span:nth-of-type(2) {
      opacity: 0;
    }

    .openbtn.show span:nth-of-type(3) {
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(135deg);
      width: 30%;
    }

    /* メニュー部分 */
    .sp_navi {
      left: 0;
      top: 0;
      width: 100%;
      height: 40px;
      z-index: 999;
    }

    .global-nav {
      position: fixed;
      right: -320px;
      top: 0;
      width: 300px;
      height: 100vh;
      padding-top: 60px;
      background-color: #fff;
      transition: all 0.6s;
      z-index: 200;
      overflow-y: auto;
    }

    .hamburger {
      position: absolute;
      right: 20px;
      top: 9px;
      width: 50px;
      height: 50px;
      cursor: pointer;
      z-index: 300;
    }

    .global-nav__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .global-nav__item {
      text-align: center;
      padding: 0 14px;
    }

    .global-nav__item a {
      display: block;
      padding: 15px 0;
      border-bottom: 1px solid #eee;
      text-decoration: none;
      color: #111;
      font-size: 16px;
      text-align: left;
    }

    .global-nav__item a:hover {
      background-color: #eee;
    }

    .hamburger__line {
      position: absolute;
      left: 11px;
      width: 50px;
      height: 2px;
      background-color: #111;
      transition: all 0.6s;
    }

    .black-bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      background-color: #231815;
      opacity: 0;
      visibility: hidden;
      transition: all 0.6s;
      cursor: pointer;
    }

    .sp_list {
      padding-left: 1em;
    }

    /* 表示された時用のCSS */
    .nav-open .global-nav {
      right: 0;
    }

    .nav-open .black-bg {
      opacity: 0.8;
      visibility: visible;
    }

    .sp_br {
      display: none;
    }

    .cv_txt,
    .cv_day {
      font-size: 23px;
    }

    .page_link {
      flex-wrap: wrap;
      gap: 20px 6%;
    }

    .page_link li {
      width: 47%;
    }

    .jobsearch_box dl {
      display: block;
    }

    .jobsearch_box dt {
      text-align: left;
      margin-bottom: 10px;
      width: 100%;
    }
  }


  @media screen and (max-width: 900px) {
    .flow_cont_wrap {
      display: block;
    }

    .flow_box {
      margin-bottom: 40px;
      width: 100%;
    }

    .flow_box:last-child {
      margin-bottom: 0;
    }

    .list_x5 li {
      width: 30%;
    }
  }


  @media screen and (max-width: 768px) {
    .pc_mv {
      display: none;
    }

    .sp_mv {
      display: block;
    }

    .head_wrap_title {
      font-size: 28px;
    }

    .about_cont_title span {
      font-size: 20px;
    }

    .recommend_cont {
      gap: 10px;
    }

    .package_merit_title {
      font-size: 19px;
    }

    .voice_link {
      display: block;
      width: 100%;
    }

    .voice_link_btn:first-child,
    .voice_link_btn:nth-child(2) {
      max-width: 365px;
      margin-inline: auto;
      width: 100%;
    }

    .voice_link_btn:first-child {
      margin-bottom: 70px;
    }

    .news_list li {
      display: block;
    }

    .news_info {
      margin-bottom: 8px;
    }

    .outline_block {
      display: block;
    }

    .outline_block dt {
      padding: 10px;
      width: 100%;
    }

    .schedule_block>dt {
      font-size: 18px;
    }

    .cv_wrap_block {
      display: block;
    }

    .cv_wrap_block p.cv_btn {
      max-width: 240px;
      margin-inline: auto;
      margin-top: 10px;
    }

    .ready_wrap::before {
      width: 83px;
      height: 117px;
      top: 40px;
    }

    .flow_wrap::before {
      width: 108px;
      height: 168px;
      top: 10px;
    }

    .experience_wrap::before {
      width: 108px;
      height: 106px;
      top: 50px;
    }

    .review_wrap::before {
      width: 58px;
      height: 124px;
      top: 50px;
    }

    .review_wrap::after {
      width: 84px;
      height: 108px;
      bottom: -90px;
    }

    .mv_wrap {
      margin-bottom: 60px;
    }

    .flow_link a {
      font-size: 14px;
    }

    .review_btn a {
      font-size: 14px;
      padding: 10px 35px;
    }

    .closing {
      font-size: 21px;
      margin-top: -20px;
    }

    .ready_wrap,
    .flow_wrap,
    .experience_wrap {
      margin-bottom: 80px;
    }

    .about_cont_txt {
      font-size: 16px;
    }

    .recommend_point_title {
      font-size: 20px;
    }

    .recommend_point_list li {
      font-size: 16px;
    }

    .company_txt {
      font-size: 16px;
      line-height: 1.6;
    }

    .company_title {
      font-size: 32px;
    }

    .company_title span {
      display: block;
      margin-right: 0;
    }

    .company_search_txt {
      font-size: 16px;
    }

    .company_search_list li {
      line-height: 1.6;
    }

    .company_search_txt p {
      margin-bottom: 20px;
    }

    .point_br {
      display: none;
    }

    .icon_list_block li {
      width: 49%;
    }

    .package_box {
      width: 47%;
    }

    .package_img {
      text-align: center;
    }

    .office_block {
      gap: 30px 5%;
    }

    .office_box {
      width: 47%;
    }

    .office_photo {
      text-align: center;
    }

    .detail_cities {
      font-size: 16px;
    }

    .detail_icons li {
      padding-left: 35px;
    }

    .detail_icons li::before {
      width: 25px;
      height: 25px;
      top: 1;
    }

    .acceptance_wrap::after {
      width: 90px;
      height: 127px;
      top: -30px;
      right: 10px;
    }
  }

  @media screen and (max-width: 600px) {
    .footer_info_contact {
      align-items: center;
      margin-bottom: 5px;
    }

    .footer_info_contact_link {
      position: initial;
      transform: none;
      -webkit-transform: none;
      -ms-transform: none;
      width: 70px;
    }

    .schedule_block_sub {
      display: block;
    }

    .schedule_block_sub dt {
      text-align: left;
      margin-bottom: 8px;
      width: 100%;
    }

    .schedule_block:first-child .schedule_block_sub dt {
      padding: 5px;
      text-align: center;
    }

    .cv_wrap_block {
      width: 90%;
    }

    .cv_txt,
    .cv_day {
      font-size: 17px;
    }

    .cv_btn a {
      font-size: 16px;
    }

    .cv_wrap_block p.cv_btn {
      max-width: 220px;
    }

    .page_link li {
      width: 100%;
    }

    .ready_wrap::before {
      width: 73px;
      height: 102px;
      top: 80px;
    }

    .flow_wrap::before {
      width: 78px;
      height: 113px;
      top: 70px;
    }

    .experience_wrap::before {
      width: 98px;
      height: 95px;
      top: 110px;
    }

    .review_wrap::before {
      width: 48px;
      height: 100px;
      top: 70px;
    }

    .review_wrap::after {
      width: 74px;
      height: 94px;
      bottom: -100px;
    }

    .footer_info_contact_name {
      font-size: 15px;
    }

    .footer_info_block {
      font-size: 22px;
    }

    .footer_info_block_txt {
      font-size: 15px;
    }

    .footer_info_case h3 {
      font-size: 18px;
    }

    .footer_info_case p {
      font-size: 15px;
      margin-bottom: 13px;
    }

    .footer_info_title {
      font-size: 18px;
      padding: 6px;
    }

    .footer_info_cont {
      padding: 15px 25px;
    }

    .footer_link li a {
      font-size: 15px;
    }

    .footer_info {
      margin-bottom: 40px;
    }

    .company_info_detail_title {
      font-size: 17px;
    }

    .list_x2 li {
      width: 100%;
    }

    .list_x5 li {
      width: 44%;
    }

    .list_x3 li {
      width: 28%;
    }

    .search_btn_block {
      display: block;
    }

    .search_btn_block p {
      width: 225px;
      margin-inline: auto;
    }

    .search_btn_block p.search_btn_submit {
      margin-bottom: 20px;
    }

    .search_btn_reset input {
      width: 100%;
    }

    .icon_list_block li {
      width: 100%;
    }

    .package_box {
      width: 100%;
    }

    .office_box {
      width: 100%;
    }

    .acceptance_wrap::after {
      width: 70px;
      height: 100px;
      top: 20px;
      right: 0px;
    }

    .business_ready .closing {
      margin-top: 5px;
    }

    .business_ready .review_btn a {
      padding-right: 80px;
    }

    .more_btn.about_btn.flow_btn a {
      font-size: 16px;
    }
  }
}