body[data-variant="old"] {
  div.preview-main {
    padding: 10px;
    border: solid #E9F5FF;
    border-image: none;
    text-decoration: none;
    max-width: 100%;
    background-color: #e9f5ff;
  }

  div.preview-detail {
    padding: 10px;
    border: solid white;
    border-image: none;
    text-decoration: none;
    max-width: 100%;
    background-color: white;
  }
}

body[data-variant="default"] {
  .company_wrap {
    margin: 0 auto;
    max-width: 980px;
    width: 90%;
  }

  .company_title {
    font-size: 36px;
    margin-bottom: 40px;
    text-align: center;
  }

  .company_title span {
    margin-right: 40px;
  }

  .company_photo_block {
    display: flex;
    justify-content: center;
    gap: 4%;
    margin-bottom: 40px;
    padding:4%;
    background:#d0ecff;
  }

  .company_photo {
    display:flex;
    flex:1;
    justify-content:center;
    align-items:center;
    margin: 0;
  }

  .company_photo img {
    width: 100%;
    max-width:100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    aspect-ratio: 4/3;
  }

  .company_txt {
    font-size: 18px;
    line-height: 1.8;
    margin: 0 auto 80px;
    width: 95%;
  }

  .company_info_title {
    background: #2C81BD;
    color: #fff;
    font-size: 20px;
    padding: 7px;
    margin-bottom: 20px;
    text-align: center;
  }

  .company_info_detail_title {
    background: #99C8E8;
    font-size: 18px;
    font-weight: 500;
    padding: 4px 40px;
  }

  .company_info_detail_cont {
    background: #fff;
    line-height: 1.6;
    padding: 15px 25px;
    margin: 0;
  }

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

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

  .company_info_cont {
    margin-bottom: 80px;
  }

  .school_box {
    margin-bottom: 0;
  }

  .school_box_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .school_box dt {
    background-color: #CAE0BE;
    border: 1px solid #CAE0BE;
    font-size: 14px;
    padding: 3px 14px;
    text-align: center;
  }

  .school_box dd {
    border: 1px solid #CAE0BE;
    padding: 3px;
    margin-bottom: 0;
    text-align: center;
  }

  .back_btn {
    margin: -40px 0 100px;
  }

  .back_btn a {
    background-color: #fff;
    border: 1px solid #2C81BD;
    border-radius: 999px;
    color: #2C81BD;
    display: block;
    font-size: 18px;
    padding: 20px;
    max-width: 307px;
    margin-inline: auto;
    width: 90%;
    transition: .4s;
    text-align: center;
  }

  .back_btn a:hover {
    background-color: #2C81BD;
    color: #fff;
    opacity: 1;
    text-decoration: none;
  }

  .back_btn a span {
    position: relative;
  }

  .back_btn a span::before {
    content: url(/tanki/assets/portal/public_office_infos/show/arrow-184ac1a1432c693e2cb17f38464763373b142eb3e5d58cf1575c58edcd46ad06.svg);
    margin-right: 15px;
  }

  .back_btn a:hover span::before {
    content: url(/tanki/assets/portal/public_office_infos/show/arrow02-2be0f6a3c0b70eb8bb18fc59269154d914160267087e36119ca94d2bca865ef7.svg);
  }

  .type_block {
    margin-bottom: 20px;
  }

  .detail_cities {
    font-size: 18px;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
  }

  .detail_cities::before {
    content: "";
    background-image: url(/tanki/assets/portal/public_office_infos/show/cities_icon-faded1887ddce263f76415318fcae7b078575d229d324b639cde455f88cd4aef.svg);
    background-size: cover;
    width: 22.5px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .detail_icons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin: 0;
  }

  .detail_icons li {
    position: relative;
    padding-left: 40px;
  }

  .detail_icons li::before {
    content: "";
    background-size: cover;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -2px;
    left: 0;
  }

  .detail_icons li.detail_icon01::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon01-839bf84715211b2158619505f759c7a3a3d586b81d66d7217ae2e2cdf7669ead.svg);
  }

  .detail_icons li.detail_icon02::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon02-6de37d26b93fe64ae0ad67baefaaf8f59a276ff3a179c5d90790043db6f462f9.svg);
  }

  .detail_icons li.detail_icon03::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon03-b9db6bb0a12b944814769eee20466112f3139e8a17d322b5c91642e2a5d2ed40.svg);
  }

  .detail_icons li.detail_icon04::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon04-aa516269c64a941b69a11fd993526297ef6220430ec1db41783cb92c554dde2b.svg);
  }

  .detail_icons li.detail_icon05::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon05-6c558c32e94dae1646a1c65f452fb015adde7c59509711b89339b1399bc5e0ca.svg);
  }

  .detail_icons li.detail_icon06::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon06-9b6f1d66168ebef82e7ce6bb149dc378fb4732fb639fe391ed6c3c42974d6807.svg);
  }

  .detail_icons li.detail_icon07::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon07-6de4cf91d79814b8cca73b9a30107d6cc6e0c92cebe325cd211d85df80168e6b.svg);
  }

  .detail_icons li.detail_icon08::before {
    background-image: url(/tanki/assets/portal/public_office_infos/show/icon08-78f629e0c78120af23e8796aaaa99ff21536f3c60ebff2c4da0d955e1c25ddf3.svg);
  }

  @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%;
    }

    .company_photo_block {
      display: block;
    }

    .company_photo {
      margin-bottom: 30px;
      width: 100%;
    }

    .company_photo img {
      width: 100%;
      height: auto;
    }
  }


  @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;
    }
  }

}