/*ここからブロック*/
.block1-w{
width:100%;
padding: 90px 0 120px;
}
.block1{
width:880px;
max-width:90%;
padding:30px 0;
margin:0 auto;
}
.block1-i{

}
/*ここまでブロック*/

/*ここからブロック*/
.block2-w{
width:100%;
padding:30px 0 80px;
}
.block2{
width:1000px;
max-width:90%;
padding:30px 0;
margin:0 auto;
}
.block2-i{

}
/*ここまでブロック*/

/*ここからブロック*/
.block3-w{
width:100%;
background-color:#e6e5e3;
padding:30px 0;
}
.block3{
width:1000px;
max-width:90%;
padding:30px 0;
margin:0 auto;
}
.block3-i{
}
/*ここまでブロック*/

/*ここからブロック*/
.block4-w{
width:100%;
padding:80px 0;
}
.block4{
width:1000px;
max-width:90%;
padding:30px 0;
margin:0 auto;
}
.block4-i{

}
/*ここまでブロック*/

/*ここからブロック*/
.block5-w{
width:100%;
background-color:#e6e5e3;
padding:90px 0;
}
.block5{
width:1000px;
max-width:90%;
padding:30px 0;
margin:0 auto;
}
.block5-i{

}
/*ここまでブロック*/

/*ここからブロック*/
.block6-w{
width:100%;
padding:90px 0;
}
.block6{
width:1000px;
max-width:90%;
padding:30px 0;
margin:0 auto;
}
.block6-i{

}
/*ここまでブロック*/


