/*=====================================================*
 * 固定ページ「会社について（company）ページ」のスタイルです。
 *=====================================================*/

/* キャッチコピーのブロックと画像を可変調整 */
.cover-companyimg.wp-block-cover {
  min-height: 25vw !important;
}

/* PC版では画像の上のキャッチコピーは隠す（SP版で固定位置に表示する） */
.sp_company_catch {
  display: none;
}

/* PC版ではメンバーの自己紹介メッセージの上を詰める*/
.mamonotukai_text_column .wp-block-cover__inner-container,
.asobinin_text_column .wp-block-cover__inner-container,
.mahotukai_text_column .wp-block-cover__inner-container,
.odoriko_text_column .wp-block-cover__inner-container {
  margin-top: -4rem !important;
}

/* メンバーイラストの自己紹介カラムを上に詰める */
.member_text_column {
  margin-top: -5rem !important;
}

/* メンバーイラストの幅を調整 */
.member_odoriko,
.member_mamonotukai,
.member_asobinin,
.member_mahotukai {
  width: 650px;
}

/* メンバーの影イラストの位置調整 */
/* 踊り子 */
.member_gray_odoriko {
  position: absolute;
  margin-right: -2.5rem !important;
  margin-top: 2.5rem !important;
  z-index: -1;
}

/* 魔物使い */
.member_gray_mamonotukai {
  position: absolute;
  margin-right: -0.5rem !important;
  margin-top: -2rem !important;
  z-index: -1;
}

/* 遊び人 */
.member_gray_asobinin {
  position: absolute;
  margin-left: 1.5rem !important;
  margin-top: -8.5rem !important;
  z-index: -1;
}

/* 魔法使い */
.member_gray_mahotukai {
  position: absolute;
  margin-right: -1.5rem !important;
  margin-top: 2rem !important;
  z-index: -1;
}

/* 会社概要テーブルの左右の余白調整 */
.company_table {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

/**
 * レスポンシブ対応（SP版）用CSS
 */
@media screen and (max-width: 1199.82px) {
  /* 踊り子の影イラストの幅と位置を調整 */
  .member_gray_odoriko {
    width: 310px !important;
    margin-top: 1rem !important;
  }

  /* 魔物使いの影イラストの幅と位置を調整 */
  .member_gray_mamonotukai {
    width: 250px !important;
    margin-right: 2.5rem !important;
    margin-top: -1rem !important;
  }

  /* 遊び人の影イラストの幅を調整 */
  .member_gray_asobinin {
    width: 350px !important;
  }

  /* 魔法使いのイラストの幅と位置を調整 */
  .member_mahotukai {
    width: 500px !important;
    height: auto !important;
    margin-top: -1rem !important;
  }

  /* 魔法使いの影イラストの幅と位置を調整 */
  .member_gray_mahotukai {
    width: 400px !important;
    margin-left: 2rem !important;
    margin-top: -1rem !important;
  }

  /* 魔法使いの自己紹介カラムの高さ位置を他と合わせる */
  .mahotukai_text_column {
    margin-top: -4rem !important;
  }
}

@media screen and (max-width: 991.82px) {
  /* アイキャッチ画像に載せるキャッチコピーを可変調整 */
  .company_catch {
    font-size: 32px !important;
  }

  /* SP版では空白のカラムを非表示にする */
  .spacer_column {
    display: none !important;
  }

  /* 踊り子の影イラストの幅を調整 */
  .member_gray_odoriko {
    width: 260px !important;
  }

  /* 魔物使いの影イラストの幅を調整 */
  .member_gray_mamonotukai {
    width: 210px !important;
  }

  /* 遊び人の影イラストの幅を調整 */
  .member_gray_asobinin {
    width: 280px !important;
  }

  /* 魔法使いの影イラストの幅を調整 */
  .member_gray_mahotukai {
    width: 340px !important;
    margin-left: 3rem !important;
  }

  /* 魔法使いの自己紹介カラムの高さ位置を他と合わせる */
  .mahotukai_text_column {
    margin-top: -2rem !important;
  }

  /* 会社概要テーブルの左右の余白をなくす */
  .company_table {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
  }
}

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

  /* 踊り子の影イラストの幅と位置を調整 */
  .member_gray_odoriko {
    width: 100% !important;
    left: 4rem;
  }

  /* 魔物使いの自己紹介カラムを上に詰める */
  .member_mamonotukai {
    margin-top: 5rem !important;
  }

  /* 魔物使いの影イラストの幅と位置を調整 */
  .member_gray_mamonotukai {
    width: 100% !important;
    margin-right: -5rem !important;
  }

  /* 遊び人の影イラストの幅を調整 */
  .member_gray_asobinin {
    width: 100% !important;
  }

  /* 魔法使いの影イラストの幅と位置を調整 */
  .member_gray_mahotukai {
    width: 100% !important;
    margin-left: -1rem !important;
  }

  /* 魔物使いと遊び人カラムの間の余白を調整 */
  .spacer_0 {
    height: 50px !important;
  }
}

