/* ==========================================================
   部門紹介TOP 専用CSS
   Template : bumon-intro_top.php
========================================================== */
/*部門紹介TOP　共通設定*/
/* 1. ページ上部*/
/* ページタイトル部分の上下余白 */
[is="mb-i1"]{padding:70px 0 !important;}

/* 2. 部門紹介TOP 型*/
/*
  元の共通CSSでは xg-w / mc-t に線が入るため、
  部門紹介TOPでは不要な上下線を削除
*/
/*[is="xg-w"]{border-top:none !important;border-bottom:none !important;}
[is="mc-t"]{border-top:none !important;border-bottom:none !important;}
*/
/*3. 事業部カード全体*/
.bumon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;width:min(1200px,90%);margin:60px auto;}

/*4. 各カード*/
.bumon-card{width:280px;height:280px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:20px;
  border:1px solid #d8d8d8;border-radius:50%;transition:0.25s;
  position:relative;overflow:hidden;}
.bumon-card > *:not(.bumon-mark){position:relative;z-index:1;}

/* マウスを乗せたとき */
.bumon-card:hover{transform:translateY(-4px);box-shadow:
    0 10px 25px rgba(0,0,0,0.08);}

/* 5. 各事業部名*/
.bumon-division{height:40px;display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:18px;font-size:22px;font-weight:400;line-height:1.5;text-align:center;}
.bumon-title{position:relative;z-index:1;}

/*6. 部門名*/
.bumon-title{font-size:20px;font-weight:400;
  line-height:1.7;color:#555858;text-align:center;}


/* 7. リンク*/
.bumon-link{color:inherit;text-decoration:none;}

/* ホバー時 */
.bumon-link:hover{opacity:0.65;}

/* 共通のマーク表示 */
.bumon-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:95%;height:95%;object-fit:contain;opacity:0.10;z-index:0;}

/*-------------------------------------------------------------*/
/*計画系事業部*/
.card-keikaku{background:#f7f5fb;border-color:#a99bd0;}
.card-keikaku .bumon-division{color:#a99bd0;}
/* 計画マーク調整 */
.card-keikaku .bumon-mark{width:160%;height:160%;left:50%;top:57%;opacity:0.20;}
/*環境系事業部*/
.card-kankyo{background:#f1faf8;border-color:#7fc8b8;}
.card-kankyo .bumon-division{color:#7fc8b8;}
/* 環境マーク調整 */
.card-kankyo .bumon-mark{width:115%;height:115%;left:50%;top:50%;opacity:0.40;}
/*防災系事業部*/
.card-bousai{background:#fff6f3;border-color:#e6a08f;}
.card-bousai .bumon-division{color:#e6a08f;}
/* 防災マーク調整 */
.card-bousai .bumon-mark{width:145%;height:145%;left:55%;top:85%;opacity:0.60;}
/*構造系事業部*/
.card-kouzo{background:#f2f7fb;border-color:#88acd1;}
.card-kouzo .bumon-division{color:#88acd1;}
/* 構造マーク調整 */
.card-kouzo .bumon-mark{width:100%;height:100%;left:50%;top:57%;opacity:0.60;}
/*国際事業部*/
.card-kokusai{background:#fffaf0;border-color:#d8b56d;}
.card-kokusai .bumon-division{color:#d8b56d;}
/* 国際マーク調整 */
.card-kokusai .bumon-mark{width:115%;height:115%;left:50%;top:51%;opacity:0.40;}

/*表示設定*/
/*PC表示*/
@media screen and (min-width:769px){.bumon-grid{
    align-items:start;}}
/*スマートフォン・タブレット*/
@media screen and (max-width:768px){
  /* ページタイトル部分 */
  [is="mb-i1"]{padding:40px 0 !important;}
  /* カード一覧 */
  .bumon-grid{grid-template-columns:1fr;gap:28px;width:100%;
    margin:40px auto;justify-items:center;}
  /* 円を少し小さく */
  .bumon-card{width:250px;height:250px;padding:18px;}
  /* 事業部名 */
  .bumon-division{margin-bottom:14px;font-size:16px;}
  /* 部門名 */
  .bumon-title{font-size:17px;line-height:1.7;}}

/* 円全体をクリック可能にする */
.bumon-card{position:relative;cursor:pointer;}
.bumon-card .bumon-card-overlay{position:absolute;inset:0;display:block;z-index:1;border-radius:50%;}
/* 事業部名・部門名のリンクを円全体のリンクより手前に表示 */
.bumon-card .bumon-division,.bumon-card .bumon-title{position:relative;z-index:2;}
.bumon-card .bumon-mark{pointer-events:none;}