@charset "UTF-8";
/* ==========================================================================
   pages/home.css — トップページ（p-系）（SPD-v2）
   Figma: 誠信GLOCAL｜礎オメガ工法 / blue-ptn1（node 111:4314, PC 1600）
   ========================================================================== */

/* KV
   ========================================================================== */
.p-kv {
  position: relative;
  display: grid;
  align-content: end;
  min-block-size: 64rem;
  block-size: 100svh;
  max-block-size: 91.5rem;
  padding-block: calc(var(--header-h) + 2rem) 3.2rem;
  padding-inline: var(--inner-pad);
  overflow: hidden;
  color: var(--cl-wh);

  @media print, screen and (min-width: 640px) {
    min-block-size: 72rem;
    padding-block-end: 4rem;
    padding-inline: 4.8rem;
  }

  /* デスクトップは画面の高さぴったり（上限なし）。下限はコピーとTOPICSが収まる高さ */
  @media print, screen and (min-width: 1024px) {
    min-block-size: 56rem;
    max-block-size: none;
  }
}

.p-kv-bg {
  position: absolute;
  inset: 0;
  z-index: -1;

  & :is(img, video) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 62% center;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(69.4deg, rgb(11 31 47) 3.8%, rgb(23 48 92 / 0.45) 53%, rgb(25 61 23 / 0.5) 90.9%);
    mix-blend-mode: multiply;
  }
}

.p-kv-body {
  display: grid;
  gap: 1.6rem;
  max-inline-size: 68.2rem;

  @media print, screen and (min-width: 1024px) {
    gap: 2.4rem;
  }

  /* 写真は常時表示、コピーだけ読み込み時にふわっと出す（c-hero と同じ） */
  & > * {
    animation: hero-fade-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  & > :nth-child(2) { animation-delay: 0.2s; }
}

.p-kv-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-kv);
  font-weight: 600;
  letter-spacing: 0.0625em;
  line-height: 1.37;
}

.p-kv-lead {
  color: rgb(246 245 240 / 0.85);
  font-size: var(--fs-m);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.72;

  @media print, screen and (min-width: 1024px) {
    font-size: 1.8rem;
  }
}

.p-kv-topics {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-block-start: 3.2rem;

  /* タブレット（640〜1023）: コピーと同じ左揃え。間は 48px 前後（rem 流動） */
  @media print, screen and (min-width: 640px) {
    justify-self: start;
    gap: 2.4rem;
    margin-block-start: 5.8rem;
  }

  @media print, screen and (min-width: 1024px) {
    justify-self: end;
    margin-block-start: 0;
  }
}

/* 文字は 2026-10-07 の西辻さんの依頼で一回り（約1.2倍）大きく */
.p-kv-topicsLabel {
  flex: 0 0 auto;
  color: var(--cl-gold);
  font-family: var(--ff-en);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;

  @media print, screen and (min-width: 1024px) {
    font-size: 1.9rem;
  }
}

.p-kv-topicsList {
  display: grid;
  inline-size: 100%;

  @media print, screen and (min-width: 640px) {
    inline-size: 62rem;
  }
}

.p-kv-topicsItem {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease-t-slow), visibility var(--ease-t-slow);

  &.is-active {
    opacity: 1;
    visibility: visible;
  }

  & a {
    display: grid;
    gap: 0.8rem;
  }

  & time {
    color: var(--cl-gold);
    font-family: var(--ff-en);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;

    @media print, screen and (min-width: 1024px) { font-size: 1.4rem; }
  }

  & span {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;

    @media print, screen and (min-width: 1024px) { font-size: 1.7rem; }
  }
}

/* ABOUT
   ========================================================================== */
.p-about {
  position: relative;
  padding-block: 6rem;
  overflow: hidden;

  @media print, screen and (min-width: 640px) {
    padding-block: 10.6rem 15rem;
  }
}

.p-about-map {
  position: absolute;
  inset-block-start: -1rem;
  inset-inline-end: -18rem;
  inline-size: 45rem;
  opacity: 0.6;
  pointer-events: none;

  /* タブレット（640〜1023）: 縦積みなので、ピンの群れを見出しの右側に寄せる。
     いちばん下のピン（ベトナム）が段落の上に収まるよう 4rem 上げる */
  @media print, screen and (min-width: 640px) {
    inset-block-start: -5rem;
    inset-inline-end: -8.1rem;
    inline-size: 75.7rem;
    opacity: 1;
  }

  @media print, screen and (min-width: 1024px) {
    inset-block-start: -1rem;
    inset-inline: 50% auto;
    margin-inline-start: -58.7rem;
  }
}

