/*-------post------*/
.archive-post-title {
  font-size: var(--b-fs);
  font-weight: var(--b-fw);
}
.single-post-title {
  font-size: var(--b-fs);
  font-weight: var(--b-fw);
}
.breadcrumb {
  background: #1a1a1a;
  padding-inline: 5.55%;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}
.breadcrumb li::after {
  content: ">";
  margin: 0 1em;
  display: inline-block;
}
.breadcrumb li:last-child::after {
  content: none;
}
.breadcrumb li a,
.breadcrumb li {
  color: #fff;
}
.p-single__body {
  max-width: 950px;
  width: 100%;
  margin-inline: auto;
}
.pagination-area {
  margin-top: clamp(40px, var(--px-80), 80px);
}
.nav-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}
/*-------hd------*/
/*-------ft-----*/
/*-------btn------*/
/*-------fv------*/
/* 高さはスライド画像（1440x705）が決める。splideの構造には触っていない */
.p-index-fv {
  position: relative;
  overflow: hidden;
}
.p-index-fv .splide__slide img {
  width: 100%;
  aspect-ratio: 1440 / 705;
  object-fit: cover;
}
/* 装飾：画像の周りに白いもや（中心は透明、外周にかけて白 50%） */
.p-index-fv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.5) 100%
  );
  pointer-events: none;
}
.p-index-fv__catch {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: var(--px-40);
  left: 0;
  color: #fff;
  font-size: clamp(28px, 4.444vw, 64px);
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  text-shadow: 4.5px 4.5px 20px rgba(0, 0, 0, 0.9);
}
.p-index-fv__line {
  display: block;
  white-space: nowrap;
}
/* 48px / 56px（64pxに対する比率で持たせる） */
.p-index-fv__sm {
  font-size: 75%;
}
.p-index-fv__dot {
  font-size: 87.5%;
}

/* =====================
  TOP共通
===================== */
/* 矢印つきの丸ボタン */
.c-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--px-10);
  padding: var(--px-10) var(--px-20);
  border-radius: 100px;
  background: var(--c-navy);
  color: #fff;
  font-size: clamp(16px, var(--px-20), 20px);
  line-height: normal;
}
.c-btn-arrow img {
  width: clamp(26px, 2.43vw, 35px);
}
.c-btn-arrow--white {
  background: #fff;
  color: var(--c-navy);
}
/* 装飾：コンクリートのテクスチャを白地に60%で重ねる
   （白40%のレイヤーを被せるのと同じ結果になる） */
.p-index-about,
.p-index-company {
  background:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url("../img/texture.jpg") center / cover no-repeat,
    #fff;
}

/* =====================
  ABOUT US
===================== */
.p-index-about {
  position: relative;
  overflow: hidden;
  padding-block: var(--px-25) var(--px-90);
}
/* 装飾：青灰色の斜線は2本だけ。傾き（実測 dx/dy = 1.333）を skewX で作り、
   上端での位置と幅をFigmaに合わせる。はみ出しは overflow: hidden で切る */