@media screen and (max-width: 767.33px) {
  /* アイキャッチ画像に載せるキャッチコピーを可変調整 */
  .company_catch {
    font-size: 22px !important;
    margin-top: 0rem !important;
  }
}

@media screen and (max-width: 480px) {
  /* アイキャッチ画像をSP版の画像に切り替える */
  .cover-companyimg.wp-block-cover .wp-image-1931 {
    content: url(../images/sp_company_img.png);
  }

  /* アイキャッチ画像の高さを調整 */
  .cover-companyimg.wp-block-cover {
    min-height: 50vw !important;
  }

  /* アイキャッチ画像に載せるキャッチコピーをカバー上から削除 */
  .company_catch {
    display: none !important;
  }

  /* アイキャッチ画像の上に余白を作る */
  .cover-companyimg {
    position: relative;
    margin-top: 4.5rem !important;
  }

  /* SP版で画像の上にキャッチコピーを表示 */
  .sp_company_catch {
    position: absolute;
    top: 13rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 2;
    display: block;
  }

  /* メンバーイラストの画像の幅を調整 */
  .member_odoriko,
  .member_mamonotukai,
  .member_asobinin,
  .member_mahotukai {
    width: 500px !important;
  }

  /* メンバー紹介の名前の文字サイズを小さくする */
  .member_name {
    font-size: 1.25rem !important;
  }

  /* 踊り子イラストの自己紹介カラムを上に詰める */
  .odoriko_column {
    margin-top: -1rem !important;
  }

  /* 踊り子の自己紹介カラムの高さを調整 */
  .odoriko_text_column {
    min-height: 350px !important;
  }

  /* 踊り子の自己紹介カラムの上に余白を作る */
  .odoriko_text_column .wp-block-cover__inner-container {
    margin-top: -3rem !important;
  }

  /* 踊り子の影イラストをSP版に切り替える */
  .member_gray_odoriko {
    content: url(../images/gy_odoriko_sp.png);
    width: 260px !important;
    margin-left: 3rem !important;
    margin-top: 8.5rem !important;
  }

  /* 魔物使いイラストの自己紹介カラムを上に詰める */
  .mamonotukai_column {
    margin-top: -4rem !important;
  }

  /* 魔物使いの自己紹介カラムの高さを調整 */
  .mamonotukai_text_column {
    min-height: 350px !important;
  }

  /* 魔物使いの自己紹介カラムの上に余白を作る */
  .mamonotukai_text_column .wp-block-cover__inner-container {
    margin-top: 2.5rem !important;
  }

  /* 魔物使いイラストの上の余白を縮める */
  .member_mamonotukai {
    margin-top: 3rem !important;
  }

  /* 魔物使いの影イラストをSP版に切り替える */
  .member_gray_mamonotukai {
    content: url(../images/gy_mamonotukai_sp.png);
    width: 220px !important;
    margin-right: 1rem !important;
    margin-top: 3rem !important;
  }

  /* 遊び人イラストの自己紹介カラムを上に詰める */
  .asobinin_column {
    margin-top: -3rem !important;
  }

  /* 遊び人の自己紹介カラムの高さを調整 */
  .asobinin_text_column {
    min-height: 350px !important;
  }

  /* 遊び人の自己紹介カラムの上に余白を作る */
  .asobinin_text_column .wp-block-cover__inner-container {
    margin-top: 1.5rem !important;
  }

  /* 遊び人の影イラストをSP版に切り替える */
  .member_gray_asobinin {
    content: url(../images/gy_asobinin_sp.png);
    width: 300px !important;
    margin-left: 4rem !important;
    margin-top: 3rem !important;
  }

  /* 魔法使いの自己紹介カラムの高さと幅を調整 */
  .mahotukai_text_column {
    min-height: 350px !important;
    width: 700px !important;
  }

  /* 魔法使いの自己紹介カラムの上に余白を作る */
  .mahotukai_text_column .wp-block-cover__inner-container {
    margin-top: -2rem !important;
  }

  /* 魔法使いの自己紹介カラムを上に詰める */
  .mahotukai_column {
    margin-top: -5.5rem !important;
  }

  /* 魔法使いイラストのサイズを調整 */
  .member_mahotukai {
    width: 650px !important;
  }

  /* 魔法使いの影イラストをSP版に切り替える */
  .member_gray_mahotukai {
    content: url(../images/gy_mahotukai_sp.png);
    width: 340px !important;
    margin-right: 0 !important;
    margin-left: 1rem !important;
    margin-top: 5rem !important;
  }

  /* 会社概要の「住所」「士業パートナー」のセルだけ文字を左上に配置 */
  .company_table table tr:nth-child(2) td:first-child,
  .company_table table tr:nth-child(6) td:first-child {
    vertical-align: top;
    text-align: left;
  }
}