.p-about-inner {
  position: relative;
  display: grid;
  gap: 4.8rem;

  /* PC：左右の列を同じ高さにそろえる（左の「会社概要」ボタンと、右の「代表挨拶」ボタンを同じ高さに置くため） */
  @media print, screen and (min-width: 1024px) {
    grid-template-columns: minmax(0, 66.8fr) minmax(0, 51.2fr);
    gap: 6rem;
    align-items: stretch;
  }
}

.p-about-main {
  display: grid;
  gap: 3.2rem;

  /* PC：ボタンを列の下端に置く */
  @media print, screen and (min-width: 1024px) {
    display: flex;
    flex-direction: column;
  }
}

.p-about-head {
  display: grid;
  gap: 1.6rem;
}

.p-about-en {
  color: var(--cl-key);
  font-family: var(--ff-en);
  font-size: var(--fs-display);
  font-weight: 400;
  letter-spacing: 0.014em;
  line-height: 1.2;
  white-space: nowrap;

  & span { font-weight: 300; }
}

.p-about-title {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: 0.058em;
  line-height: 1.36;
}

.p-about-text {
  font-size: var(--fs-m);
  letter-spacing: 0.05em;
  line-height: 1.85;
}

.p-about-btns {
  display: grid;
  gap: 1.6rem;
  padding-block-start: 1.6rem;

  /* 2列。列が狭いとき（PCの1024〜1279）は、ボタンを縮めて右の列にはみ出さないようにする */
  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
    max-inline-size: 60rem;
    padding-block-start: 2.4rem;

    & .c-btn { min-inline-size: 0; }
  }

  @media print, screen and (min-width: 1024px) { margin-block-start: auto; }
}

.p-about-ceo {
  display: grid;
  gap: 2.2rem;
  justify-items: start;

  /* タブレット（640〜1023）: 写真と、引用文＋ボタンの2カラム */
  @media print, screen and (min-width: 640px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4.8rem;
  }

  /* PC（1024〜）: 従来どおり右カラムに縦積み。列が高いときは写真が伸びて、ボタンは下端に来る */
  @media print, screen and (min-width: 1024px) {
    grid-template-columns: minmax(0, 1fr);   /* 写真が縦に伸びても、縦横比のせいで列が横に広がらないように */
    grid-template-rows: minmax(auto, 1fr) auto;
    align-items: normal;
    gap: 2.2rem;
    margin-block-start: 6.2rem;
  }
}

.p-about-ceoBody {
  display: grid;
  gap: 2.2rem;
  justify-items: start;
}

.p-about-ceoPhoto {
  inline-size: 100%;
  aspect-ratio: 573 / 350;
  max-inline-size: 100%;

  @media print, screen and (min-width: 1024px) { align-self: stretch; }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

.p-about-quote {
  display: grid;
  gap: 1.8rem;
  padding: 0.8rem 1.6rem;
  border-inline-start: 1px solid var(--cl-gold);

  & p {
    color: var(--cl-quote);
    font-family: var(--ff-serif);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-wrap: pretty;

    @media print, screen and (min-width: 1024px) { font-size: 1.8rem; }
  }

  & cite {
    color: var(--cl-gr);
    font-size: var(--fs-s);
    font-style: normal;
    letter-spacing: 0.1em;
    line-height: 1;
  }
}

.p-about-ceoBtn {
  margin-block-start: 2.4rem;
  min-inline-size: 30rem;
}

/* PICK UP
   ========================================================================== */
.p-pickup {
  padding-block: 4.8rem 6rem;
  background-color: var(--cl-bgpk);

  @media print, screen and (min-width: 640px) {
    padding-block: 4.8rem 7.2rem;
  }
}

.p-pickup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  margin-block-end: 2.4rem;
}

.p-pickup-viewport {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(var(--inner-pad) * -1);
    inline-size: 8rem;
    background-image: linear-gradient(90deg, rgb(224 225 230 / 0), var(--cl-bgpk) 92%);
    pointer-events: none;

    @media print, screen and (min-width: 640px) {
      inline-size: 16.7rem;
    }
  }
}

