/* =====================================*
 * トップ（フロント）ページのスタイルです。
 * ====================================*/

/* 背景画像をコンテナに合わせる */
.background_wave {
  background-image: url(../images/wave_large.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: -2rem;
}

/* あなたを支える3つの事業（ヒトゴトサポート）カラムの画像サイズ */
.three_column_image img {
  width: 600px !important;
  height: 400px !important;
}

/* あなたを支える3つの事業カラム（キャリアサポート、みらいのおと事業部）の画像サイズ */
.three_column_image .wp-block-image img:not([style*=object-fit]) {
  width: 600px !important;
  height: 400px !important;
}

/* MESSAGEカラムの上余白 */
.top_message_column {
  margin-top: -3rem;
}

/* 勇者の画像を上のMESSAGEコンテナと下のブログカバーに重ねる */
.yusya img {
  position: absolute;
  right: 1rem;
  z-index: 1;
  margin-top: -7rem;
}

/* SP版の勇者の画像を非表示 */
.sp_yusya img {
  display: none;
}

/* 船の画像を上のブログカバーに重ねる */
.ship img {
  position: absolute;
  left: -5.5rem;
  z-index: 1;
  margin-top: -12rem;
}

/* SP版の船の画像を非表示 */
.sp_ship img {
  display: none;
}

/* ブログ見出しと記事クエリの余白 */
.top_blog_query {
  margin-left: 2rem;
}

/* ブログ記事クエリの余白 */
.wp-block-post {
  padding: 1rem 0rem 1rem 0.75rem !important;
}

/* ヒダマルミチルの画像位置を調整 */
.wp-block-media-text__media img {
  padding-top: 2rem;
}

/* ヒダマルミチルのテキスト位置を調整 */
.wp-block-media-text>.wp-block-media-text__content {
  padding-bottom: 5rem;

}

/**
 * レスポンシブ対応（SP版）用CSS
 */
@media screen and (max-width: 1440px) {
  /* トップページのブログのカバー画像を調整 */
  .top_blog_cover .wp-block-cover__image-background {
    width: 1440px;
  }
}

@media screen and (max-width: 1200px) {
  /* あなたを支える3つの事業（ヒトゴトサポート）カラムの画像サイズを調整 */
  .three_column_image img {
    width: 100% !important;
    height: auto !important;
  }

  /* あなたを支える3つの事業カラム（キャリアサポート、みらいのおと事業部）の画像サイズを調整 */
  .three_column_image .wp-block-image img:not([style*=object-fit]) {
    width: 100% !important;
    height: auto !important;
  }

  /* MESSAGEカラムの上余白を調整 */
  .top_message_column {
    margin-top: 2rem !important;
  }

  /* ブログカラムの「もっと読む」ボタンの幅を縮める */
  .top_blog_button .wp-block-button .wp-block-button__link {
    width: 180px !important;
  }
}

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

  /* このウィンドウ幅における改行を有効にする */
  /* ※ 767.33px以下～481px以上まで再度非表示にしている */
  .sp_br {
    display: inline !important;
  }

  /* このウィンドウ幅からスペーサーの余白をなくす */
  /* ※ style.cssでページ共通で767.33px以下で余白をなくすように指定している */
  .spacer_0 {
    height: 0 !important;
  }

  /* MESSAGEカラムの見出しの上余白を調整 */
  .message_column {
    margin-top: 12rem !important;
  }

  /* MESSAGEコンテナ内の文章の上余白を調整 */
  .sp_message_text {
    margin-top: 5rem !important;
  }
}

@media screen and (max-width: 781.82px) {
  /* 縦に並べた際の「キャリアサポート事業」のカラムの順序を逆にする */
  .career_support_column.wp-container-core-columns-is-layout-9d6595d7 {
    flex-direction: column-reverse;
  }

  /* 勇者の画像サイズを調整 */
  .yusya img {
    width: 40% !important;
  }

  /* 船の画像サイズと位置を調整 */
  .ship img {
    width: 40% !important;
    left: -11rem !important;
    margin-top: -9rem !important;
  }

  /* MESSAGEカラムの見出しの上余白を調整 */
  .message_column {
    margin-top: 8rem !important;
  }

  /* MESSAGEコンテナ内の文章の上余白を調整 */
  .sp_message_text {
    margin-top: 0rem !important;
  }

  /* トップページのブログカバー画像の幅を調整 */
  .top_blog_cover .wp-block-cover__image-background {
    width: auto;
  }

  /* ブログカラムの「もっと読む」ボタンの幅を元に戻す */
  .top_blog_button .wp-block-button .wp-block-button__link {
    width: 280px !important;
  }

  /* 記事クエリの左端の余白をなくす */
  .top_blog_query {
    margin-left: 0rem !important;
  }

  /* ブログ記事クエリの余白を調整 */
  .wp-block-post {
    padding: 1.5rem 0.5rem 1.5rem 0.5rem !important;
  }
}

