/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/****************************************
/ 私たちについて
/****************************************/
.page_title {
  position: relative;
  z-index: 1;
}

.page_aboutus_parent {
  min-width: 1200px;
  position: relative;
  z-index: 0;
}

.page_aboutus_diamond_1,
.page_aboutus_diamond_2 {
  position: absolute;
  left: 50%;
  z-index: -1;
  img {
    width: 1200px;
    height: auto;
  }
}

.page_aboutus_diamond_1 {
  transform: translateX(-25vw);
  top: -200px !important;
}

.page_aboutus_diamond_2 {
  transform: translateX(-75vw) scaleX(-1);
  top: 900px !important;
}

.page_aboutus_illust_1,
.page_aboutus_illust_2,
.page_aboutus_illust_3,
.page_aboutus_illust_4 {
  position: absolute;
}

.page_aboutus_illust_1 {
  top: 150px;
  left: 22vw;
}

.page_aboutus_illust_2 {
  top: 230px;
  left: 65vw;
}

.page_aboutus_illust_3 {
  top: 1000px;
  left: 40vw;
  width: 15vw !important;
}

.page_aboutus_illust_4 {
  top: 1450px;
  left: 45vw;
  width: 13vw !important;
}

.wp-block-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.page_aboutus_diamond {
  position: absolute;  
  top: 130px;
  left:-100px;

  img {
    width: 500px !important;
  }
}

.page_aboutus_contents_col01,
.page_aboutus_contents_col02 {
   .wp-block-button__link:hover {
    background: #1d2087 !important;
    color: #FFF !important;
    border-color: none !important;
   }
}

.page_aboutus_contents_col03 {
   .wp-block-button__link:hover {
    background: #ccddee !important;
    color: #000000 !important;
    border-color: none !important;
   }
}

/****************************************
/ 事業紹介・実績
/****************************************/
.page_ourbusiness_group .wp-block-button__link {
  cursor: default !important;
}

/* 情報通信設備 */

/* タブが2段になるのを防止 */
.wp-block-kadence-tabs .kt-tabs-title-list {
  flex-wrap: nowrap !important;
  /* overflow-x: auto; */
}

/****************************************
/ 企業情報
/****************************************/
/* KADENCE BLOCKSプラグイン：Tableブロックの上揃え */
.kb-table-data {
  vertical-align: top !important;
}

/* ページ内アンカージャンプ時にヘッダーがかぶる対応 */
.anchor-offset::before {
  content: "";
  display: block;
  height: 160px; /* ← ヘッダーの高さ */
  margin-top: -80px;
  visibility: hidden;
}

/****************************************
/ トピックス
/****************************************/
/* トピックスサイドバー */
ul.custom-year-archives {
  list-style: none; /* ・を消す */
  margin: 0;
  padding-left: 0;
}

ul.custom-year-archives li {
  border-bottom: 2px solid #ABB8C3;
  padding: 0.5em 1em;
  margin: 0;
}

/* トピックス一覧 */
.news-item-with-thumb {
  display: flex;
  gap: 1em;
  margin-bottom: 1.5em;
  border-bottom: 2px solid #ABB8C3;
  padding-bottom: 5px;

  .thumb {
    flex-shrink: 0; width: 200px;
  }
}

.year-filter {
  position: relative;
  padding-left: 1.2em;
}

.year-filter::before {
  content: '';
  position: absolute;
  left: 0;
}

.year-filter.active::before {
  content: '＞';
  color: #005bac;
  font-weight: bold;
}

/* お知らせクリック時のローディング */
.topix_loader {
  margin: 40px auto;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: topix-spin 0.8s linear infinite;
}

@keyframes topix-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* お知らせシングルページ表示時の見出し設定 */
.ajax-news-single h2:first-of-type {
  border-left: #004097 solid 15px;
  padding-left: 20px;
}

/****************************************
/ 会社情報
/****************************************/
.page_company_moview {

}

