@charset "utf-8";


@media screen and (max-width:1340px) {

  /*--------------------------------------------------
  TOPICS
  --------------------------------------------------*/
  .topics_cont ul {
    max-width: 1000px;
  }

}


@media screen and (max-width:960px) {

  /*--------------------------------------------------
  ヘッダー
  --------------------------------------------------*/

  /* ヘッダーロゴ */
  .header_logo {
    left: 20px;
  }

  .header_logo img {
    height: 50px;
    width: auto;
  }

  /* グローバルナビ */
  .gnavi {
    display: none;
  }

  /* メインビジュアル */
  .mv_img_wrapper {
    aspect-ratio: 16/16;
    position: relative;
    overflow: hidden;
  }

  .mv_img_wrapper .top_movie_pc {
    display: none;
  }

  .mv_img_wrapper .top_image_sp {
    display: block;
  }

  .mv_title {
    width: 100%;
    left: -10%;
  }

  .mv_img_wrapper_recruit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* 固定ページバージョンのスタイル */
  .mv_img_wrapper_sub {
    height: 260px;
  }

  .mv_img_wrapper_sub img {
    height: 100%;
    object-fit: cover;
  }

  /* スクロールアイコン */
  .scroll_icon_txt {
    font-size: 0.75rem;
  }

  .scroll_icon_bar {
    height: 30px;
  }


  /*--------------------------------------------------
  ハンバーガーメニュー
  --------------------------------------------------*/
  .gnavi_sp {
    display: flex;
  }


  /*--------------------------------------------------
  index共通
  --------------------------------------------------*/
  .content_wrapper {
    padding: 20px 20px 50px;
  }

  /* セクションタイトル（h2） */
  .section_title {
    font-size: 2.5em;
  }

  .section_title_jpn {
    font-size: 0.4em;
    margin-top: 0.5em;
  }

  .section_body {
    font-size: 1rem;
  }

  /* moreボタン */
  .more_btn_wrapper {
    margin-top: 40px;
  }

  .more_btn {
    width: 220px;
    height: 46px;
    font-size: 1rem;
  }


  /*--------------------------------------------------
  TOPICS
  --------------------------------------------------*/
  section#topics::before {
    width: 340px;
    height: 600px;
    top: 50px;
    background-size: 600px;
  }

  .topics_cont::after {
    width: 70%;
    max-width: 900px;
    height: 85%;
  }

  .topics_cont ul {
    max-width: 700px;
    gap: 20px;
  }

  .topics_cont ul li a {
    width: 170px;
  }


  .topics_cont_date_wrapper {
    font-size: 0.7rem;
  }

  .topics_cont_title {
    font-size: 0.75rem;
  }

  .topics_btn_wrapper {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }


  /*--------------------------------------------------
  ABOUT
  --------------------------------------------------*/
  .about_flex_wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .about_left {
    flex-basis: auto;
  }

  .about_right {
    flex-basis: auto;
    text-align: right;
    align-self: flex-end;
  }

  .about_right img {
    width: 90%;
  }


  /*--------------------------------------------------
  BUSINESS
  --------------------------------------------------*/
  .business_cont_title {
    font-size: 1rem;
    width: 250px;
  }

  .business_cont1 {
    flex-direction: column;
    gap: 60px;
    margin-bottom: 60px;
  }

  .business_cont1 a {
    height: 200px;
  }

  .business_cont2 {
    margin-bottom: 80px;
  }

  section#business::before {
    width: 300px;
    height: 500px;
    top: auto;
    bottom: -50px;
    background: url(../img/hexagon_blue.svg) no-repeat right / 500px;
  }

  section#business::after {
    width: 200px;
    height: 200px;
    top: auto;
    left: auto;
    right: 10px;
    bottom: 20px;
    background: url(../img/hexagon_white_1.svg) no-repeat right / 100%;
    position: absolute;
    z-index: -20;
  }



  /*--------------------------------------------------
  リクルートページ
  --------------------------------------------------*/
  .recruit_page h2 {
    font-size: 2rem;
  }

  .recruit_page h2 span {
    font-size: 0.45em;
  }


  /* リクルート　職種紹介 */
  #recruit_position .content_wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  .recruit_position_copy {
    font-size: 1.25rem;
  }

  .recruit_position_cont {
    display: flex;
    gap: 5%;
  }

  .recruit_position_item h3 {
    font-size: 1.25em;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0.25em;
  }


  /* リクルート 数字で見る北興商事 */
  #recruit_numbers .content_wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  #recruit_numbers {
    background-attachment: scroll;
  }

  .recruit_numbers_list {
    gap: 30px;
    flex-direction: column;
    align-items: center;
  }

  .recruit_numbers_list li {
    width: 100%;
    max-width: 400px;
  }


  /* リクルート　インタビュー */
  #recruit_interview .content_wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  .interview_cont article {
    font-size: 0.875rem;
  }

  .recruit_interview_info {
    flex-direction: column;
    gap: 60px;
  }

  .recruit_interview_photo {
    flex-basis: auto;
  }

  .recruit_interview_photo_inner {
    max-width: 300px;
    height: auto;
  }

  .recruit_interview_photo img {
    box-shadow: 30px 30px var(--sub_green);
  }

  /* ここから インタビュー記事偶数目のみスタイル変更 */
  .recruit_interview_even .recruit_interview_info {
    flex-direction: column;
  }

  .recruit_interview_even .recruit_interview_photo_inner {
    text-align: left;
  }

  .recruit_interview_even .recruit_interview_photo img {
    box-shadow: 30px 30px var(--sub_green);
  }

  /* ここまで インタビュー記事偶数目のみスタイル変更 */

  .recruit_interview_title {
    flex-basis: auto;
    gap: 1.5em;
  }

  .recruit_interview_title h4 {
    font-size: 1.25em;
  }

  .recruit_interview_name {
    font-size: 2em;
  }

  .recruit_interview_department {
    font-size: 1.25em;
  }

  .recruit_interview_qualification {
    font-size: 1em;
  }

  .recruit_interview {
    flex-direction: column;
    gap: 0;
    padding: 1em;
  }

  .recruit_interview_body {
    flex-basis: auto;
  }


  /* リクルート　資格取得 */
  #recruit_career .content_wrapper {
    max-width: 600px;
  }

  .recruit_career_cont {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .recruit_career_cont_left {
    width: 100%;
  }

  .recruit_career_cont_left h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75em;
  }

  .recruit_career_cont_left p {
    font-size: 1rem;
    line-height: 1.75;
  }

  .recruit_career_cont_right {
    width: 100%;
  }


  /* リクルート　代表からのことば */
  #recruit_message .content_wrapper {
    max-width: 600px;
  }

  .recruit_message_cont {
    flex-direction: column;
    gap: 30px;
  }

  .recruit_message_cont_left {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .recruit_message_photo {
    max-width: 300px;
    align-self: center;
  }

  .recruit_message_photo img {
    box-shadow: 60px 60px #C2EDE8;
  }

  .recruit_message_cont_right {
    width: 100%;
  }

  .recruit_message_cont_right h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75em;
  }

  .recruit_message_cont_right p {
    font-size: 1rem;
  }

  .recruit_message_cont_right div {
    font-size: 1.25em;
  }

  /* リクルート　採用情報 */
  #recruit_join .content_wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  .recruit_join_btn_wrapper {
    margin-top: 60px;
  }

  .recruit_join_btn {
    width: 300px;
    height: 60px;
    font-size: 1.25rem;
  }


  /* リクルート　コンタクト */
  #recruit_contact .content_wrapper {
    max-width: 600px;
  }

  .recruit_contact_cont {
    flex-direction: column;
    gap: 30px;
  }

  .recruit_contact_box {
    padding: 30px 20px;
  }

  .recruit_contact_cont h4 {
    font-size: 1.125em;
  }

  .recruit_contact_tel {
    max-width: 280px;
  }

  .recruit_contact_btn {
    font-size: 1.5rem;
  }

  /*--------------------------------------------------
  募集要項 一覧
  --------------------------------------------------*/

  #archive_requirements .content_wrapper {
    max-width: 600px;
  }

  .requirements_title {
    font-size: 1.75rem;
    margin: 0.75em 0 1.25em;
  }

  .requ_list li {
    font-size: 0.875rem;
    padding: 20px;
    margin-bottom: 30px;
  }

  .requ_list_body {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 0;
  }

  .requ_list_body_left {
    flex-basis: auto;
  }

  .requ_list_body_right {
    flex-basis: auto;
  }

  .requ_list_body_right h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #555;
    border-bottom: 1px solid var(--sub_green);
    padding-bottom: 0.5em;
    margin-bottom: 1em;
  }

  .requ_list_body_right table th,
  .requ_list_body_right table td {
    display: block;
    font-size: 0.875rem;
  }

  .requ_list_body_right table th {
    padding: 0 0 0.5em 0;
  }

  .requ_list_body_right table td {
    padding: 0 0 1.5em 0;
  }

  .requ_list_btn {
    gap: 20px;
  }

  .requ_list_btn a {
    font-size: 1.125em;
  }



  /*--------------------------------------------------
  募集要項 詳細
  --------------------------------------------------*/
  .single-requirements .content_wrapper {
    max-width: 600px;
  }

  /* 募集要項 詳細 上段 */
  .requirements_intro {
    margin-bottom: 80px;
  }

  .requirements_intro_flex {
    flex-direction: column;
    gap: 30px;
  }

  .requirements_intro_right>div {
    margin-bottom: 1.5rem;
  }

  .requirements_intro_right h3 {
    font-size: 1.25rem;
  }

  .requirements_intro_right p {
    font-size: 1rem;
  }

  .requirements_detail {
    margin-bottom: 80px;
  }

  .requirements_detail th,
  .requirements_detail td {
    display: block;
    font-size: 0.875rem;
    padding: 0.5em 0.75em;
  }

  .requirements_detail th {
    width: 100%;
  }

  .requirements_detail td {
    width: 100%;
  }



  /*--------------------------------------------------
  RECRUIT 上部fix画像
  --------------------------------------------------*/
  .recruit_fix_img {
    background-attachment: scroll;
    height: 300px;
  }

  .recruit_fix_txt {
    font-size: 1.125rem;
  }

  /*--------------------------------------------------
  RECRUIT
  --------------------------------------------------*/
  .recruit_flex_wrapper {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 80px;
  }

  .recruit_left {
    flex-basis: auto;
  }

  .recruit_right {
    flex-basis: auto;
    text-align: right;
    align-self: flex-end;
  }

  .recruit_right img {
    width: 90%;
  }

  .massage_cont {
    margin-top: 30px;
    padding-bottom: 30px;
  }

  .massage_cont ul {
    gap: 20px;
  }

  .massage_cont ul li {
    width: calc((100% - 20px) / 2);
    max-width: 230px;
  }

  .massage_cont ul li a {
    padding: 0 10% 20px;
  }

  .massage_cont_img {
    margin-bottom: 10%;
  }

  .massage_cont_name {
    font-size: 0.875rem;
  }

  .massage_cont_body {
    display: none;
  }

  .massage_cont_more {
    font-size: 0.75rem;
  }

  .massage_cont_more img {
    font-size: 0.75rem;
  }

  .massage_cont_more::before {
    width: 30px;
    height: 30px;
    top: -4px;
  }

  .massage_cont::before {
    content: '';
    width: 200px;
    height: 200px;
    bottom: 0;
    right: -10px;
  }

  .massage_cont::after {
    width: 95%;
    height: 80%;
  }

  .recruit_message .more_btn {
    font-size: 1rem;
  }


  /*--------------------------------------------------
  フッター
  --------------------------------------------------*/
  .contact_copy {
    font-size: 0.875rem;
  }

  footer .map_flex_wrapper {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 100px;
  }

  footer .company_info_logo {
    max-width: 260px;
    margin-bottom: 30px;
  }


  /*--------------------------------------------------
  Go Top ボタン
  --------------------------------------------------*/
  #go_top {
    bottom: 10px;
    right: 10px;
  }


  /*--------------------------------------------------
  固定ページ
  --------------------------------------------------*/
  .subpage h2 {
    font-size: 1.75em;
  }

  .subpage h2::before {
    width: 50px;
    height: 50px;
    margin: 0 auto 4px;
  }

  .subpage h3 {
    font-size: 1.375rem;
    margin: 0 0 1.25em;
  }

  .subpage_title {
    font-size: 3em;
    top: 60%;
  }

  .adout_cont_box {
    max-width: 600px;
    margin: 0 auto;
    padding: 5%;
  }

  /* 私たちについて ご挨拶 */
  .about_aisatu_title {
    font-size: 1rem;
  }

  .about_aisatu_flex {
    flex-direction: column;
    gap: 30px;
  }

  .about_aisatu_img {
    flex: auto;
    max-width: 280px;
  }

  .about_aisatu_text {
    flex: auto;
  }


  /* 私たちについて 会社概要 */
  .about_gaiyou_flex {
    flex-direction: column;
    gap: 30px;
  }

  .about_gaiyou_flex_left {
    flex: auto;
  }

  .about_gaiyou_flex_right {
    flex: auto;
    width: 100%;
  }

  .about_gaiyou_sdgs {
    flex-direction: column;
    gap: 30px;
  }

  .about_gaiyou_sdgs_logo {
    flex-basis: auto;
  }

  .about_gaiyou_sdgs_body {
    flex-basis: auto;
  }


  /* 私たちについて 企業情報 沿革テーブル */
  figure.about_enkaku table.has-fixed-layout td {
    display: block;
  }

  figure.about_enkaku table.has-fixed-layout tr>td:first-child {
    font-weight: 600;
    padding: 1em 0 0.5em 0;
  }

  figure.about_enkaku table.has-fixed-layout tr>td:last-child {
    padding: 0 0 1em 1em;
  }

  figure.about_enkaku table.has-fixed-layout tr {
    border-bottom: 1px dotted var(--dark_gray);
  }

  figure.about_enkaku table.has-fixed-layout td:not(:last-child) {
    border-right: none;
  }


  /* 私たちについて リスト（2段組用追加スタイル） */
  .about_jyouhou_ul_flex {
    display: block;
  }

  .about_jyouhou_ul_flex li {
    width: 100%;
  }


  /* 私たちについて 営業拠点 */
  .about_kyoten_flex {
    flex-direction: column;
  }

  .about_kyoten_flex div:first-child {
    flex-basis: auto;
  }

  /* 私たちについてfix画像 */
  .about_fix_img {
    background-attachment: scroll;
    height: 300px;
  }


  /* 事業内容 お困りではありませんか */
  .business_problems_cont {
    max-width: 600px;
    margin: 0 auto;
    padding: 5%;
  }

  .business_problems_1st {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 20px;
  }

  .business_problems_2nd {
    margin-bottom: 20px;
  }

  .business_problems_3nd {
    flex-direction: column;
    gap: 20px;
  }

  .business_problems_contact {
    padding: 20px 20px;
  }

  .business_problems_contact h4 {
    font-size: 1.125em;
  }

  .business_problems_contact_btn {
    font-size: 1.5rem;
  }

  /* 事業内容 製品紹介 */
  #product {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
  }

  #product ul {
    flex-direction: column;
  }

  #product ul li {
    width: 100%;
    display: flex;
  }

  .business_product_text {
    font-size: 0.875rem;
  }

  #product ul li img {
    width: 40%;
  }

  /* 事業内容 建機整備 */
  #maintenance {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
  }

  .maintenance_text {
    margin-bottom: 30px;
  }

  /* 事業内容 金具再生 */
  #reproduction {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .reproduction_text {
    margin-bottom: 30px;
  }

  /* 事業内容 主要設備一覧 */
  .setubi_cont {
    max-width: 600px;
    margin: 0 auto;
    padding: 5%;
  }

  .setubi_pickup_items {
    font-size: 0.875rem;
    gap: 20px;
  }

  .setubi_pickup_item {
    width: 100%;
    padding: 15px;
  }

  .setubi_pickup_item .text {
    margin-bottom: 1em;
  }

  /* 事業内容 fix画像 */
  .business_fix_img {
    background-attachment: scroll;
    height: 300px;
  }

  /*--------------------------------------------------
  トピックス 一覧
  --------------------------------------------------*/

  .topics_archive {
    max-width: 600px;
  }

  .topics_archive_li a {
    gap: 20px;
  }

  .topics_archive_li {
    padding: 20px 0;
  }

  .topics_archive_img {
    flex: 1 1 200px;
  }

  .topics_archive_text {
    flex: 1 1 380px;
  }

  .topics_archive_date_wapper {
    font-size: 0.75rem;
    margin-bottom: 0.5em;
  }

  .topics_archive_title {
    font-size: 1.125rem;
  }

  .topics_pagination {
    font-size: 0.875rem;
    margin-top: 50px;
    line-height: 40px;
  }

  .topics_pagination .page-numbers {
    min-width: 40px;
  }


  /*--------------------------------------------------
  トピックス 詳細
  --------------------------------------------------*/

  .topics_single {
    max-width: 600px;
  }

  .topics_single_img {
    margin-bottom: 30px;
  }

  .topics_single_title {
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }

  .topics_single_date_wapper {
    font-size: 0.875rem;
  }

  .topics_single_btn {
    margin-top: 60px;
  }


  /*--------------------------------------------------
  404ページ
  --------------------------------------------------*/
  .not_found_title {
    font-size: 1.5rem;
    text-align: left;
  }

  .not_found_body p {
    font-size: 1rem;
    text-align: left;
  }


  /*--------------------------------------------------
  パンくずリスト
  --------------------------------------------------*/
  .breadcrumbs {
    font-size: 0.8125rem;
  }


  /*--------------------------------------------------
  フォーム（コンタクトフォーム、エントリーフォーム）
  --------------------------------------------------*/
  table.CF7_table tr {
    border-top: none;
  }

  .CF7_table tr,
  .CF7_table td,
  .CF7_table th {
    display: block;
    width: 100%;
    line-height: 2em;
  }










  /*--------------------------------------------------
  以下調整中
  --------------------------------------------------*/

  #recruit .frame_top::before {
    content: none;
  }

  #recruit .frame_top::after {
    content: none;
  }

  .footer_nav {
    display: none;
  }

  .resolutionflow_pc {
    display: none;
  }

  .resolutionflow_sp {
    display: block;
  }

  .subpage_content_inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 5%;
  }

}