.p-index-about::before,
.p-index-about::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 17.43vw;
  background: #8ca6c2;
  transform: skewX(53.13deg);
  transform-origin: top left;
  pointer-events: none;
}
.p-index-about::before {
  left: -19.44vw;
}
.p-index-about::after {
  left: 6.32vw;
}
.p-index-about > * {
  position: relative;
  z-index: 1;
}
.p-index-about__head {
  display: flex;
  align-items: center;
  gap: var(--px-145);
  margin-bottom: var(--px-35);
}
/* 左端まで抜ける紺の帯。文字は左80pxから始まる */
.p-index-about__title {
  padding: var(--px-10) var(--px-20) var(--px-10) 5.55%;
  background: var(--c-navy);
  color: #fff;
  font-size: clamp(26px, var(--px-48), 48px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.p-index-about__title-em {
  font-size: clamp(30px, 3.889vw, 56px);
}
.p-index-about__en {
  color: var(--c-red-cta);
  font-family: "Roboto", sans-serif;
  font-size: clamp(48px, 8.333vw, 120px);
  font-weight: 700;
  line-height: 1.2;
}
/* 写真（右）と白カード（左）をグリッドで重ねる */
.p-index-about__main {
  display: grid;
  grid-template-columns: 5.556% 44.444% 2.778% 47.222%;
}
.p-index-about__img {
  grid-row: 1;
  grid-column: 3 / 5;
}
.p-index-about__img img {
  width: 100%;
  aspect-ratio: 720 / 400;
  object-fit: cover;
}
.p-index-about__card {
  grid-row: 1;
  grid-column: 2 / 4;
  z-index: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--px-40);
  margin-top: var(--px-40);
  padding: var(--px-60);
  background: rgba(255, 255, 255, 0.8);
}

/* =====================
  SERVICE
===================== */
.p-index-service {
  display: grid;
  overflow: hidden;
}
.p-index-service > * {
  grid-area: 1 / 1;
}
/* 背景：右端に写真（上）とテクスチャパネル（下） */
.p-index-service__bg {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.p-index-service__bg-photo,
.p-index-service__bg-panel {
  width: 33.33%;
  object-fit: cover;
}
.p-index-service__bg-photo {
  aspect-ratio: 479 / 224;
}
.p-index-service__bg-panel {
  flex: 1;
}
/* 装飾：斜めに切った紺のシェイプ。頂点は実測値（1440x700基準） */
.p-index-service__navy {
  background: var(--c-navy);
  clip-path: polygon(0 0, 66.94% 0, 84.79% 32%, 66.81% 100%, 0 100%);
}
.p-index-service__content {
  z-index: 1;
  padding-block: var(--px-60);
  color: #fff;
}
.p-index-service__head {
  display: flex;
  flex-direction: column;
  gap: var(--px-20);
  margin-bottom: var(--px-40);
  padding-left: 5.55%;
}
.p-index-service__en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(40px, 5.556vw, 80px);
  font-weight: 700;
  line-height: 1.2;
}
.p-index-service__title {
  font-size: clamp(24px, var(--px-40), 40px);
  font-weight: 700;
  line-height: 1.2;
}
.p-index-service__lead {
  display: flex;
  align-items: center;
  gap: var(--px-40);
  margin-bottom: var(--px-40);
  padding-left: 5.55%;
}
/* 560px。親のpadding-leftを除いた1360pxが基準になる */
.p-index-service__text {
  width: 41.18%;
  font-size: clamp(14px, var(--px-16), 16px);
}
/* 赤い旗形ラベル。2行×4枚、隣と少し重ねつつ交互に段差をつける */
.p-index-service__labels {
  display: flex;
  flex-direction: column;
  gap: var(--px-40);
}
.p-index-service__row {
  display: flex;
  padding-left: 22.01%;
}
/* 280x80。幅の基準は行のpadding-leftを除いた1123pxなので 280/1123 ≒ 24.93%。
   高さはFigma固定値（左辺が8pxぶん傾くので、高さが変わると角度も変わってしまう） */
.p-index-service__label {
  flex: 0 0 24.93%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(56px, var(--px-80), 80px);
  background: linear-gradient(to right, #ee0304, #940f10);
  clip-path: polygon(2.86% 0, 100% 0, 97.14% 100%, 0 100%);
  color: #fff;
  font-size: clamp(16px, var(--px-24), 24px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
/* 隣と26px重ねる */
.p-index-service__label + .p-index-service__label {
  margin-left: -2.32%;
}
/* 1・3枚目を20px下げる（＝2・4枚目が上がって見える） */
.p-index-service__label:nth-child(odd) {
  margin-top: var(--px-20);
}

/* =====================
  AREA
===================== */
.p-index-area {
  display: grid;
  overflow: hidden;
}
.p-index-area > *,
.p-index-area::after {
  grid-area: 1 / 1;
}
.p-index-area__bg {
  width: 100%;
  height: 100%;
  justify-self: stretch;
  align-self: stretch;
  object-fit: cover;
}
/* 装飾：黒70%オーバーレイ */
.p-index-area::after {
  content: "";
  background: rgba(0, 0, 0, 0.7);
}
.p-index-area__inner {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--px-60) 10.69% var(--px-80) 11.11%;
  color: #fff;
}
.p-index-area__body {
  flex: 0 0 44.9%;
  display: flex;
  flex-direction: column;
  gap: var(--px-25);
}
.p-index-area__en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(40px, 5.556vw, 80px);
  font-weight: 700;
  line-height: 1.2;
}
/* 赤地に白抜きの見出し。字送りぶんを差し引いて1行に収める */
.p-index-area__title {
  padding-block: var(--px-15);
  background: var(--c-red-cta);
  font-size: clamp(40px, 6.25vw, 90px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  white-space: nowrap;
}
.p-index-area__map {
  flex: 0 0 47.96%;
}
.p-index-area__map img {
  width: 100%;
}

/* =====================
  RECRUIT
===================== */
.p-index-recruit {
  display: flex;
}
.p-index-recruit__body {
  flex: 0 0 45.83%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--px-40);
  padding: var(--px-60) var(--px-40) var(--px-60) 5.55%;
  background: var(--c-navy);
  color: #fff;
}
.p-index-recruit__head {
  display: flex;
  flex-direction: column;
  gap: var(--px-10);
}
.p-index-recruit__en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(40px, 5.556vw, 80px);
  font-weight: 900;
  line-height: 1.2;
}
.p-index-recruit__title {
  font-size: clamp(24px, var(--px-40), 40px);
  font-weight: 700;
  line-height: 1.2;
}
.p-index-recruit__text {
  font-size: clamp(14px, var(--px-16), 16px);
}
.p-index-recruit__img {
  flex: 1;
}
.p-index-recruit__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================
  CONTACT
===================== */
.p-index-contact {
  position: relative;
  overflow: hidden;
  padding-block: var(--px-60) var(--px-80);
  background: #fff;
}
/* 装飾：左下から生えるピンクの斜めストライプ。Figma通り赤は2本で終端する。
   本数は絶対px指定なので、セクションが縦に伸びても3本目が生えない（=常に2本） */
.p-index-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    43deg,
    #e48182 0 115px,
    transparent 115px 171px,
    #e48182 171px 286px,
    transparent 286px
  );
  pointer-events: none;
}
.p-index-contact__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--px-10);
  text-align: center;
}
.p-index-contact__en {
  color: var(--c-red-cta);
  font-family: "Roboto", sans-serif;
  font-size: clamp(40px, 5.556vw, 80px);
  font-weight: 900;
  line-height: 1.2;
}
.p-index-contact__title {
  font-size: clamp(24px, var(--px-40), 40px);
  font-weight: 700;
  line-height: 1.2;
}
.p-index-contact__text {
  margin-top: var(--px-30);
  margin-bottom: var(--px-40);
  font-size: clamp(14px, var(--px-16), 16px);
}

