@charset "UTF-8";

/* ==========================================================================
   SIC eWORKS トップページ固有スタイル
   ========================================================================== */
/* コンテンツエリアのみに4本線を表示（ヘッダー・ヒーローには影響しない） */
body.home .l-contents {
    position: relative;
}
body.home .l-contents::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background:
        linear-gradient(#ededed, #ededed) 0% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 33.333% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 66.666% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 100% 0 / 1px 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}

.l-contents--full section{
	margin-bottom:160px;
}

/* ----------------------------------------------------------
   l-hero__item--00 : ローディングオーバーレイ
   --10と同じclip-pathで斜めライン、青背景、最前面
   ---------------------------------------------------------- */

.l-hero__item--00 {
  position: absolute;
  top: 0px;
  left: 0px;
  clip-path: polygon(
    0px   0px,
    1200px 0px,
    1200px 623.2px,
    0px   573.2px
  );
  background: #036eb8;
  width: 1200px;
  height: 622.5px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.l-hero__item--00.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.l-hero__item--00.is-done {
  display: none;
}

.l-loading__logo {
  width: 156px;
  height: 67px;
  opacity: 0;
  animation: loading-logo-in 0.5s ease 0.3s forwards;
	transform: scale(calc(1200px / 100vw * 0.7));
}

@keyframes loading-logo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 767px) {
  .l-loading__logo {
    width: 115px;
    height: auto;
  }
}


/* ----------------------------------------------------------
   l-hero : ヒーローセクション
   ---------------------------------------------------------- */

.l-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 画像が揃ってから高さを確定する予定・暫定値 */
  height: 750px;
	background-color: rgba(0,0,0,0)
}

/* ----------------------------------------------------------
   p-hero-ticker : 流れる文字エリア
   ---------------------------------------------------------- */
.p-hero-ticker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.p-hero-ticker__item {
  position: absolute;
  white-space: nowrap;
  font-family: "Google Sans Flex", sans-serif;
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  will-change: transform;
}

/* ----------------------------------------------------------
   p-hero-copy : ヒーローセクション キャッチコピー
   ---------------------------------------------------------- */
.p-hero-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -40px;
  padding-left: 30px;
  padding-right: 30px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* タイトル用：mix-blend-modeが効くように独立 */
.p-hero-copy--title {
  mix-blend-mode: overlay;
}

/* リード用：タイトル下に表示されるよう上方向のマージンを調整 */
.p-hero-copy--lead {
  margin-top: 50px;
}

.p-hero-copy__title {
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(5.625rem, calc(5.625rem + (9.375 - 5.625) * ((100vw - 48rem) / (75 - 48))), 9.375rem);
  /* clamp(50px, ..., 150px) */
  font-weight: 500;
  line-height: 1;
  color: #fff;
  margin-bottom: 0;
}

/* タイトル白文字重ね（視認性補強・overlayの外） */
.p-hero-copy--title-overlay {
  z-index: 3; /* overlay(2)の上 */
}
.p-hero-copy__title-overlay {
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(5.625rem, calc(5.625rem + (9.375 - 5.625) * ((100vw - 48rem) / (75 - 48))), 9.375rem);
  font-weight: 500;
  line-height: 1;
  color: #fff;
  opacity: 0.4;
}

.p-hero-copy__lead {
  font-size: clamp(1rem, calc(1rem + (1.4375 - 1) * ((100vw - 48rem) / (75 - 48))), 1.4375rem);
  /* clamp(16px, ..., 23px) */
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
}


/* ----------------------------------------------------------
   l-hero__grid : 画像グリッドコンテナ
   ---------------------------------------------------------- */

.l-hero__grid {
  position: relative;
  /* 1200px基準で組む・JSでscaleを計算して適用 */
  width: 1200px;
  height: 100%;
  transform-origin: top left;
}

/* l-heroの高さもscaleに連動して変える */
.l-hero {
  height: calc(622 / 1200 * 100vw);
}


/* ----------------------------------------------------------
   l-hero__item : 各画像アイテム共通
   ---------------------------------------------------------- */

.l-hero__item {
  position: absolute;
  overflow: hidden;
}

.l-hero__item img {
  display: block;
  width: auto;
  height: auto;
  object-fit: unset;
  position: relative;
  z-index: 1;
}

.l-hero__item video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  _opacity: 0;
	opacity: 1;
  transition: opacity 0.8s ease;
}


/* ----------------------------------------------------------
   ① 左上の画像
   幅: 345px
   高さ: 左端274px・右端251px（差23px・3.9度）
   clip-path: 左上(0,0) 右上(345,23) 右下(345,274) 左下(0,274)
   ---------------------------------------------------------- */


.l-hero__item--01 {
  top: 0;
  left: 0;
  clip-path: polygon(
    0px   0.5px,    /* 左上 */
    256px 0.5px,    /* 右上 */
    256px 218px,  /* 右下（251px） */
    0px   235px   /* 左下（274px・23px高い） */
  );
	z-index: 1;
}

.l-hero__item--01 img{
	width: 260px;
    /* display: visible */
    top: 0px;
    position: relative;
}