/****************************************
/ 採用情報
/****************************************/
/* 募集要項ボタン */
.recruit-button {
  position: absolute;
  right: 20vw;
  bottom: 20px;

  width: 120px !important;
  height: 120px !important;
  background-color: #00449e;
  color: white;
  border-radius: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.arrow-circle {
  width: 24px;
  height: 24px;
  background-color: lightgray;
  border-radius: 50%;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #00449e;
}

.page_title {
  position: relative;
}

/* 背景の半円 */
.bg-half-circle {
  overflow: hidden;
}

.arc{
  min-height: 10vw;
  border-bottom-right-radius:1000px 200px;
  border-bottom-left-radius: 1000px 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  background: #1D73BF;
}

.recruit_group3 {
  position: relative !important;
  z-index: 10 !important;
}

.page_recruit_title {
  margin-left: -270px !important;
}

.text-shadow h2 {
    text-shadow:
    2px 2px 3px rgba(0, 0, 0, 0.7),
    4px 4px 6px rgba(0, 0, 0, 0.3);
}

.page_facts_title {
  margin-left: -95px !important;
}

.page_facts_diamond {
  position: absolute;  
  top: 290px;
  left:20px;

  img {
    width: 500px !important;
  }
}

.page_facts_card_row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px;
}

/* DataViewタイトルのリボン */
.ribbon {
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  background: #1565c0;/*リボンの色*/
  margin-left: -40px !important;
  width: 50% !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* ←下に影を追加 */
}

.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #022b5a;/*折り返し部分*/
}

.ribbon_workstyle {
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  background: #f9a510;/*リボンの色*/
  margin-left: -40px !important;
  width: 100% !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* ←下に影を追加 */
}

.ribbon_workstyle::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #f48b18; /* 折り返し部分 */
}

.ribbon_family_support {
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  background: #FF6100;/*リボンの色*/
  margin-left: -40px !important;
  width: 100% !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* ←下に影を追加 */
}

.ribbon_family_support::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #6A2E00; /* 折り返し部分 */
}

.ribbon_recognition {
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  background: #EF3E3A;/*リボンの色*/
  margin-left: -40px !important;
  width: 100% !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* ←下に影を追加 */
}

.ribbon_recognition::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #763400; /* 折り返し部分 */
}

.wp-block-button.toggle-button a {
  width: 40px;
}