/* =====================
  COMPANY
===================== */
.p-index-company {
  padding-block: var(--px-80);
  text-align: center;
}
.p-index-company__en {
  color: var(--c-navy);
  font-family: "Roboto", sans-serif;
  font-size: clamp(48px, 6.944vw, 100px);
  font-weight: 900;
  line-height: 1.2;
}
.p-index-company__title {
  margin-bottom: var(--px-40);
  font-size: clamp(24px, var(--px-40), 40px);
  font-weight: 700;
  line-height: 1.2;
}
/* TOPの会社概要は行間が狭く、文字が大きい */
.p-index-company .c-deftable {
  gap: var(--px-10);
  margin-bottom: var(--px-50);
  text-align: left;
}
.p-index-company .c-deftable__value {
  font-size: clamp(16px, var(--px-20), 20px);
}

/* Googleマップの枠。iframeを入れるので高さはここで確保する */
.p-index-map {
  height: clamp(300px, var(--px-600), 600px);
}
.p-index-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*-------iphone----*/
@media screen and (max-width: 680px) {
  /*-------fv----*/
  .p-index-fv .splide__slide img {
    aspect-ratio: 563 / 1080;
  }
  /* キャッチコピーは縦書きで右上から（縦書きでは line-height が段の間隔になる） */
  .p-index-fv__catch {
    top: 37vw;
    right: 2.4vw;
    bottom: auto;
    left: auto;
    writing-mode: vertical-rl;
    font-size: 10.25vw;
    line-height: 1.45;
    text-align: left;
  }
  .c-btn-arrow {
    min-height: 40px;
    min-width: 177px;
  }
  /*-------about----*/
  .p-index-about {
    padding-block: 8vw 13.3vw;
  }
  /* SPの斜め帯（実測 dx/dy = 0.924）。幅・傾き・位置を375基準で作り直す */
  .p-index-about::before,
  .p-index-about::after {
    width: 50.9vw;
    transform: skewX(42.8deg);
  }
  .p-index-about::before {
    left: -131.1vw;
  }
  .p-index-about::after {
    left: -61.6vw;
  }
  /* SPは ABOUT US が上（右寄せ）、紺の帯が下（左端まで抜ける） */
  .p-index-about__head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 4.8vw;
    margin-bottom: 5.3vw;
  }
  .p-index-about__title {
    padding: 3vw 4.3vw 3vw 5.33%;
    font-size: 6.15vw;
  }
  .p-index-about__title-em {
    font-size: 7vw;
  }
  .p-index-about__en {
    align-self: flex-end;
    margin-right: 5.33%;
    font-size: 16vw;
  }
  /* 重なりを解いて縦積み */
  .p-index-about__main {
    display: block;
    padding-inline: 5.33%;
  }
  .p-index-about__card {
    margin-top: 6.4vw;
    padding: 6.4vw 5.33%;
  }

  /*-------service----*/
  .p-index-service__bg-photo,
  .p-index-service__bg-panel {
    width: 28.27%;
  }
  .p-index-service__bg-photo {
    aspect-ratio: 106 / 175;
  }
  /* 紺のシェイプ（SPの実測値。375x828基準） */
  .p-index-service__navy {
    clip-path: polygon(0 0, 71.73% 0, 94.93% 30.2%, 71.73% 100%, 0 100%);
  }
  .p-index-service__content {
    padding-block: 10.6vw 21.3vw;
  }
  .p-index-service__head {
    gap: 3.2vw;
    margin-bottom: 6.4vw;
    padding-left: 5.33%;
  }
  .p-index-service__en {
    font-size: 13.3vw;
  }
  .p-index-service__title {
    font-size: 5.6vw;
  }
  .p-index-service__lead {
    display: block;
    margin-bottom: 8vw;
    padding-left: 5.33%;
  }
  .p-index-service__text {
    width: 78%;
    margin-bottom: 6.4vw;
    font-size: 3.7vw;
  }
  /* 4枚が2列×2段に折り返す（=全体で2列×4段） */
  .p-index-service__labels {
    gap: 4.3vw;
  }
  .p-index-service__row {
    flex-wrap: wrap;
    row-gap: 4.3vw;
    padding-left: 6.9%;
  }
  .p-index-service__label {
    flex: 0 0 48%;
    height: 13.3vw;
    font-size: 3.7vw;
  }
  .p-index-service__label + .p-index-service__label {
    margin-left: -3%;
  }
  /* 折り返し後は3枚目が左列の先頭になるので、左列（奇数）だけ下げる */
  .p-index-service__label:nth-child(odd) {
    margin-top: 2.7vw;
  }

  /*-------area----*/
  .p-index-area__inner {
    display: block;
    padding: 10.6vw 5.33% 13.3vw;
  }
  .p-index-area__body {
    gap: 4.3vw;
    margin-bottom: 8vw;
  }
  .p-index-area__en {
    font-size: 13.3vw;
  }
  /* SPは横幅いっぱいではなく、文字ぶんだけの赤い箱 */
  .p-index-area__title {
    width: fit-content;
    padding: 2.7vw 2.7vw;
    font-size: 10.4vw;
  }
  .p-index-area__text {
    font-size: 3.7vw;
  }
  .p-index-area__map {
    flex: none;
    width: 76%;
    margin-inline: auto;
  }

  /*-------recruit----*/
  .p-index-recruit {
    flex-direction: column;
  }
  .p-index-recruit__body {
    flex: none;
    gap: 6.4vw;
    padding: 10.6vw 5.33% 13.3vw;
  }
  .p-index-recruit__en {
    font-size: 13.3vw;
  }
  .p-index-recruit__title {
    font-size: 5.6vw;
  }
  .p-index-recruit__text {
    font-size: 3.7vw;
  }
  .p-index-recruit__img img {
    aspect-ratio: 375 / 260;
  }

  /*-------contact----*/
  .p-index-contact {
    padding-block: 10.6vw 13.3vw;
  }
  .p-index-contact::before {
    background: linear-gradient(
      43deg,
      #e48182 0 45px,
      transparent 45px 68px,
      #e48182 68px 113px,
      transparent 113px
    );
  }
  .p-index-contact__en {
    font-size: 13.3vw;
  }
  .p-index-contact__title {
    font-size: 5.6vw;
  }
  .p-index-contact__text {
    margin-top: 5.3vw;
    margin-bottom: 8vw;
    padding-inline: 5.33%;
    font-size: 3.7vw;
    text-align: left;
  }

  /*-------company----*/
  .p-index-company {
    padding-block: 10.6vw 13.3vw;
  }
  .p-index-company__en {
    font-size: 16vw;
  }
  .p-index-company__title {
    margin-bottom: 8vw;
    font-size: 5.6vw;
  }
  .p-index-company .c-deftable {
    gap: 5.3vw;
    margin-bottom: 8vw;
  }

  /*-------map----*/
  .p-index-map {
    height: 160vw;
  }
}
/* CSS Document */