/* ==========================================================================
   SPIRITS 側の見た目の上書き（試作 2026-09-25 master 依頼）
   大庭さんの CSS は触らず、ここで上書きする。読み込みは inc/spirits-fixes.php。

   ページ上部の大見出しが写真に重なっても読めるよう、文字の周りに白い縁取り（3px）を付ける。
   ========================================================================== */
.p-first__mv-title,
.p-first__mv-eyebrow,
/* 「ご成婚5,000組以上」（トップ・成婚実績）。オレンジの線の上でも数字が途切れず読めるよう、
   大庭さんの 8 方向の縁（隙間が出る）を 16 方向の縁に置き換える（2026-09-25 master 決定） */
.p-front__achievement-title,
.p-front__achievement-count,
.p-front__achievement-count em {
	text-shadow:
		 3px  0   0 #fff,
		-3px  0   0 #fff,
		 0    3px 0 #fff,
		 0   -3px 0 #fff,
		 2px  2px 0 #fff,
		-2px  2px 0 #fff,
		 2px -2px 0 #fff,
		-2px -2px 0 #fff,
		 3px  1.5px 0 #fff,
		-3px  1.5px 0 #fff,
		 3px -1.5px 0 #fff,
		-3px -1.5px 0 #fff,
		 1.5px  3px 0 #fff,
		-1.5px  3px 0 #fff,
		 1.5px -3px 0 #fff,
		-1.5px -3px 0 #fff;
}

/* 「ご成婚5,000組以上」の後ろに白いぼかしを敷き、数字のまわりだけオレンジの線を薄くする
   （「0」の内側に見える線も目立たなくする。線そのものは残す。2026-09-25 master 試し） */
.p-front__achievement-count {
	position: relative;
}

/* ぼかしが囲みからはみ出しても、囲みの中身がずれて上の見出しが見切れないようにする
   （overflow: hidden は中身をスクロールで動かせてしまうため clip にする） */
.p-front__achievement-head {
	overflow: clip;
}

.p-front__achievement-count::before {
	content: "";
	position: absolute;
	inset: -12% -6%;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95) 35%, rgba(255, 255, 255, .75) 55%, rgba(255, 255, 255, 0) 72%);
	pointer-events: none;
}

/* トップのメインビジュアルのスライドショー（js/spirits-mv-slideshow.js が後から重ねる画像）
   大庭さんの最初の画像はそのまま置き、同じ大きさの画像を上に重ねてフェードで切り替える */
.p-front__mv-image.is-spirits-slideshow {
	position: relative;
	overflow: hidden;
}

.p-front__mv-image .spirits-mv-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
	pointer-events: none;
}

.p-front__mv-image .spirits-mv-slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.p-front__mv-image .spirits-mv-slide {
		display: none;
	}
}

/* 会社概要「ストーリー」: 2026-09-25 版で PC 表示が 840px からになり、画像の列（624px 固定）と
   左の余白 91px が 840〜1100px 前後の画面からはみ出して横スクロールが出るため、画像の列を画面に合わせて縮める。
   1100px 以上の見た目は大庭さん版と同じ。 */
@media (min-width: 840px) {
	.p-company__story-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 624px);
	}
}
@media (min-width: 840px) and (max-width: 1099px) {
	.p-company__story-inner {
		padding-left: 40px;
	}
}

/* パンくずは独立した帯を作らず、直後のファーストビュー上へ重ねる。 */
.breadcrumb {
  position: relative;
  z-index: 10;
  height: 0;
  background: transparent;
}
.breadcrumb__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}
.breadcrumb__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  color: var(--color-text-body);
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}
.breadcrumb__list::-webkit-scrollbar { display: none; }
.breadcrumb__item { flex: 0 0 auto; white-space: nowrap; }
.breadcrumb__item a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
/* 写真のないページは、パンくずの下に見出し用の余白を確保する。 */
.breadcrumb + :is(.p-legal, .p-sitemap, .p-404, .p-news-single),
.breadcrumb + .p-login > .p-login__mv,
.breadcrumb + .p-news > .p-news__list { padding-top: 72px; }
@media (min-width: 840px) {
  .breadcrumb + :is(.p-legal, .p-sitemap, .p-404, .p-news-single),
  .breadcrumb + .p-login > .p-login__mv,
.breadcrumb + .p-news > .p-news__list { padding-top: 96px; }
}