.sub-title{
height:230px;
background-image:url(../image/sub3.jpg);
background-size:cover;
margin-top:116px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.ap1{
width:1000px;
margin:0 auto;
max-width:90%;
}

/* H1：ページタイトル（p → h1 に変更） */
.ap2{
margin: 0 0 30px; /* h1デフォルトmarginをリセット */
color:#fff;
font-size:2rem;
letter-spacing:5px;
font-weight:400;
padding-bottom:30px;
border-bottom:solid 5px #004ab7;
}

/* H2：セクション見出し（p → h2 に変更） */
.ap3{
margin: 0 0 60px; /* h2デフォルトmarginをリセット */
font-size:1.5rem;
letter-spacing:3px;
font-weight:600;
color:#0049a7;
text-align:center;
}

/* H2：セクション見出し（p → h2 に変更） */
.ap3a{
margin: 0 0 30px; /* h2デフォルトmarginをリセット */
font-size:1.5rem;
letter-spacing:3px;
font-weight:600;
color:#0049a7;
text-align:center;
}

/* H3：職種サブタイトル（p → h3 に変更） */
.ap4{
margin: 0 0 0; /* h3デフォルトmarginをリセット */
text-align:center;
line-height:1.7;
font-weight:500;
}

.rp1{
margin: 0 auto 40px; /* h3デフォルトmarginをリセット（margin-topは0のまま） */
font-size:1.5rem;
letter-spacing:3px;
font-weight:600;
padding-bottom:30px;
border-bottom:solid 2px #555;
width:fit-content;
}

.box1{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom:40px;
}

.box1>div{
width:30%;
background-color:#dae1ff;
padding:20px;
aspect-ratio:1 / 1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-radius: 50%;
}

.rp2{
font-size:1.2rem;
font-weight:400;
text-align:center;
}

.box2{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding:80px 0 0;
}

.box2>div{
width:48%;
background-color:#e6e5e3;
padding:30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-radius:30px;
margin-bottom:50px;
}

/* H4：職種カード見出し（p → h4 に変更） */
.rp4{
margin: 0 0 0; /* h4デフォルトmarginをリセット */
font-weight:bold;
}

.rp5{
padding:10px 0 15px;
}

.rp6{
font-size:0.9rem;
}


/* ========== セクション全体 ========== */
  .data {
    background: #e6e5e3;
    padding: 80px 20px 100px;
  }

  .data-title {
    margin: 0 0 100px;
    text-align: center;
    color: #0a4bb4;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.06em;
  }

  /* ========== 3列（flex） ========== */
  .data-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 950px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    column-gap: 120px;   /* 4つ目が同じ行に入らないよう列の間隔を確保 */
    row-gap: 100px;
  }

  .data-item {
    width: 236px;
  }

  /* アイコン */
  .data-icon {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 28px;
    object-fit: contain;
  }

  /* 項目名・数値・単位（下端でそろえる） */
  .data-value {
    display: flex;
    align-items: flex-end;
    padding-top: 26px;
    border-top: 1px solid #555;
  }

  .data-label {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.08em;
  }

  .data-num {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 56px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: -4px;   /* 数字の下の余白を詰めて項目名と下端をそろえる */
  }

  .data-unit {
    margin-left: 14px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
  }
  .data-unit--tight { margin-left: 2px; }   /* 「時間」など2文字の単位用 */


  :root {
    --navy: #1a4a9c;      /* タイトル・帯の青 */
    --line: #2b5aa8;      /* 見出し下の線 */
    --circle: #1f3f7a;    /* 円の枠線・縦線 */
    --text: #222;
    --circle-size: 120px;  /* 円の直径（本文はこの高さ内に収める） */
    --gap: 36px;          /* 円と円の間隔 */
    --col-gap: 20px;      /* PC時：本文と円の間隔 */
    --sp-col-gap: 28px;   /* モバイル時：円と本文の間隔 */
  }

  * { box-sizing: border-box; }

  body {
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    color: var(--text);
  }

  .page-title {
    margin: 0 0 48px;
    text-align: center;
    color: var(--navy);
    font-size: 24px;
    letter-spacing: 0.08em;
  }

  /* ========== 共通：1行（円＋本文） ========== */
  .timeline { margin: 0 auto; padding: 0; list-style: none; }

  .row {
    position: relative;
    display: grid;
    align-items: center;
    height: calc(var(--circle-size) + var(--gap));
    padding-bottom: var(--gap);
  }

  /* 縦線：行全体に引き、円の白背景で隠す */
  .row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--circle);
  }
  .row:first-child::before { top: calc(var(--circle-size) / 2); }
  .row:last-child::before  { bottom: calc(var(--gap) + var(--circle-size) / 2); }

  /* 時刻なしの行（例：工事部門の「出社」）は高さを持たせず、円と円の間の余白に表示する */
  .row.is-notime {
    height: 0;
    padding-bottom: 0;
    margin-top: calc(var(--gap) * -0.5);
    margin-bottom: calc(var(--gap) * 0.5);
  }
  .row.is-notime::before { display: none; }

  .time {
    width: var(--circle-size);
    height: var(--circle-size);
    border: 2px solid var(--circle);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: bold;
    position: relative;
    z-index: 1;
  }
  .time.is-empty { visibility: hidden; }

  /* 本文：円の高さを超えないよう max-height を指定し縦中央揃え */
  .content {
    max-height: var(--circle-size);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .content h3 {
    margin: 0 0 8px;
    padding: 0 0 4px 4px;
font-size:1rem;
font-weight:bold;
    line-height: 1.3;
    border-bottom: 2px solid var(--line);
  }
  .is-notime .content h3 { margin-bottom: 0; }
  .content ul {
    list-style: none;
    margin: 0;
    padding-left: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .content li::before { content: "・"; }
  .content .note {
    margin: 0;
    padding-left: 4px;
    font-size: 12px;
    line-height: 1.4;
  }

  .title-band {
    padding: 8px 12px;
    background: var(--navy);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
  }

  /* ========== PC：中央に円、左右に本文 ========== */

  .pc .row {
    grid-template-columns: 1fr var(--circle-size) 1fr;
    column-gap: var(--col-gap);
  }
  .pc .row::before { left: calc(50% - 1px); }
  .pc .col-left  { grid-column: 1; }
  .pc .time      { grid-column: 2; }
  .pc .col-right { grid-column: 3; }
  .pc .col-right ul { padding-left: 24px; }   /* 右列は箇条書きを少し字下げ */
  /* 時刻なしの行：円と円の間の余白の中央に配置 */
  .pc .is-notime .content {
    position: absolute;
    top: 0;
    width: calc(50% - var(--circle-size) / 2 - var(--col-gap));
    transform: translateY(-50%);
  }
  .pc .is-notime .col-left  { left: 0; }
  .pc .is-notime .col-right { right: 0; }

  /* ========== モバイル：部門ごとに分離（B.png の形） ========== */
  .sp { display: none; }
  .sp .timeline { max-width: 420px; }
  .sp .timeline + .timeline { margin-top: 56px; }
  .sp .row {
    grid-template-columns: var(--circle-size) 1fr;
    column-gap: var(--sp-col-gap);
  }
  /* 時刻なしの行：円と円の間の余白の中央に配置 */
  .sp .is-notime .content {
    position: absolute;
    top: 0;
    left: calc(var(--circle-size) + var(--sp-col-gap));
    right: 0;
    transform: translateY(-50%);
  }
  .sp .row::before { left: calc(var(--circle-size) / 2 - 1px); }
  .sp .content ul { padding-left: 24px; }




  .voice-title {
    margin: 0 0 100px;
    text-align: center;
    color: #0a4bb4;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0.06em;
  }

  /* ========== 水色のボックス ========== */
  .voice-box {
    position: relative;
    width: 800px;
    max-width: 90%;
    margin: 0 auto;
    padding: 143px 110px 90px 82px;   /* 上は部署・写真の分を確保 */
    background: #dae0ff;
    border-radius: 10px;
  }

  /* 右上の写真：正方形を border-radius で円形に */
  .voice-photo {
    position: absolute;
    top: -45px;
    right: -22px;
    width: 205px;
    height: 205px;
    border-radius: 50%;
    object-fit: cover;
    background: #ccc;   /* 画像がないうちの仮の色 */
  }

  /* 部署・役職：写真の左わきに固定 */
  .voice-profile {
    position: absolute;
    top: 30px;
    right: 203px;   /* 写真の左端（205px - 22px）＋ 間隔20px */
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* ========== 吹き出し共通 ========== */
  .voice-q,
  .voice-a {
    position: relative;
    margin: 0 0 35px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .voice-a:last-child { margin-bottom: 0; }

  /* しっぽ */
  .voice-q::before,
  .voice-a::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 34px;
    height: 24px;
  }

  /* ---- 質問（青・左） ---- */
  .voice-q {
    width: fit-content;
    min-width: 222px;
    white-space: nowrap;
    padding: 21px 30px;
    background: #0a4bb4;
    color: #fff;
    border-radius: 33px;
  }
  .voice-q::before {
    left: -11px;
    background: #0a4bb4;
    clip-path: polygon(0 100%, 55% 0, 100% 45%);
  }

  /* ---- 回答（白・右） ---- */
  .voice-a {
    margin-left: 163px;
    padding: 26px 30px;
    background: #fff;
    border-radius: 40px;
    line-height: 1.75;
  }
  .voice-a::before {
    right: -13px;
    background: #fff;
    clip-path: polygon(100% 100%, 45% 0, 0 45%);
  }


.ap5{
text-align:center;
font-weight:500;
margin-bottom:60px;
font-size:1.1rem;

}

.ap6{
border:solid 3px #888;
width:700px;
margin:0 auto;
max-width:100%;
}


.ap6:hover{
border:solid 3px #0049a7;
}




/* 画面幅1024以下 PC*/
@media screen and (max-width: 1024px) {

}


/* 画面幅768px以下 タブレット*/
@media screen and (max-width: 768px) {

    .data-title {
      margin-bottom: 60px;
      font-size: 26px;
    }

    .data-list {
      column-gap: 8%;
      row-gap: 60px;
    }

    .data-item { width: 43%; }

    .data-icon {
      width: 70px;
      height: 64px;
      margin-bottom: 20px;
    }

    .data-value { padding-top: 18px; }
    .data-label { font-size: 11px; letter-spacing: 0.04em; }
    .data-num   { font-size: 36px; margin-bottom: -2px; }
    .data-unit  { margin-left: 6px; font-size: 12px; }
    .data-unit--tight { margin-left: 1px; }

.data {
  background: #e6e5e3;
  padding: 80px 0 100px;
}

.box1 {
  justify-content:center;
  flex-direction:column;
}

.box1 > div {
  width: 60%;
margin-bottom:20px;
}

.box2 {
  justify-content:center;
  flex-direction:column;
  align-items: center;
}

.box2 > div {
width: 90%;
}

    .pc { display: none; }
    .sp { display: block; }



    .voice-title {
      margin-bottom: 60px;
      font-size: 28px;
    }

    .voice-box {
      padding: 110px 7% 50px 7%;
    }

    .voice-photo {
      top: -30px;
      right: -12px;
      width: 110px;
      height: 110px;
    }

    .voice-profile {
      top: 20px;
      right: 110px;   /* 写真の左端（110px - 12px）＋ 間隔12px */
      font-size: 12px;
    }

    .voice-q {
      min-width: 0;
      max-width: 85%;
      white-space: normal;
      padding: 14px 24px;
      font-size: 13px;
    }

    .voice-a {
      margin-left: 12%;
      padding: 20px 22px;
      border-radius: 28px;
      font-size: 13px;
    }
    .voice-a br { display: none; }   /* 狭い画面では改行を外して自然に折り返す */




}

/* 画面幅375px以下　モバイル*/
@media screen and (max-width: 375px) {

    :root { --circle-size: 84px; --gap: 28px; }
    :root { --sp-col-gap: 16px; }
    .time { font-size: 15px; }
    .content h3 { font-size: 12px; margin-bottom: 6px; }
    .sp .content ul { padding-left: 10px; font-size: 11px; }

}