.p-pickup-track {
  display: grid;
  grid-auto-columns: 28rem;
  grid-auto-flow: column;
  gap: 1.6rem;
  margin-inline-end: calc(var(--inner-pad) * -1);
  /* 右端の余白は「トラックの幅 − カード1枚分」。最後のカードが左端まで動けるようにする
     （右端に寄ったままだと、右のフェード（::after）に隠れて最後まで見えない） */
  padding-inline-end: calc(100% + var(--inner-pad) - 28rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  &::-webkit-scrollbar { display: none; }

  /* カードの高さを揃える（li は行の高さに伸びるので、中のカードも li いっぱいに） */
  & > li { display: grid; }

  @media print, screen and (min-width: 640px) {
    grid-auto-columns: 38rem;
    gap: 2rem;
    padding-inline-end: calc(100% + var(--inner-pad) - 38rem);
  }
}

.p-pickup-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  scroll-snap-align: start;

  @media (any-hover: hover) {
    &:hover { opacity: 1; }
    &:hover img { scale: 1.05; }
  }
}

.p-pickup-media {
  position: relative;
  block-size: 15rem;
  overflow: hidden;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--ease-t-slow);
  }

  & span {
    position: absolute;
    inset-block-start: 1.6rem;
    inset-inline-end: 1.6rem;
    color: rgb(246 245 240 / 0.8);
    font-family: var(--ff-serif);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.24;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  @media print, screen and (min-width: 640px) {
    block-size: 18rem;
  }
}

.p-pickup-body {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 2rem 2.2rem 3.2rem;

  & p {
    color: var(--cl-gold);
    font-size: var(--fs-s);
    letter-spacing: 0.1em;
    line-height: 1.75;
  }

  & h3 {
    font-family: var(--ff-serif);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.6;

    @media print, screen and (min-width: 1024px) { font-size: 1.9rem; }
  }
}

/* BUSINESS
   ========================================================================== */
.p-business {
  padding-block: 6rem;

  @media print, screen and (min-width: 640px) {
    padding-block: 7.1rem 8.5rem;
  }
}

.p-business-head {
  display: grid;
  gap: 2rem;
  margin-block-end: 3.2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 7.6rem;
    margin-block-end: 5.5rem;
  }
}

.p-business-lead {
  font-size: var(--fs-m);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.p-business-grid {
  display: grid;
  gap: 0.8rem;

  @media print, screen and (min-width: 640px) {
    /* Figma の実寸（1段目 701／358.5／358.5、2段目 545／436.5／436.5、間隔8）の境界線を合成した5列 */
    grid-template-columns: 545fr 148fr 280.5fr 70fr 358.5fr;
    grid-template-rows: 33.3rem 25.2rem;
  }
}

.p-business-tile {
  position: relative;
  display: grid;
  align-content: end;
  min-block-size: 18rem;
  padding: 2rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--cl-wh);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(180deg, rgb(102 102 102 / 0), var(--cl-quote) 66.5%);
    mix-blend-mode: multiply;
  }

  & img {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--ease-t-slow);
  }

  @media (any-hover: hover) {
    &:hover { opacity: 1; }
    &:hover img { scale: 1.05; }
  }

  @media print, screen and (min-width: 640px) {
    min-block-size: 0;
    padding: 2.4rem;

    &:nth-child(1) { grid-column: 1 / 3; }
    &:nth-child(2) { grid-column: 3 / 5; }
    &:nth-child(3) { grid-column: 5 / 6; }
    &:nth-child(4) { grid-column: 1 / 2; }
    &:nth-child(5) { grid-column: 2 / 4; }
    &:nth-child(6) { grid-column: 4 / 6; }
  }
}

.p-business-num {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  margin-block-end: 1.2rem;
  color: rgb(228 216 168 / 0.9);
  font-family: var(--ff-en);
  line-height: 1;

  & span:first-child {
    font-size: 2.4rem;
    font-weight: 300;
    letter-spacing: 0.057em;

    @media print, screen and (min-width: 1024px) { font-size: 3.1rem; }
  }

  & span:last-child {
    font-size: 1.2rem;
    letter-spacing: 0.47em;

    @media print, screen and (min-width: 1024px) { font-size: 1.5rem; }
  }
}

.p-business-name {
  font-family: var(--ff-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;

  @media print, screen and (min-width: 1024px) {
    font-size: 2.7rem;

    &._l { font-size: 3.6rem; }
  }
}

/* METHOD（工法スライダー）
   ========================================================================== */
.p-method {
  position: relative;
  padding-block: 6rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--cl-wh);
  background-color: var(--cl-green-dk);

  @media print, screen and (min-width: 640px) {
    padding-block: 7.5rem 8.5rem;
  }
}