/* 2026-09-28 トップで採用した表示ルールを同じ構造の下層へ展開。 */
body:not(.home) .c-button {
  box-sizing: border-box; max-width: 100%; min-width: 0; line-height: 1.6;
}
body:not(.home) .c-button::after { flex-shrink: 0; }
.c-button--archive { width: min(100%, 300px); padding: 12px 40px; }
@media (min-width: 840px) { .c-button--archive { width: min(100%, 340px); } }

/* リンクが一つだけのカード。画像・本文・余白もリンクにする。 */
body:not(.home) :is(.p-stories__item, .p-support__card, .p-about__card-item) {
  position: relative; min-width: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
body:not(.home) :is(.p-stories__more, .p-support__card-more, .p-about__card-more) a {
  position: static; color: var(--color-primary);
  border: 1px solid currentColor; border-radius: 4px;
  padding: 7px 14px; font: 700 12px/1.4 var(--font-base);
}
body:not(.home) :is(.p-stories__more, .p-support__card-more, .p-about__card-more) a::before {
  content: ""; position: absolute; inset: 0; z-index: 3; cursor: pointer;
}
body:not(.home) :is(.p-stories__item, .p-support__card, .p-about__card-item):focus-within {
  outline: 2px solid var(--color-primary); outline-offset: 3px;
}
@media (hover: hover) {
  body:not(.home) :is(.p-stories__item, .p-support__card, .p-about__card-item):hover {
    transform: translateY(-6px); box-shadow: 0 12px 28px rgba(26,19,17,.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.home) :is(.p-stories__item, .p-support__card, .p-about__card-item) { transition: none; }
  body:not(.home) :is(.p-stories__item, .p-support__card, .p-about__card-item):hover { transform: none; }
}

/* 記事カードの文字組みと自然な画像比率。 */
body:not(.home) .p-stories { grid-template-columns: minmax(0, 1fr); gap: 24px; }
body:not(.home) .p-about__cards { grid-template-columns: minmax(0, 1fr); gap: 24px; }
body:not(.home) .p-stories__body { padding: 20px; }
body:not(.home) .p-stories__title {
  font-family: var(--font-base); font-size: 18px; font-weight: 700;
  line-height: 1.65; letter-spacing: 0; text-wrap: pretty; line-break: strict;
}
body:not(.home) .p-stories__text {
  font-size: 14px; font-weight: 400; line-height: 1.8; margin-top: 12px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; text-wrap: pretty;
}
body:not(.home) :is(.p-stories__image, .p-about__card-image-top) img {
  display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
}
body:not(.home) .p-support__card-media img {
  display: block; width: 100%; height: auto; min-height: 0; object-fit: contain;
}
body:not(.home) :is(.p-support__card-media--pc, .p-support__card-media--sp) { height: auto; }
@media (min-width: 600px) and (max-width: 1023px) {
  body:not(.home) .p-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.home) .p-about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  body:not(.home) .p-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body:not(.home) .p-about__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) {
  body:not(.home) .p-support__card { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); }
  body:not(.home) .p-support__card-media--pc { display: block; }
  body:not(.home) .p-support__card-media--sp { display: none; }
  body:not(.home) .p-support__card-media { align-self: center; }
}