/****************************************
/ レスポンシブ
/****************************************/
@media screen and (max-width: 768px) {
  .page_aboutus_parent {
    min-width: 0 !important;
  }

  .page_aboutus_contents_title {
    z-index: 0;
    h2 {
      font-size: 100%;
    }

    p {
      font-size: 90% !important;
    }
  }

  /* 文字列：”About us” */
  .page_title_aboutus {
    position: relative;
    left: -30px; /* ← 負の値で左にずらす（数値調整可能） */
    font-size: 33px !important;
  }

  /* 文字列：”私たちについて” */
  .page_title_paragraph {
    position: relative;
    left: -30px; /* ← 負の値で左にずらす（数値調整可能） */
    font-size: 16px !important;
  }

  /* 画像（ダイヤ） */
  .page_aboutus_diamond_1 {
    margin-top: 80px !important; /* 必要に応じて数値を調整 */
  }

  .page_aboutus_illust_1,
  .page_aboutus_illust_2,
  .page_aboutus_illust_3,
  .page_aboutus_illust_4 {
    z-index: -1;
  }

  /* 画像（電源オン） */
  .page_aboutus_illust_1 {
    top: 70px;
    left: 15px;
    img {
        width: 70px !important;
    }
  }

  /* 画像（点検中） */
  .page_aboutus_illust_2 {
    top: 140px;
    left: 280px;
    img {
        width: 100px !important;
    }
  }

  /* 画像（風力発電） */
  .page_aboutus_illust_3 {
    top: 1095px;
    left: 80vw;
    width: 15vw !important;
    img{
      width: 100px !important;
    }
  }

  /* 画像（ソーラーパネル） */
  .page_aboutus_illust_4 {
    top: 1350px;
    left: 85vw;
    width: 13vw !important;
  }

  /* カラム（０１私たちの強み） */
  .page_aboutus_contents_col01 {
    margin-top: 100px !important;
  }

  /* カラム（０２私たちの取り組み） */
  .page_aboutus_contents_col02{
    margin-top: 50px !important;
    flex-direction: column-reverse; /* 画像と文書を反転させる */
  }

  /* カラム（数字でわかる日建電設） */
  .page_aboutus_contents_col03{
    max-width: 100% !important;
     .wp-block-columns.is-layout-flex {
      flex-direction: column !important;
      align-items: center !important;
      gap: 16px;
      flex-wrap: wrap;
    }
    .wp-block-column-is-layout-flow {
      width: 100% !important;
      max-width: 100% !important;
      text-align: center;
    }
    /* ボタン：さらに詳しく（数字でわかる日建電設） */
     .page_aboutus_button {
      width: 100% !important;
    }
    /* 画像（虫眼鏡マーク） */
    .page_aboutus_illust_search{
      width: 50px;           /* サイズを小さくする */
      float: right;          /* 右に移動させる */
    }
    /* 画像（棒グラフ） */
    .page_aboutus_illust_growth{
      width: 50px;           /* サイズを小さくする */
      float: left;          /* 左に移動させる */
    }
    /* 文字列：”数字でわかる日建電設” */
    .page_aboutus_contents_col_group03_title{
      font-size: 160%;
    }
    /* 文字列：”仕事のこと、会社の歴史、働く環境など、日建電設の特徴を数字でご紹介します。” */
    .page_aboutus_contents_col_group03_paragraph{
      font-size: 80%;
    }
    /* グループ（数字でわかる日建電設） */
    .page_aboutus_contents_col_group03{
      width: 90% !important;
      max-width: 90% !important;
    }
  }

  /* グループ（０１私たちの強み） */
  .page_aboutus_contents_col_group01,
  .page_aboutus_contents_col_group02,
  .page_aboutus_contents_col_group03 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* グループ（０１私たちの強み） */
  .page_aboutus_contents_col_group01{

  }

  /* グループ（０２私たちの取り組み） */
  .page_aboutus_contents_col_group02{

  }

  /* 画像（０１私たちの強み） */
  /* 画像（０２私たちの取り組み） */
  .page_aboutus_contents_col_1,
  .page_aboutus_contents_col_2 {
    img {
      height: 150px;
      object-fit: cover;
    }
  }

  /* 画像（０１私たちの強み） */
  .page_aboutus_contents_col_1 {
    img {
      object-position: 15% 15%; /* 横 15%、縦 15% の位置を基準に表示 */
    }
  }

  /* 画像（０２私たちの取り組み） */
  .page_aboutus_contents_col_2{
    img {
      object-position: center;
    }
  }

  /* さらに詳しく（０１私たちの強み） */
  /* さらに詳しく（０２私たちの取り組み） */
  /* さらに詳しく（数字でわかる日建電設） */
  .page_aboutus_button{
    width: 200% !important;
  }

  .topix_title {
    h4 {
      font-size: 16px;
    }

    p {
      font-size: 12px;
    } 
  }

  .news-item-with-thumb {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .news_side,
  .about_sidebar_nav,
  .company_sidebar_nav,
  .recruit_sidebar_nav {
    h2 {
      font-size: 30px !important;
    }

    p {
      font-size: 12px !important;
    } 
  }

  .news-nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .next-post {
      width: 100%;
      text-align: right;
      margin-top: 10px;
    }
  }

  .ribbon {
    width: 115% !important;
    font-size: 100% !important;
  }

  .page_facts_card_row {
    grid-template-columns: repeat(1, 1fr) !important;
    max-width: 110% !important;
  }


  /* 私たちの強み */
  .our_strengths {
    margin-top: 20px !important;
  }

  /* 事業紹介・実績 */
  .company_other_button .wp-block-button {
    width: 100% !important;

    a {
      font-size: 80% !important;
    }
  }

  /* メニュー */
  .business_section h2 {
    font-size: 35px !important;
  }

    .business_section p {
    font-size: 15px !important;
  }

  /* 事業許認可 */
  .page_licence_group div {
    max-width: 95%;    
  }

  /* 労働安全衛生 */
  .page_safety_content_group div,
  .page_safety_content_group p {
    max-width: 100%;
  }

  /* 採用情報 */
  .section_intro_block {
    background-position: 100% 80% !important;
    background-size: 30% !important;
  }

  /* 募集要項ボタン */
  .recruit-button {
    right: 10vw;
    bottom: 20px;

    width: 80px !important;
    height: 80px !important;
    font-size: 14px;
  }

  /* 見出し */
  .page_recruit_top {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page_recruit_top > h2 {
    max-width: 100% !important;
    font-size: 1.3em;
  }

  .page_recruit_top > p {
    max-width: 100% !important;
    font-size: 0.8em;
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }

  .page_recruit_content1_block > div {
    max-width: 90% !important;
  }

  /* 01 日建電設を知る */
  .page_recruit_content1_block p {
    font-size: 0.8em !important;
  }

  .page_recruit_content1_title,
  .recruit_group3  {
    margin-top: -50px !important;
  }

  .recruit_group3 {
    max-width: 100% !important;
  }

  .page_recruit_diamond {
    width: 50% !important;
  }

  .page_recruit_title {
    margin-left: -170px !important;
  }

  /* 02 職場環境を知る */
  .page_recruit_content2_title > div {
    max-width: 100% !important;
  }

  .page_aboutus_button,
  .page_aboutus_button > div {
    width: 100% !important;
  }

  .page_recruit_content2_block > div {
    max-width: 100% !important;
  }

  .page_recruit_content2_block {
    .p_title {
      padding: 0 20px !important;
    }

    .wp-block-button {
      width: 80% !important;
    }

    .group2 {
      p {
        font-size: 0.8em;
      }

      .wp-block-button {
        width: 100% !important;
      }
    }
  }
  
  /* スタッフ紹介 */
  .interview-header {
    padding: 0 !important;
    display: flex;
    align-items: center;

    > div:nth-child(1) {
      width: 70%;
      flex: 1;
    }

    > div:nth-child(2) {
      width: 30%;
      flex: 2;

      .wp-block-buttons {
        display: block !important;
        text-align: right;
        padding: 5px;
      }
    }
  }

  .toggle-button {
    width: 50% !important;
  }

  .page_staff_group div {
    max-width: 100%;
  }

  /* 福利厚生 */
  .page_facts_title {
    margin-left: -20px !important;

    .recruit_group3  {
      margin-top: 10px !important;
    }

    .page_recruit_title {
      padding-left: 20px !important;
    }
  }

  .page_facts_diamond {
    width: 70%;
  }

  .benefits_intro_group {
    padding: 0 !important;
  }

  .section_intro_block {
    background-position: right bottom !important;
  }

  .benefits_img {
    	text-align: center;
  }

  .ribbon_workstyle,
  .ribbon_family_support,
  .ribbon_recognition {
    margin-left: -20px !important;
    font-size: 18px !important;
  }

  .vk_list_1,
  .vk_list_3 {
    padding-left: 30px !important;
    padding-right: 10px !important;
  }

  /* スマホの場合、画像下部表示バージョン */
  .responsive-stack {
    display: flex;
    flex-direction: column !important; /* 縦並びにする */
  }

  .page-id-2590 .wp-block-group.has-background {
    padding: 0 !important;
  }

  /* キャリアロードマップ */

  .roadmap_margin div {
    max-width: 100%;
  }

  /* 点検している人の画像を右寄せ */
  .page-id-2649 .wp-block-image.aligncenter img {
    display: none !important;
  }

  .roadmap_intro_col img {
    width: auto !important;
    height: 100px !important;
  }

  /* 募集要項 */
  .page_recruitment {
    > div {
      max-width: 100% !important;
    }

    .entry_form {
      max-width: 100%;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }
}