@media screen and (max-width: 767.33px) {
  /* このウィンドウ幅における改行を無効にする */
  .sp_br {
    display: none !important;
  }

  /* 見出しのキャッチフレーズを調整 */
  .top_midashi {
    font-size: 2.5rem !important;
  }

  /* 背景画像を削除 */
  .background_wave {
    background-image: none;
  }

  /* MESSAGEのキャッチフレーズの文字サイズを調整 */
  .sp_top_message {
    font-size: 1.6rem !important;
    margin: 0 -4rem 0 -4rem !important;
  }

  /* ブログ記事クエリの余白 */
  .wp-block-post {
    padding: 0 -1rem 0 -1rem !important;
  }
}

@media screen and (max-width: 600px) {
  /* ブログカラムのカバー画像の幅を調整 */
  .top_blog_cover .wp-block-cover__image-background.wp-image-155 {
    content: url(../images/blog_union.png);
    width: 100% !important;
  }

  /* 1段カラムに合わせてブログ記事クエリの余白を調整 */
  .wp-block-post {
    padding: 0.5rem 1.5rem 0.5rem 1.5rem !important;
  }

  /* 船の画像位置を調整 */
  .ship img {
    left: -5rem !important;
    margin-top: -7rem !important;
  }

  /* ブログカラムの上余白を作る */
  .top_blog_syomidashi {
    padding-top: 3rem;
  }

  /* トップのヒダマルミチルの画像を中央寄せ */
  .top_hidamaru .wp-block-media-text__media {
    text-align: center;
  }

  /* トップのヒダマルミチルの画像サイズを調整 */
  .top_hidamaru img {
    width: 70%;
  }
}

@media screen and (max-width: 575.33px) {
  /* 見出しのキャッチフレーズを調整 */
  .top_midashi {
    text-align: left;
    font-size: 1.7rem !important;
    margin-bottom: 2rem !important;
  }
}

@media screen and (max-width: 480px) {
  /* SP版では改行を有効にする */
  .sp_br {
    display: inline !important;
  }

  /* トップ画像を変更 */
  .top_image img {
    content: url(../images/sp_MV.png);
    padding: 0 1rem 0 1rem !important;
  }

  /* あなたを支える3つの事業カラムのテキストコンテンツの幅を縮める */
  .top_three_column {
    margin: -0.5rem -0.5rem 0 -0.5rem !important;
  }

  /* デフォルトの勇者の画像を非表示 */
  .yusya img {
    display: none;
  }

  /* SP版の勇者の画像を表示 */
  .sp_yusya img {
    display: flex !important;
    position: absolute;
    width: 45%;
    right: -0.5rem;
    margin-top: -2rem;
    z-index: 1;
  }

  /* デフォルトの船の画像を非表示 */
  .ship img {
    display: none;
  }

  /* SP版の船の画像を表示 */
  .sp_ship img {
    display: flex !important;
    position: absolute;
    width: 45%;
    left: 0.5rem;
    z-index: 1;
  }

  /* 画像を縦長のコンテナに変更してデザインに合わせる */
  .sp_message_container .wp-block-cover__image-background.wp-image-1059 {
    content: url(../images/message_container_sp.png);
  }

  /* MESSAGEカラム全体をページの上に詰める */
  .top_message_column_left {
    margin-top: -5rem !important;
  }

  /* MESSAGEコンテナの上余白を詰める */
  .sp_message_container {
    margin-top: -4rem !important;
  }

  /* MESSAGEコンテナ内の文章の余白を詰める */
  .sp_message_text {
    margin: 0 -1.5rem 0 -1.5rem !important;
  }

  /* メッセージコンテンツの余白をなくす */
  .top_message_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* メッセージカラムのボタンを下に配置 */
  .wp-block-columns.top_message_column {
    position: relative !important;
    padding-bottom: 6rem !important;
  }

  /* 下に移動したボタンを中央に配置 */
  .top_message_button {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1;
  }

  /* ブログ見出しと記事クエリの上余白を詰める */
  .top_blog_query {
    margin-top: -1rem !important;
  }

  /* ブログカラムのボタンを下に配置 */
  .wp-block-columns.top_blog_column {
    position: relative !important;
    padding-bottom: 7rem !important;
  }

  /* 下に移動したボタンを中央に配置 */
  .top_blog_button {
    width: 100% !important;
    position: absolute !important;
    bottom: 0 !important;
    z-index: 1;
    margin-bottom: 3rem;
  }

  /* ヒダマルミチルのテキストコンテンツの余白をなくす */
  .top_hidamaru .wp-block-media-text__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}