.l-hero__item--01 video{
  width: 260px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--02 {
  left: 256.2px;
  clip-path: polygon(
    0px   0.5px,    /* 左上 */
    194px 0.5px,    /* 右上 */
    194px 205px,  /* 右下（251px） */
    0px   218px   /* 左下（274px・23px高い） */
  );
	z-index: 1;
}

.l-hero__item--02 img{
	width: 480px;
    /* display: visible */
	position: relative;
    top: -20px;
    left: -180px;
}

.l-hero__item--02 video{
	position: absolute;
    left: -180px;
    top: -20px;
  width: 480px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}


.l-hero__item--03 {
	position: absolute;
  top: 204.2px;
  left: 0;
  clip-path: polygon(
    0px   31.5px,
    450px 1.5px,
    450px 387px,
    0px   368.5px
  );
	z-index: 1;
}

.l-hero__item--03 img{
	width: 710px;
	top: 0px;
    left: -70px;
    /* display: visible */
    position: relative;
}

.l-hero__item--03 video{
	position: absolute;
	width: 710px;
	top: 0px;
    left: -70px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--04 {
  left: 450.4px;
  clip-path: polygon(
    0px   0.5px,    /* 左上 */
    299px 0.5px,    /* 右上 */
    299px 386px,  /* 右下（251px） */
    0px   406px   /* 左下（274px・23px高い） */
  );
	z-index: 1;
}

.l-hero__item--04 img{
	width: 407px;
    top: 0px;
    left: -60px;
    /* display: visible */
    position: relative;
}

.l-hero__item--04 video{
	position: absolute;
	width: 407px;
	top: 0px;
    left: -60px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--05 {
  left: 749.6px;
  clip-path: polygon(
    0px   0.5px,    /* 左上 */
    249px 0.5px,    /* 右上 */
    249px 240px,  /* 右下（251px） */
    0px   257px   /* 左下（274px・23px高い） */
  );
	z-index: 1;
}

.l-hero__item--05 img{
	width: 281px;
    top: -22px;
    left: -29px;
    /* display: visible */
    position: relative;
}

.l-hero__item--05 video{
	position: absolute;
	width: 281px;
    top: -22px;
    left: -29px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--06 {
  left: 998.8px;
  clip-path: polygon(
    0px   0.5px,    /* 左上 */
    201.2px 0.5px,    /* 右上 */
    201.2px 227px,  /* 右下（251px） */
    0px   240px   /* 左下（274px・23px高い） */
  );
	z-index: 1;
}

.l-hero__item--06 img{
	    width: 240px;
    top: 1px;
    right: 49px;
    /* display: visible */
    position: relative;
}

.l-hero__item--06 video{
	position: absolute;
	    width: 240px;
    top: 1px;
    left: -49px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--07 {
	position: absolute;
  top: 246.2px;
  left: 749.6px;
  clip-path: polygon(
    0px   11px,
    164px 0px,
    164px 129px,
    0px   140px
  );
	z-index: 1;
}

.l-hero__item--07 img{
	width: 189px;
    top: -1px;
    left: -12px;
    /* display: visible */
    position: relative;
}

.l-hero__item--07 video{
	position: absolute;
	width: 189px;
    top: -1px;
    left: -12px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--08 {
	position: absolute;
  top: 375.2px;
  left: 450.4px;
  clip-path: polygon(
    0px   31px,
    463.2px 0.2px,
    463.2px 235.8px,
    0px   216px
  );
	z-index: 1;
}

.l-hero__item--08 img{
	    width: 467px;
    top: 0px;
    left: 0px;
    /* display: visible */
    position: relative;
}

.l-hero__item--08 video{
	position: absolute;
	    width: 467px;
    top: 0px;
    left: 0px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--09 {
	position: absolute;
  top: 227.2px;
  left: 913.8px;
  clip-path: polygon(
    0px   19px,
    286.2px 0.2px,
    286.2px 395px,
    0px   384px
  );
	z-index: 1;
}

.l-hero__item--09 img{
	 width: 396px;
    top: 0px;
    left: -117px;
    /* display: visible */
    position: relative;
}

.l-hero__item--09 video{
	position: absolute;
	width: 396px;
    top: 0px;
    left: -117px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--10 {
	position: absolute;
  top: 0px;
  left: 0px;
  clip-path: polygon(
    0px   0px,
    1200px 0px,
    1200px 623.2px,
    0px   573.2px
  );
	background: #102432;
	width: 1200px;
    height: 622.5px;
	z-index: 0;
}

/* 下部グラデーションオーバーレイ
 * 斜めライン付近から上に240pxの範囲で
 * #07233d(透過0.6) → 透明 のグラデーション
 */
.l-hero__item--11 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1200px;
  height: 622.5px;
  clip-path: polygon(
    0px   0px,
    1200px 0px,
    1200px 623.2px,
    0px   573.2px
  );
  background: linear-gradient(
    to top,
    rgba(7, 35, 61, 0.6) 0%,
    rgba(7, 35, 61, 0) 240px
  );
  z-index: 2;
  pointer-events: none;
}

/* ①画像の位置調整
 * transform: translate(X, Y) で移動
 * 例: translate(-20px, -10px) → 左に20px・上に10px
 */
/*
.l-hero__item--01 img {
  transform-origin: left top;
  transform: translate(0px, -50px) scale(0.8);
}

.l-hero__item--02 img {
  transform-origin: left top;
  transform: translate(0px, -50px) scale(0.8);
}*/

/* ----------------------------------------------------------
   767px以下 : スマホ
   ---------------------------------------------------------- */
@media (max-width: 767px) {
	
.l-contents--full section{
	margin-bottom:120px;
}

body.home .l-contents::before {
    content: none;
	}
	
.l-loading__logo {
  width: 156px;
  height: 67px;
  opacity: 0;
  animation: loading-logo-in 0.5s ease 0.3s forwards;
	transform: scale(calc(375px / 100vw * 0.6));
}

/* ----------------------------------------------------------
   l-hero__grid : 画像グリッドコンテナ
   ---------------------------------------------------------- */

.l-hero__grid {
  position: relative;
  /* 375px基準で組む・JSでscaleを計算して適用 */
  width: 375px;
  height: 100%;
  transform-origin: top left;
}

/* l-heroの高さもscaleに連動して変える */
.l-hero {
  height: calc(574 / 375 * 100vw);
}

/* キャッチコピー SP */
  .p-hero-copy {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 6.5vw;
    padding-right: 6.5vw;
    margin-top: -23vw; /* 上下中央からちょい上（調整用） */
    z-index: 2;
  }
  .p-hero-copy--title {
    mix-blend-mode: overlay;
  }
  .p-hero-copy--title-overlay {
    z-index: 3;
  }
  .p-hero-copy--lead {
    margin-top: -8vw; /* SP用：タイトル下のリード位置調整 */
  }
  .p-hero-copy__title {
    font-size: 13.1vw !important; /* 50px / 382px(iPhone標準幅) ≒ 13.1vw */
    margin-bottom: 0;
  }
  .p-hero-copy__title-overlay {
    font-size: 13.1vw !important;
  }
  .p-hero-copy__lead {
    font-size: 4.2vw !important; /* 16px / 382px ≒ 4.2vw */
  }
	
	
/* ----------------------------------------------------------
   ① 左上の画像
   幅: 345px
   高さ: 左端274px・右端251px（差23px・3.9度）
   clip-path: 左上(0,0) 右上(345,23) 右下(345,274) 左下(0,274)
   ---------------------------------------------------------- */
.l-hero__item--00 {
  position: absolute;
  top: 0px;
  left: 0px;
  clip-path: polygon(
    0px   0px,
    375px 0px,
    375px 537px,
    0px   521px
  );
  background: #036eb8;
  width: 375px;
  height: 537px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.l-hero__item--01 {/*横幅：240.4px*/
  top: 408.4px;
  left: 0;
  clip-path: polygon(
    0px   16px,    /* 左上 */
    240.4px 0.4px,    /* 右上 */
    240.4px 122px,  /* 右下（251px） */
    0px   110px   /* 左下（274px・23px高い） */
  );
	z-index: 1;
}

.l-hero__item--01 img{
    /* display: visible */
	width: 242px;
    top: -37px;
	left: 0px;
    position: relative;
}

.l-hero__item--01 video{
	position: absolute;
  width: 242px;
  height: auto;
  top: -37px;
	left: 0px;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--02 {/*横幅：134.2px*/
  left: 240.8px;
	top:423.8px;
  clip-path: polygon(
	  0px 9px,
	  134.2px 0px,
	  134.2px 113px,
	  0px 106px
  );
	z-index: 1;
}

.l-hero__item--02 img{
	width: 328px;
    /* display: visible */
	position: relative;
    top: -25px;
    left: -120px;
}

.l-hero__item--02 video{
	position: absolute;
    top: -25px;
    left: -120px;
  width: 328px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}


.l-hero__item--03 {
	display: none;
	position: absolute;
  top: 204.2px;
  left: 0;
  clip-path: polygon(
    0px   31.5px,
    450px 1.5px,
    450px 387px,
    0px   368.5px
  );
	z-index: 1;
}

.l-hero__item--03 img{
	width: 710px;
	top: 0px;
    left: -70px;
    /* display: visible */
    position: relative;
}

.l-hero__item--03 video{
	position: absolute;
	width: 710px;
	top: 0px;
    left: -70px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}
	
/* スマホはここが左上 */

.l-hero__item--04 {/*横幅：130px*/
	top:0;
	left: 0px;
  clip-path: polygon(
    0px   0.5px,
    130px 0.5px,
    130px 251px,
    0px   260px
  );
	z-index: 1;
}

.l-hero__item--04 img{
	width: 277px;
    top: 0px;
    left: -70px;
    /* display: visible */
    position: relative;
}

.l-hero__item--04 video{
	position: absolute;
	width: 277px;
    top: 0px;
    left: -70px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--05 {/*横幅：166px*/
  left: 130.4px;
  clip-path: polygon(
    0px   0.5px,
    166px 0.5px,
    166px 153px,
    0px   165px
  );
	z-index: 1;
}

.l-hero__item--05 img{
	width: 201px;
    top: -22px;
    left: -19px;
    /* display: visible */
    position: relative;
}

.l-hero__item--05 video{
	position: absolute;
	width: 201px;
    top: -22px;
    left: -19px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--06 {/*横幅：78.2px*/
  left: 296.8px;
  clip-path: polygon(
    0px   0.5px,    /* 左上 */
    78.2px 0.5px,    /* 右上 */
    78.2px 148px,  /* 右下（251px） */
    0px 153px   /* 左下（274px・23px高い） */
  );
	z-index: 1;
}

.l-hero__item--06 img{
	 width: 160px;
    top: 0px;
    right: 57px;
    /* display: visible */
    position: relative;
}

.l-hero__item--06 video{
	position: absolute;
	width: 160px;
    top: 0px;
    left: -57px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--07 {/*横幅：110px*/
  top: 157.6px;
    left: 130.4px;
  clip-path: polygon(
    0px 8px,
	  110px 0px,
	  110px 85.4px,
	  0px 93.4px
  );
	z-index: 1;
}

.l-hero__item--07 img{
	width: 149px;
    top: -2px;
    left: -12px;
    /* display: visible */
    position: relative;
}

.l-hero__item--07 video{
	position: absolute;
	width: 149px;
    top: -2px;
    left: -12px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--08 {/*横幅：240.4px*/
  top: 243.4px;
  left: 0px;
  clip-path: polygon(
    0px   17px,
    240.4px 0.4px,
    240.4px 164.4px,
    0px   181px
  );
	z-index: 1;
}

.l-hero__item--08 img{
	width: 353px;
    top: -10px;
    left: -82px;
    /* display: visible */
    position: relative;
}

.l-hero__item--08 video{
	position: absolute;
	width: 353px;
    top: -10px;
    left: -82px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--09 {/*横幅：134.2px*/
  top: 148.4px;
  left: 240.8px;
  clip-path: polygon(
    0px   9px,
    134.2px 0px,
    134.2px 275px,
    0px   284px
  );
	z-index: 1;
}

.l-hero__item--09 img{
	width: 286px;
    top: 0px;
    left: -87px;
    /* display: visible */
    position: relative;
}

.l-hero__item--09 video{
	position: absolute;
	width: 286px;
    top: 0px;
    left: -87px;
  height: auto;
  transform-origin: left top;
  transform: translate(0px, 0px);
}

.l-hero__item--10 {
	position: absolute;
  top: 0px;
  left: 0px;
  clip-path: polygon(
    0px   0px,
    375px 0px,
    375px 537px,
    0px   519px
  );
	background: #102432;
	width: 100%;
    height: 537px;
	z-index: 0;
}


/* 下部グラデーションオーバーレイ
 * 斜めライン付近から上に240pxの範囲で
 * #07233d(透過0.6) → 透明 のグラデーション
 */
.l-hero__item--11 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 375px;
  height: 537px;
  clip-path: polygon(
    0px   0px,
    375px 0px,
    375px 537px,
    0px   521px
  );
  background: linear-gradient(
    to top,
    rgba(7, 35, 61, 0.6) 0%,
    rgba(7, 35, 61, 0) 240px
  );
  z-index: 2;
  pointer-events: none;
}

/* ①画像の位置調整
 * transform: translate(X, Y) で移動
 * 例: translate(-20px, -10px) → 左に20px・上に10px
 */
	/*
.l-hero__item--01 img {
  transform-origin: left top;
  transform: translate(0px, -50px) scale(0.8);
}

.l-hero__item--02 img {
  transform-origin: left top;
  transform: translate(0px, -50px) scale(0.8);
}*/
	
	
	
}


/* ==========================================================================
   p-top-service : サービス誘導エリア
   ========================================================================== */

.p-top-service {
  position: relative;
  width: 100%;
}

.p-top-service__body{
	position: absolute;
	left:0;
	right:0;
	max-width: 1160px;
    margin: 0 auto;
	padding-top: clamp(3.125rem, calc(3.125rem + (9.6875 - 3.125) * ((100vw - 47.9375rem) / (75 - 47.9375))), 9.6875rem);
	padding-left: clamp(3.75rem, calc(3.75rem + (7.5 - 3.75) * ((100vw - 47.9375rem) / (75 - 47.9375))), 5.5rem);
    display: flow-root;
	z-index: 1;
}

.p-top-service__title{
	position: relative;
	font-family: "Google Sans Flex", sans-serif;
	font-size: clamp(3.4375rem, calc(3.4375rem + (6.5625 - 3.4375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 6.5625rem);
	/* 55px(767px) → 105px(1200px) */
	font-weight: 400;
	line-height: 1;
	margin-bottom: clamp(1.5714rem, calc(1.5714rem + (3 - 1.5714) * ((100vw - 47.9375rem) / (75 - 47.9375))), 2rem);
	/* 25px(767px) → 48px(1200px) */
}

.p-top-service__lead{
	font-size: clamp(0.9375rem, calc(0.9375rem + (1.0625 - 0.9375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1.0625rem);
	/* 15px(767px) → 17px(1200px) */
	line-height: 1.8;
	margin-bottom: clamp(2.2059rem, calc(2.2059rem + (2.5 - 2.2059) * ((100vw - 47.9375rem) / (75 - 47.9375))), 2.5rem);
	/* 35px(767px) → 40px(1200px) */
}

.p-top-service__title:before{
	content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 67px;
    height: 4px;
    background: url(../images/txt_bar_l.svg) no-repeat center / contain;
}

.p-section__btn-or {
	margin: 0px 0 0;
}

/* ----------------------------------------------------------
   背景画像 + グラデーション（複数背景で重ねる）
   - 前面：画像（1468px幅・センタリング）
   - 背面：グラデーション（#f3f3f3→透明）
   - clip-pathで下端を斜めにカット
   ---------------------------------------------------------- */
.p-top-service__bg {
  position: relative;
  width: 100%;
  height: 750px;
  background:
    url(../images/top/pc_service_img.png) center bottom no-repeat,
    linear-gradient(to top, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 50%);
  background-size:
    1468px auto,
    100% 100%;
	background-position:
    center calc(100% - 160px),  /* 画像：下から45px上 */
    center bottom; 
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 90%,
    0% 80%
  );
}

/* SP用画像はPCでは非表示 */
.p-top-service__bg-sp {
  display: none;
}

/* ----------------------------------------------------------
   p-top-service 1200px以下：画像と高さを比例縮小
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .p-top-service__bg {
    background-size:
      122.3vw auto,   /* 1468 / 1200 * 100 = 122.3vw（1200pxで1468pxと同じサイズ） */
      100% 100%;
    height: calc(700 / 1200 * 100vw); /* 1200px時の700pxを基準に比例縮小 */
  }
}


/* ----------------------------------------------------------
   p-top-service__cards : サービス2カラム
   ---------------------------------------------------------- */
.p-top-service__cards {
  position: relative;
  display: flex;
  gap: 40px;
  max-width: 1160px;
  margin: -183px auto 0; /* 斜めラインに重ねる */
  padding: 0 20px;
  z-index: 2;
}


.p-top-service__cards-bottom {
	position: relative;
	max-width: 1198px;
	height: 130px;
	margin: 0 auto;
}

/* 下のレイヤー：グレー */
.p-top-service__cards-bottom::before {
	content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 2px);
    height: 130px;
    background: #EDEDED;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 67%);
    right: 0;
}

/* 上のレイヤー：白（1px上にずらす） */
.p-top-service__cards-bottom::after {
	content: "";
    position: absolute;
    bottom: 1px;
    left: 0;
    width: calc(100% - 2px);
    height: 130px;
    background: #fff;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 67%);
    right: 0;
    margin: 0 auto;
}

.p-top-service__cards:before {
	    content: '';
    position: absolute;
    width: 34px;
    height: 239px;
    background: url("../images/top/side_shadow_left.png") left top no-repeat;
    left: -13px;
    top: 0px;
	opacity: 0.5;
	margin: 0 auto;
}
/*
.p-top-service__cards:after {
	    content: '';
    position: absolute;
    width: 31px;
    height: 239px;
    background: url("../images/top/side_shadow_right.png") right top no-repeat;
    right: -11px;
    top: -26px;
    opacity: 0.5;
}*/

.p-top-service__card {
  flex: 1;
  position: relative;
  background-color: #fff;
  padding:
    clamp(1.25rem, calc(1.25rem + (5.5 - 1.25) * ((100vw - 47.9375rem) / (75 - 47.9375))), 4rem)
    clamp(1.5625rem, calc(1.5625rem + (5.0 - 1.5625) * ((100vw - 47.9375rem) / (75 - 47.9375))), 5.0rem)
    0;
  /* 88px 80px 0(1200px) → 20px 25px 0(767px) */
  text-align: center; /* その1：タイトル以外センタリング */
}

.p-top-service__card:hover {
	cursor: pointer
}

.p-top-service__card:hover .p-top-service__card-title{
	color:var(--color-primary);
	transition: color 0.3s ease;
}

.p-top-service__card:hover .p-top-service__card-img img{
	opacity: 0.7;
}

/* カード内：タイトル（インフラソリューション等） */
.p-top-service__card-title {
  position: relative;
  font-size: clamp(0.9375rem, calc(0.9375rem + (1.5625 - 0.9375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1.5625rem);
  /* 15px(767px) → 25px(1200px) */
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 0.1em;
  padding-top: 25px;
  text-align: center;
  display: inline-block; /* テキスト幅に合わせて装飾バーを配置 */
}

/* 装飾バー：タイトルテキストの左上 */
.p-top-service__card-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 67px;
  height: 4px;
  background: url(../images/txt_bar_l.svg) no-repeat center / contain;
}

/* カード内：サブタイトル（英語） */
.p-top-service__card-sub {
  font-family: "Google Sans Flex", sans-serif;
  font-size: 0.875rem; /* 14px固定 */
  color: #808080;
  margin-bottom: 1.5em;
}

/* カード内：画像 */
.p-top-service__card-img {
  margin-bottom: 3.5em;
}

.p-top-service__card-img img {
  width: 100%;
  height: auto;
  display: block;
	transition: opacity 0.3s ease-in-out;
}

/* カード内：リンクテキスト */
.p-top-service__card-link {
  font-size: clamp(0.9375rem, calc(0.9375rem + (1.125 - 0.9375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1.125rem);
  /* 15px(767px) → 18px(1200px) */
  color: var(--color-text, #333);
  text-decoration: none;
  display: flex;
    justify-content: center;
}

.p-top-service__card-link .l-header__btn-icon--arrow{
	background-color: var(--color-text);
	position: relative;
    left: 15px;
    top: 6px;
    height: 17px;
    width: 9px;
}

.p-top-service__card.left-box:after {
	content: '';
    position: absolute;
    width: 31px;
    height: 239px;
    background: url("../images/top/side_shadow_right.png") right top no-repeat;
    right: -31px;
    top: -26px;
    opacity: 0.5;
}

/* 上辺の斜めライン（aboutusのp-policy__bodyと同じ） */
.p-top-service__card::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  height: 30px;
  background-color: #fff;
  transform: skewY(-3deg);
  transform-origin: top left;
  z-index: -1;
}

.p-top-service__card.right-box:after {
	content: '';
    position: absolute;
    width: 31px;
    height: 239px;
    background: url("../images/top/side_shadow_left.png") left top no-repeat;
    left: -32px;
    top: 0px;
    opacity: 0.5;
}


/* ----------------------------------------------------------
   p-top-service SP（767px以下）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
	
	.p-top-service__cards-bottom{
		display: none;
	}
	
	.p-top-service__body{
	position: relative;
	left:0;
	right:0;
	max-width: 100%;
	width:calc(100% - 80px);
    margin: 0 auto;
    padding: 60px 0 0 0px;
    display: flow-root;
}
	
	.p-top-service__cards::before{
		left: 0px;
	}
	
	.p-top-service__cards::after{
		right: 0px;
	}
	
	.p-top-service__card.left-box::after,
	.p-top-service__card.right-box::after{
		content: none;
	}
	

.p-top-service__title{
	font-size: 3.4375rem !important; /* 55px固定 */
	margin-bottom: 1.5rem;
}

.p-top-service__lead{
	font-size: 0.9375rem !important; /* 15px固定 */
	margin-bottom: 2rem;
}
	
.p-top-service__title:before{
	top: -18px !important;
    width: 33.5px;
    height: 2px;
	}

.p-section__btn-or {
	margin: 0px auto 40px;
}
	
	.js-blur-trigger {
  visibility: hidden;
}

.js-blur-trigger.blur-word {
  visibility: visible;
}
	
  .p-top-service__bg {
    height: auto;
    padding-bottom: 26vw; /* 画像の下にグラデーション表示用の余白 */
    background:
      none,
      linear-gradient(to top, rgba(243,243,243,1) 0%, rgba(243,243,243,0) 50%);
    background-size: 100% 100%;
    background-position: center bottom;
  }

  .p-top-service__bg-sp {
    display: block;
    width: 100%;
    height: auto;
  }

  .p-top-service__cards {
    flex-direction: column;
    gap: 20px;
    margin-top: -162px;
    padding: 0 30px;
  }

  .p-top-service__card {
    padding: 30px 25px 25px;
  }

  .p-top-service__card-title {
    font-size: 1.125rem !important; /* 15px固定 */
    padding-top: 13px;
  }

  .p-top-service__card-title::before {
    width: 33.5px;
    height: 2px;
  }
	
	.p-top-service__card-img{
		margin-bottom: 1.5em;
	}

  .p-top-service__card-link {
    font-size: 0.9375rem; /* 15px */
  }
}

/* ==========================================================================
   p-top-about : About Us 誘導エリア
   ========================================================================== */

.p-top-about {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.p-top-about__inner {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: clamp(6.0rem, calc(6.0rem + (9.375 - 6.0) * ((100vw - 47.9375rem) / (75 - 47.9375))), 9.375rem);
  /* 96px(767px) → 150px(1200px) */
}

/* 画像（左側） */
.p-top-about__img {
  flex-shrink: 0;
  width: 460px;
}

.p-top-about__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキスト（右側） */
.p-top-about__body {
  flex: 1;
}

.p-top-about__title {
  position: relative;
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(3.4375rem, calc(3.4375rem + (6.5625 - 3.4375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 6.5625rem);
  /* 55px(767px) → 105px(1200px) */
  font-weight: 400;
  line-height: 1;
  margin-bottom: clamp(1.5rem, calc(1.5rem + (3.0 - 1.5) * ((100vw - 47.9375rem) / (75 - 47.9375))), 3.0rem);
  padding-top: 25px;
}

.p-top-about__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 67px;
  height: 4px;
  background: url(../images/txt_bar_l.svg) no-repeat center / contain;
}

.p-top-about__lead {
  font-size: clamp(0.9375rem, calc(0.9375rem + (1.0625 - 0.9375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1.0625rem);
  /* 15px(767px) → 17px(1200px) */
  line-height: 1.8;
  margin-bottom: clamp(2.0rem, calc(2.0rem + (2.5 - 2.0) * ((100vw - 47.9375rem) / (75 - 47.9375))), 2.5rem);
}


/* ==========================================================================
   p-top-recruit : Recruit 誘導エリア
   ========================================================================== */

.p-top-recruit {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.p-top-recruit__inner {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* テキスト（左側） */
.p-top-recruit__body {
  flex: 1;
  padding-left: clamp(4.375rem, calc(4.375rem + (6.875 - 4.375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 6.875rem);
  /* 70px(767px) → 110px(1200px) */
}

.p-top-recruit__title {
  position: relative;
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(3.4375rem, calc(3.4375rem + (6.5625 - 3.4375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 6.5625rem);
  /* 55px(767px) → 105px(1200px) */
  font-weight: 400;
  line-height: 1;
  margin-bottom: clamp(1.5rem, calc(1.5rem + (3.0 - 1.5) * ((100vw - 47.9375rem) / (75 - 47.9375))), 3.0rem);
  padding-top: 25px;
}

.p-top-recruit__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 67px;
  height: 4px;
  background: url(../images/txt_bar_l.svg) no-repeat center / contain;
}

.p-top-recruit__lead {
  font-size: clamp(0.9375rem, calc(0.9375rem + (1.0625 - 0.9375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1.0625rem);
  /* 15px(767px) → 17px(1200px) */
  line-height: 1.8;
  margin-bottom: clamp(2.0rem, calc(2.0rem + (2.5 - 2.0) * ((100vw - 47.9375rem) / (75 - 47.9375))), 2.5rem);
}

/* 画像（右側） */
.p-top-recruit__img {
  flex-shrink: 0;
  width: 460px;
}

.p-top-recruit__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   スライダー
   ---------------------------------------------------------- */

#staff-slide{
	margin-bottom:400px;
}

.p-top-staff {
	position: relative;
	width:100%;
	background: #FFF;
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 15%, rgba(247, 247, 247, 1) 15%);
	padding-bottom:110px;
	_margin-bottom:400px;
	_display: none;
}

.p-top-staff::before{
	content: 'Work With Us';
	position: absolute;
	bottom:-110px;
	left:0;
	right:0;
	margin:0 auto;
	font-size:187px;
	color:#fff;
	font-family: "Google Sans Flex", sans-serif;
	font-weight: 400;
	text-align: center;
}

.p-top-staff::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background:
        linear-gradient(#ededed, #ededed) 0% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 33.333% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 66.666% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 100% 0 / 1px 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}

.p-top-staff__slider{
	position: relative;
    z-index: 1;
}

/* Swiperがflex制御するため、手動のgap/justify-contentは不要 */
.p-top-staff__slider .swiper-wrapper{
	/* Swiperが自動制御 */
}

.p-top-staff__card{
	position: relative;
	width:338px !important; /* Swiperのauto幅を上書き */
	min-height:450px;
	border:solid 1px #e9e9e9;
	border-radius:10px;
	padding:30px;
	cursor: pointer;
	background: var(--color-white);
	box-sizing: border-box;
}

.p-top-staff__card::after{
	content: '';
	position: absolute;
	-webkit-mask: url(../images/ico_blank.svg) 0 0 no-repeat;
    mask: url(../images/ico_blank.svg) 0 0 no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--color-text);
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
	right:20px;
	bottom:20px;
}

/* 偶数カードの段差（data-staff-indexをJSで付与） */
.swiper-slide[data-staff-even="true"] {
  margin-top: 25px;
}

.p-top-staff__card:hover{
	border:solid 1px var(--color-primary);
}

.p-top-staff__card:hover img{
	opacity: 0.7
}

.p-top-staff__photo{
	width:278px;
	height:auto;
	margin-bottom:20px;
}

.p-top-staff__photo img{
	width:100%;
	border-radius:3px;
}

.p-top-staff__name{
	font-size:1.5rem;
	width:100%;
	text-align: center;
	margin-bottom:15px;
	font-weight: 500;
}

.p-top-staff__name a{
	text-decoration: none;
}

.p-top-staff__year{
	display: flex;
	gap:5px;
	align-items: center;
	font-size:1rem;
	margin-bottom:10px;
}

.p-top-staff__year .p-top-staff__badge{
	font-size:0.9375rem;
	border-radius:3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width:60px;
	height:30px;
	color:var(--color-white);
}

.p-top-staff__year .p-top-staff__badge.new{
	background: var(--color-primary)
}

.p-top-staff__year .p-top-staff__badge.career{
	background: var(--color-orange);
	letter-spacing: -1px;
    width: 70px;
}

.p-top-staff__detail div{

}

/* Swiperデフォルトナビを上書き */
.p-top-staff__prev.swiper-button-prev,
.p-top-staff__next.swiper-button-next {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	margin-top: 0;
}

.p-top-staff__prev.swiper-button-prev::after,
.p-top-staff__next.swiper-button-next::after {
	_content: none; /* Swiperデフォルトの矢印を消す */
}

.p-top-staff__nav{
	position: absolute;
	left:0;
	right:0;
	bottom:-30px;
	max-width: 1200px;
    margin: 0 auto;
    display: flow-root;
	display: flex;
	justify-content: flex-end;
	gap:15px;
	padding:0 20px;
}


.p-top-staff__prev{
	position: relative;
	width:60px;
	height:60px;
	border:solid 1px #e9e9e9;
	border-radius:2em;
	background: var(--color-white);
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}

.p-top-staff__prev:hover,
.p-top-staff__next:hover{
	border:solid 1px var(--color-primary);
}

.p-top-staff__next{
	position: relative;
	width:60px;
	height:60px;
	border:solid 1px #e9e9e9;
	border-radius:2em;
	background: var(--color-white);
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}

.p-top-staff__prev::after{
position: absolute;
    top: 44%;
    left: 44%;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-left: 2px solid #212121;
    border-top: 2px solid #212121;
    transform: rotate(-45deg);
}

.p-top-staff__next::after{
position: absolute;
    top: 44%;
    left: 40%;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-left: 2px solid #212121;
    border-top: 2px solid #212121;
    transform: rotate(-225deg);
}

.p-top-staff__prev:hover::after,
.p-top-staff__next:hover::after{
	border-left: 2px solid var(--color-primary);
    border-top: 2px solid var(--color-primary);
}

/* ----------------------------------------------------------
   スライダー 1200px以下
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .p-top-staff__card {
    width: 28.2vw !important; /* 338 / 1200 * 100 = 28.2vw */
    min-height: auto;
    padding: 2.5vw;
  }

	#staff-slide{
	margin-bottom: calc(400px * (100vw / 1200));
}

  .p-top-staff {
    padding-bottom: calc(110px * (100vw / 1200));
  }

  .p-top-staff::before {
    font-size: min(187px, 15.58vw);
    bottom: max(-110px, -9.17vw);
  }

  .p-top-staff__photo {
    width: 100%;
  }

  .p-top-staff__name {
    font-size: clamp(1.1rem, calc(1.1rem + (1.5 - 1.1) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1.5rem);
  }

  .p-top-staff__year {
    font-size: clamp(0.8rem, calc(0.8rem + (1 - 0.8) * ((100vw - 47.9375rem) / (75 - 47.9375))), 1rem);
  }

  .swiper-slide[data-staff-even="true"] {
    margin-top: calc(25px * (100vw / 1200));
  }
}


/* ----------------------------------------------------------
   スライダー（767px以下）
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  .p-top-staff__slider {
    transform: none; /* スケールをやめてvw指定に */
    _overflow: visible;
	  overflow: hidden;
  }
	
	#staff-slide{
	margin-bottom: calc(150px + (400 - 150) * ((100vw - 375px) / (767 - 375)));
}

  .p-top-staff {
    padding-bottom: 60px;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 30%, rgba(247, 247, 247, 1) 30%);
    _overflow: hidden;
  }

  .p-top-staff::before {
    font-size: min(187px, 15.58vw);
    bottom: max(-110px, -9.17vw);
  }

  .p-top-staff::after {
    content: none;
  }

  /* カードサイズ：SP用 */
  .p-top-staff__card {
    width: max(180px, 46vw) !important;
    min-height: auto;
    padding: 20px;
  }

  .swiper-slide[data-staff-even="true"] {
    margin-top: 12px;
  }

  .p-top-staff__photo {
    width: 100%;
  }

  .p-top-staff__name {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .p-top-staff__year {
    font-size: 0.8rem;
    gap: 8px;
    margin-bottom: 8px;
	  line-height: 1.2;
  }

  .p-top-staff__year .p-top-staff__badge {
    font-size: 0.75rem;
    width: 48px;
    height: 24px;
  }

  .p-top-staff__detail {
    font-size: 0.75rem;
  }

  .p-top-staff__card::after {
    width: 10px;
    height: 10px;
    right: 12px;
    bottom: 12px;
  }

  /* ナビボタン：SP用サイズ */
  .p-top-staff__nav {
    transform: none;
    bottom: -20px;
  }

  .p-top-staff__prev,
  .p-top-staff__next {
    width: 50px;
    height: 50px;
  }

  .p-top-staff__prev::after,
  .p-top-staff__next::after {
    width: 8px;
    height: 8px;
  }
}
/* ----------------------------------------------------------
   About Us / Recruit 1200px以下：画像を比例縮小
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .p-top-about__img {
    width: 38.3vw; /* 460 / 1200 * 100 = 38.3vw */
  }

  .p-top-recruit__img {
    width: 38.3vw;
  }
}


/* ----------------------------------------------------------
   About Us / Recruit SP（767px以下）
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  /* About Us SP */
  .p-top-about__inner {
    flex-direction: column-reverse;
    gap: 0;
  }

  .p-top-about__img {
    width: 100%;
    margin-right: auto;
  }

  .p-top-about__body {
    padding: 40px 40px 0;
  }

  .p-top-about__title {
    font-size: 3.4375rem !important; /* 55px */
    margin-bottom: 1.5rem;
  }

  .p-top-about__title::before {
    width: 33.5px;
    height: 2px;
  }

  .p-top-about__lead {
    font-size: 0.9375rem !important; /* 15px */
    margin-bottom: 2rem;
  }


  /* Recruit SP */
  .p-top-recruit__inner {
    flex-direction: column;
  }

  .p-top-recruit__body {
    padding: 40px 40px 0;
    order: 1; /* テキストを上に */
  }

  .p-top-recruit__img {
    width: 100%;
    order: 2; /* 画像を下に */
    display: flex;
    justify-content: flex-end; /* 右端にくっつく */
  }

  .p-top-recruit__title {
    font-size: 3.4375rem !important; /* 55px */
    margin-bottom: 1.5rem;
  }

  .p-top-recruit__title::before {
    width: 33.5px;
    height: 2px;
  }

  .p-top-recruit__lead {
    font-size: 0.9375rem !important; /* 15px */
    margin-bottom: 2rem;
  }
}

/* ==========================================================================
   p-top-news : News（お知らせ）エリア
   ========================================================================== */

.p-top-news {
  position: relative;
  width: 100%;
  background-color: var(--color-gray-bg);
  _padding-bottom: 80px;
  margin-top: 200px; /* Recruitとの距離 */
	z-index: 1;
}

.p-top-news::after {
    content: "";
    position: absolute;
    top: -56px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: calc(100% + 56px);
    background:
        linear-gradient(#ededed, #ededed) 0% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 33.333% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 66.666% 0 / 1px 100% no-repeat,
        linear-gradient(#ededed, #ededed) 100% 0 / 1px 100% no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* 上辺の斜めライン（右肩下がり：左が高く右が低い） */
.p-top-news::before {
  content: "";
  position: absolute;
  top: -56px;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: var(--color-gray-bg);
  clip-path: polygon(
    0% 0%,
    100% 60%,
    100% 100%,
    0% 100%
  )
}

.p-top-news__inner {
  max-width: 1200px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -30px;
}

/* タイトル行：PCセンタリング、斜めラインに重ねる */
.p-top-news__head {
  position: relative;
  text-align: center;
  margin-top: -70px; /* 斜めラインに重ねる */
  padding-bottom: 40px;
  z-index: 1;
}

.p-top-news__title {
  position: relative;
  display: inline-block; /* テキスト幅でセンタリング */
  font-family: "Google Sans Flex", sans-serif;
  font-size: clamp(3.4375rem, calc(3.4375rem + (6.5625 - 3.4375) * ((100vw - 47.9375rem) / (75 - 47.9375))), 6.5625rem);
  /* 55px(767px) → 105px(1200px) */
  font-weight: 400;
  line-height: 1;
  padding-top: 20px;
}

/* 装飾バー */
.p-top-news__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 67px;
  height: 4px;
  background: url(../images/txt_bar_l.svg) no-repeat center / contain;
}

/* お知らせ一覧リンク */
.p-top-news__link {
  position: absolute;
  right: 20px;
    bottom: 60px;
  font-size: 0.875rem;
  color: var(--color-text, #333);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: opacity 0.3s ease-in-out;
}

.p-top-news__link:hover {
  opacity: 0.7;
}

/* ニュース本文エリア */
.p-top-news__body {
  /* ニュース一覧が手動で入る */
	max-width: 1200px;
    margin: 0 auto;
    padding: 100px 40px 100px;
    display: flow-root;
	z-index: 2;
    position: relative;
}

.p-top-news__body .p-news-item{
		padding: 24px 30px;
	}


/* ----------------------------------------------------------
   p-top-news SP（767px以下）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .p-top-news {
    padding-bottom: 60px;
    margin-top: 70px; /* Recruitとの距離SP */
  }

  .p-top-news::before {
    top: -40px;
    height: 40px;
	  clip-path: polygon( 0% 0%, 100% 90%, 100% 100%, 0% 100%);
  }
	
	.p-top-news::after {
    content: none;
	}

  .p-top-news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    padding-bottom: 30px;
    width: calc(100% - 40px);
    margin: -40px auto 0;
  }

  .p-top-news__title {
    font-size: 3.4375rem !important; /* 55px固定 */
    padding-top: 10px;
    display: block;
  }

  .p-top-news__title::before {
    width: 33.5px;
    height: 2px;
  }

  .p-top-news__link {
    position: static; /* absoluteを解除 */
    padding-bottom: 0.3em;
	  right: 0;
  bottom: 40px; /* padding-bottomと同じ値でベースライン揃え */
  }
	
	.p-top-news__body {
  /* ニュース一覧が手動で入る */
	max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px 10px;
    display: flow-root;
}
	
	.p-top-news__body .p-news-item{
		padding: 20px 20px;
	}
	
}