.p-method-bg {
  position: absolute;
  inset: 0;
  z-index: -1;

  & img {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 29% center;

    @media print, screen and (min-width: 640px) {
      inline-size: 75%;
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(88.4deg, rgb(5 44 45) 0.4%, rgb(5 47 43) 33.1%, rgb(10 36 56 / 0.23) 62.6%, rgb(5 42 47 / 0.05) 70%, rgb(5 42 47 / 0.05) 88.4%),
      linear-gradient(180deg, rgb(5 42 47 / 0.7) 0%, rgb(5 42 47 / 0) 22%, rgb(5 42 47 / 0.06) 54.8%, rgb(5 42 47 / 0.7) 86%, rgb(5 42 47 / 0.9) 100%);
  }
}

.p-method-head {
  display: grid;
  gap: 1.6rem;
  margin-block-end: 3.2rem;

  & p:last-child {
    font-size: var(--fs-m);
    letter-spacing: 0.02em;
    line-height: 1.75;
  }

  @media print, screen and (min-width: 640px) {
    gap: 2.4rem;
    margin-block-end: 4rem;
  }
}

.p-method-viewport {
  mask-image: linear-gradient(90deg, rgb(0 0 0) 70%, transparent 98%);

  @media print, screen and (min-width: 640px) {
    mask-image: linear-gradient(90deg, rgb(0 0 0) 55%, transparent 82%);
  }
}

.p-method-track {
  display: grid;
  grid-auto-columns: 26rem;
  grid-auto-flow: column;
  gap: 1.6rem;
  /* 右端の余白は「トラックの幅 − カード1枚分」。最後のカードが左端（マスクの外）まで動けるようにする
     （右端に寄ったままだと、右のマスクで薄くなって最後まで見えない） */
  padding-inline-end: calc(100% - 26rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  &::-webkit-scrollbar { display: none; }

  @media print, screen and (min-width: 640px) {
    grid-auto-columns: 33rem;
    gap: 2.4rem;
    padding-inline-end: calc(100% - 33rem);
  }
}

.p-method-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-card);
  color: var(--cl-txt-mute);
  scroll-snap-align: start;

  & figure {
    block-size: 18rem;
    overflow: hidden;

    @media print, screen and (min-width: 640px) { block-size: 22.7rem; }
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--ease-t-slow);
  }

  @media (any-hover: hover) {
    &:hover { opacity: 1; }
    &:hover img { scale: 1.05; }
  }
}

.p-method-body {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.6rem;

  & h3 {
    color: var(--cl-green);
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.75;
  }

  & p {
    font-size: 1.4rem;
    line-height: 1.7;

    @media print, screen and (min-width: 1024px) { font-size: 1.6rem; }
  }
}

.p-method-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.p-method-foot {
  display: grid;
  justify-items: center;
  gap: 4rem;
  margin-block-start: 1.8rem;

  @media print, screen and (min-width: 640px) {
    justify-items: start;

    & .c-sliderNav { justify-self: center; }
  }
}

.p-method-btn {
  inline-size: 100%;

  @media print, screen and (min-width: 640px) {
    inline-size: 48rem;
  }
}

/* DOCUMENTS
   ========================================================================== */
.p-docs {
  padding-block: 6rem;

  @media print, screen and (min-width: 640px) {
    padding-block: 8.5rem 9rem;
  }
}

.p-docs-head {
  display: grid;
  gap: 1.6rem;
  margin-block-end: 3.2rem;

  @media print, screen and (min-width: 640px) {
    margin-block-end: 4.4rem;
  }
}

.p-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
  }
}

/* 資料カード（カタログ・資料ページの .p-docCard と同じ見た目） */
.p-docs-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  block-size: 100%;
  padding: 1rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  transition: border-color var(--ease-t);

  /* 横長の資料も切らずに見せる */
  & figure {
    display: grid;
    place-items: center;
    aspect-ratio: 270 / 382;
    max-inline-size: 100%;
    overflow: hidden;
    background-color: var(--cl-bggr);
  }

  & figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    transition: scale var(--ease-t-slow);
  }

  @media (any-hover: hover) {
    &:hover {
      border-color: var(--cl-green-dk);
      opacity: 1;
    }

    &:hover figure img { scale: 1.04; }
  }

  @media print, screen and (min-width: 640px) {
    padding: 1.4rem 1.4rem 1.6rem;
  }
}

/* 資料名（下線でリンクと分かるように）＋右端に種類のアイコン */
.p-docs-name {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;

  & span {
    text-decoration: underline;
    text-decoration-color: var(--cl-ln-tag);
    text-underline-offset: 0.3em;
    transition: text-decoration-color var(--ease-t);
  }

  @media print, screen and (min-width: 1024px) { font-size: 1.4rem; }
}

