



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

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

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

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

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

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


.sub-title{
height:230px;
background-image:url(../image/sub1.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;
color:#fff;
font-size:2rem;
letter-spacing:5px;
font-weight:500;
padding-bottom:30px;
border-bottom:solid 5px #004ab7;
}

.ap3{
font-size:1.5rem;
letter-spacing:3px;
font-weight:600;
color:#0049a7;
text-align:center;
margin-bottom:60px;
}

.ap4{
text-align:center;
line-height:1.7;
font-weight:500;
}

/* H2：セクション見出し（p → h2 に変更） */
.ap5{
text-align:center;
font-weight:bold;
font-size:1.5rem;
padding:0 50px 30px 50px;
border-bottom:solid 2px #888;
width: fit-content;
letter-spacing: 3px;
margin:0 auto 80px;
}

.box1{
position: absolute;
  width: 500px;
  left: 0;
  top: 0;
  max-width: 80%;
  background-color:#fff;
  padding:50px;
  z-index: 10;
}

.box2{
position: absolute;
  width: 550px;
  right: 0;
  top: 45px;
  max-width: 80%;
}

/* H3：サブ見出し（p → h3 に変更） */
.ap6{
margin: 0 0 30px;
font-size:1.2rem;
font-weight:500;
color:#0049a7;
}

.wrap1{
position:relative;
}

.ap7{
width:fit-content;
margin:0 auto;
}



  :root {
    --navy: #1f4fa3;      /* 丸ラベルの青 */
    --card: #dfe4f7;      /* カードの薄紫 */
    --arrow: #c9cdd6;     /* 矢印のグレー */
    --text: #222;
    --card-w: 170px;      /* PC時のカード幅 */
    --badge: 64px;        /* 丸ラベルの直径 */
  }

  .pipe-title {
    margin: 0 0 100px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.04em;
  }

  .nowrap { display: inline-block; }  /* 改行時に「パイプ役」を分割しない */

  /* ========== PC：横5列 ========== */
  .pipe {
    display: grid;
    grid-template-columns: var(--card-w) 1fr var(--card-w) 1fr var(--card-w);
    align-items: center;
    column-gap: 8px;
    margin: 0 auto;
  }

  /* ---- カード ---- */
  .card {
    position: relative;
    min-height: 260px;
    padding: calc(var(--badge) / 2 + 24px) 14px 32px;
    background: var(--card);
    border-radius: 999px;          /* 縦長のカプセル形 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .badge {
    position: absolute;
    top: calc(var(--badge) / -2);  /* カード上端に半分はみ出す */
    left: 50%;
    transform: translateX(-50%);
    width: var(--badge);
    height: var(--badge);
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1em;
  }

  .card ul {
    list-style: none;
    margin: auto 0;               /* カード内で上下中央 */
    padding: 0;
    font-size: 11px;
    font-weight: bold;
    line-height: 2;
  }
  .card li::before { content: "・"; }
  .card li.etc::before { content: none; }

  /* 当社カード：画像スペース＋業務内容 */
  .card--center { min-height: 280px; }

  .image-slot {
    width: 100%;
    aspect-ratio: 14 / 10;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #6b7390;
  }
  /* 画像を入れたら <div class="image-slot"> を <img class="image-slot" src="..." alt="..."> に差し替え */
  img.image-slot { border: none; background: none; object-fit: contain; }

  .services {
    margin: 0;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    line-height: 2;
  }

  /* ---- 矢印列：上テキスト・矢印・下テキスト ---- */
  .link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .link-text {
    writing-mode: vertical-rl;     /* 縦書き（PC・モバイル共通） */
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.7;
    letter-spacing: 0.15em;
    min-height: 100px;             /* 矢印の上下で位置をそろえる */
  }
  .link-text--top    { align-self: center; }

  .arrow {
    width: 100%;
    /*max-width: 110px;*/
    height: 34px;
    background: var(--arrow);
    /* 横向きの両矢印 */
    clip-path: polygon(0 50%, 24% 0, 24% 28%, 76% 28%, 76% 0, 100% 50%,
                       76% 100%, 76% 72%, 24% 72%, 24% 100%);
  }




  /* ========== セクション全体 ========== */
  .strength {
    background: #0a4bb4;
    color: #fff;
    padding: 40px 20px 70px;
  }

  .strength-title {
    margin: 0 0 90px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0.08em;
  }

  .strength-list {
    width: 640px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  /* ========== 1項目：数字・画像・説明文 ========== */
  .strength-item {
    display: flex;
    align-items: center;
    margin-bottom: 48px;
  }
  .strength-item:last-child { margin-bottom: 0; }

  /* 数字（円の左上に配置） */
  .strength-num {
    align-self: flex-start;
    width: 56px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 70px;
    font-weight: bold;
    line-height: 1;
  }

  /* 画像：正方形を border-radius で円形に */
  .strength-img {
    flex-shrink: 0;
    width: 132px;
    height: 132px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
  }

  /* 説明文 */
  .strength-text {
    flex: 1;
    margin-left: 75px;
  }

  .strength-text h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.04em;
  }

  .strength-text p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.1em;

  }

.fix img{
margin-top:-2px;
}


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

}


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

    .pipe-title { font-size: 17px; margin-bottom: 100px; }

    .pipe {
      grid-template-columns: 1fr;
      row-gap: 0;
      max-width: 320px;
    }

    .card,
    .card--center {
      min-height: 0;
      border-radius: 48px;
      padding-bottom: 36px;
    }

    .card--center .image-slot { max-width: 220px; }

    /* 矢印列は「左テキスト・縦矢印・右テキスト」の横並びに */
    .link {
      flex-direction: row;
      justify-content: center;
      gap: 20px;
      padding: 20px 0 calc(var(--badge) / 2 + 20px);  /* 次のカードの丸ラベル分を確保 */
    }
    .link-text { min-height: 0; }

    .arrow {
      width: 34px;
      max-width: none;
      height: 110px;
      /* 縦向きの両矢印 */
      clip-path: polygon(50% 0, 100% 24%, 72% 24%, 72% 76%, 100% 76%, 50% 100%,
                         0 76%, 28% 76%, 28% 24%, 0 24%);
    }


    .strength-title { margin-bottom: 50px; }

    .strength-item {
      flex-wrap: wrap;
      justify-content: center;
    }

    .strength-text {
      flex-basis: 100%;
      margin: 24px 0 0;
    }

    .strength-text h3 { text-align: center; }

  .strength-text p {
text-align:center;
  }

.ap4{
text-align:left;
}

/* ▼ SP時：ap2・ap6 の余白調整 */
.ap2 {
  font-size: 1.5rem;
}

}

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



}