/* スタッフは責任者2名、他メンバーを分けた既存の構造を維持。 */
body:not(.home) :is(.p-staff-list__leads, .p-staff-list__team) {
  grid-template-columns: minmax(0, 360px); justify-content: center;
  margin-inline: auto; column-gap: 24px;
}
body:not(.home) .p-staff-list__team { row-gap: 62px; }
body:not(.home) :is(.p-staff-list__lead, .p-staff-list__team-item) { min-width: 0; }
body:not(.home) .p-staff-list__card { max-width: 100%; }
@media (min-width: 600px) {
  body:not(.home) :is(.p-staff-list__leads, .p-staff-list__team) { grid-template-columns: repeat(2, minmax(0, 360px)); }
}
@media (min-width: 1024px) {
  body:not(.home) .p-staff-list__team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 数字と単位は同じ行。見出しの意図した改行とPCの構図は維持する。 */
body:not(.home) .p-members__counts-title em { display: inline-block; white-space: nowrap; }
@media (max-width: 599px) {
  body:not(.home) .p-stories__body { padding: 18px; }
  body:not(.home) .p-stories__title { font-size: 17px; }
  body:not(.home) :is(.p-support__card-title, .p-about__card-heading, .p-flow__title) { text-wrap: pretty; line-break: strict; }
  body:not(.home) :is(.p-flow__text, .p-support__card-text, .p-about__card-lead) { text-wrap: pretty; line-height: 1.65; }
  body:not(.home) .p-flow__title { margin-top: 12px; }
  body:not(.home) .p-flow__text { margin-top: 6px; }
}

/* パンくずの領域を写真の上に確保し、長いFVの内容も切り取らない。 */
.p-first__mv {
  height: auto;
  min-height: 70vw;
  padding-bottom: 0;
}
.p-first__mv-inner {
  height: auto;
  min-height: inherit;
  padding: 48px var(--header-pad-sp) 24px;
}
@media (min-width: 840px) {
  .p-first__mv { min-height: 41vw; }
  .p-first__mv-inner { padding: 64px var(--header-pad-pc) 60px; }
}
/* 2026-09-29 大庭さん納品の画像を、現在の構造・スライド表示に統合。 */
.p-front__mv-image--pc, .p-front__mv-image--tb { display: none; }
.p-front__mv-image--sp { display: block; }
.p-front__mv-image img { height: auto; aspect-ratio: auto; }
.p-front__mv-image .spirits-mv-slide { height: 100%; object-fit: contain; }
@media (min-width: 600px) and (max-width: 839px) {
  .p-front__mv-image--tb { display: block; }
  .p-front__mv-image--pc, .p-front__mv-image--sp { display: none; }
}
@media (min-width: 840px) {
  .p-front__mv-image--pc { display: block; }
  .p-front__mv-image--tb, .p-front__mv-image--sp { display: none; }
}
img.km-network-diagram {
  display: block;
  width: 100%; max-width: 860px;
  height: auto; aspect-ratio: auto;
  object-fit: contain; margin: 24px auto 0;
}
.p-marriage__continue .km-marriage-comparison { display: block; }
.p-marriage__continue .km-marriage-comparison img { height: auto; aspect-ratio: 3969 / 1454; }
@media (max-width: 599px) {
  .p-marriage__continue .km-marriage-comparison img { aspect-ratio: 1994 / 2699; }
}
/* 集合写真の左端と上下が欠けないよう、納品画像の全体を表示。 */
.p-team .p-first__mv-bg img { aspect-ratio: auto; object-fit: contain; }

/* スマホ・タブレットはFVの画像切替と合わせてパンくずを写真の上へ分離。 */
@media (max-width: 839px) {
  .breadcrumb { height: auto; background: var(--color-bg); }
  .breadcrumb__inner { position: static; padding-block: 8px; }
  .breadcrumb__list { line-height: 18px; text-shadow: none; }
  .p-first__mv { min-height: max(0px, calc(70vw - 34px)); }
  .p-first__mv-inner { padding-top: 20px; }
  .breadcrumb + :is(.p-legal, .p-sitemap, .p-404, .p-news-single),
  .breadcrumb + .p-login > .p-login__mv,
  .breadcrumb + .p-news > .p-news__list { padding-top: 38px; }
}