@media (any-hover: hover) {
  .p-docs-card:hover .p-docs-name span { text-decoration-color: currentColor; }
}

.p-docs-icon {
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
}

.p-docs-more {
  display: flex;
  justify-content: center;
  margin-block-start: 4rem;

  @media print, screen and (min-width: 640px) {
    margin-block-start: 4.4rem;
  }
}

/* COMPANY + NEWS
   ========================================================================== */
.p-info {
  padding-block: var(--sp-sec);
  background-color: var(--cl-bggr);
}

.p-info-inner {
  display: grid;
  gap: 6rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: 1fr 1fr;
    gap: 8.8rem;
  }
}

.p-info-company {
  display: grid;
  align-content: start;
  gap: 3.2rem;

  @media print, screen and (min-width: 640px) {
    gap: 6.4rem;
  }
}

.p-info-links {
  border-block-start: 1px solid var(--cl-ln);

  & a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 5.6rem;
    padding-inline: 0.4rem;
    border-block-end: 1px solid var(--cl-ln);
    font-size: 1.4rem;
    letter-spacing: 0.06em;

    &::after {
      content: "→";
      color: var(--cl-gold);
    }
  }
}

.p-info-newsHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-block-end: 3.2rem;

  @media print, screen and (min-width: 640px) {
    margin-block-end: 5.3rem;
  }
}

.p-info-news {
  border-block-start: 1px solid var(--cl-ln);

  & a {
    display: grid;
    gap: 0.6rem;
    padding: 1.8rem 0.4rem;
    border-block-end: 1px solid var(--cl-ln);
  }

  & h3 {
    font-family: var(--ff-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.6;
  }
}

.p-info-newsMeta {
  display: flex;
  align-items: center;
  gap: 1rem;

  & time {
    color: var(--cl-gr);
    font-size: 1.3rem;
    letter-spacing: 0.06em;

    @media print, screen and (min-width: 1024px) { font-size: 1.4rem; }
  }

  & span {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--cl-ln-news);
    color: var(--cl-green);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    line-height: 1;
  }
}

/* RECRUIT
   ========================================================================== */
.p-recruit {
  border-block: 1px solid var(--cl-ln-card);

  @media print, screen and (min-width: 640px) {
    display: grid;
    grid-template-columns: 53.87% 1fr;
    min-block-size: 45.3rem;
  }
}

.p-recruit-photo {
  aspect-ratio: 862 / 453;
  max-inline-size: 100%;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media print, screen and (min-width: 640px) {
    aspect-ratio: auto;
  }
}

.p-recruit-body {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2.4rem;
  padding: 4rem var(--inner-pad) 4.8rem;
  overflow: hidden;
  isolation: isolate;

  @media print, screen and (min-width: 640px) {
    gap: 0;
    padding: 4rem 4.8rem;
  }
}

.p-recruit-mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -8rem;
  z-index: -1;
  inline-size: 24rem;
  translate: 0 -50%;

  @media print, screen and (min-width: 640px) {
    inset-inline-end: 0;
    inline-size: 34.7rem;
  }
}

.p-recruit-head {
  display: grid;
  gap: 0.8rem;

  & h2 {
    color: var(--cl-blue);
    font-family: var(--ff-serif);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1;

    @media print, screen and (min-width: 1024px) { font-size: 3rem; }
  }
}

.p-recruit-catch {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.037em;
  line-height: 1.3;

  @media print, screen and (min-width: 640px) {
    margin-block: 4.8rem 4.4rem;
  }

  @media print, screen and (min-width: 1024px) {
    font-size: 5.38rem;
  }
}

.p-recruit-btn {
  justify-self: start;
  min-inline-size: 32rem;
}

/* 印刷（SPD-v2 8章）
   ========================================================================== */
/* stylelint-disable declaration-no-important -- SPD-v2 で許可された例外（印刷・reduced-motion） */
@media print {
  @page { size: A4; margin: 12mm; }
  html { font-size: 55%; }
  body { inline-size: var(--inner-max); margin: 0 auto; }
  .header,
  .spnav,
  .c-sliderNav-btns { display: none !important; }
  .p-kv { block-size: auto; min-block-size: 0; padding-block-start: 8rem; }
  .p-kv-topicsItem { opacity: 1 !important; visibility: visible !important; }
  .p-pickup-track,
  .p-method-track { overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); padding-inline-end: 0; }
  .p-method-viewport { mask-image: none; }
  [class*="iv-"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  :is(section, figure, table) { break-inside: avoid; }
  :is(h2, h3) { break-after: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* stylelint-enable declaration-no-important */