/* ===== Hero (fixed height + parallax-safe) ===== */
/* 高さは ACF の .c-hero--h480/640/860/1020 */
.c-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* トラック＆スライド（フェード） */
.c-hero__track {
  position: relative;
  height: 100%;
}

/* スライド（背景画像方式） */
:root {
  --hero-fade-ms: 900ms;
}

.c-hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--hero-fade-ms) ease-out;
  pointer-events: none;
  z-index: 1;
  background-image: var(--bg);
  background-size: cover;
  /* フォーカス + パララックス（% + px の合成） */
  background-position: var(--fx, 50%) calc(var(--fy, 50%) + var(--pY, 0px));
  background-repeat: no-repeat;
}

.c-hero__slide.is-active {
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

/* 直前のスライドにだけ付く“退場”用クラス（念のためz-indexを低く） */
.c-hero__slide.is-leaving {
  opacity: 0;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__slide {
    transition: none;
  }
}

/* 高さ（ACF） */
.c-hero--h480 {
  height: 480px;
}

.c-hero--h640 {
  height: 640px;
}

.c-hero--h860 {
  height: 860px;
}

.c-hero--h1020 {
  height: 1020px;
}

/* ドット */
.c-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 999;
}

.c-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .45);
  transition: transform 150ms ease, background-color 150ms ease;
}

.c-hero__dot:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, .7);
}

.c-hero__dot.is-active {
  background: #fff;
  transform: scale(1.15);
}

.c-hero__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* a11y util */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ===== Responsive Adjustments ====== */
@media (min-width:1440px) {
  body.p-tfsc .c-hero .c-hero__slide {
    top: -6px;
  }
  .c-hero--h1020 {
    max-height: 980px;
  }
}

@media (max-width:1439px) {
  body.p-tfsc .c-hero .c-hero__slide {
    top: -8px;
  }
  .c-hero--h860, .c-hero--h1020 {
    max-height: 700px;
  }
}

@media (max-width:1239px) {
  body.p-tfsc .c-hero .c-hero__slide {
    top: -10px;
  }
  .c-hero--h640, .c-hero--h860, .c-hero--h1020 {
    max-height: 620px;
  }
}

@media (max-width:1079px) {
  body.p-tfsc .c-hero .c-hero__slide {
    top: -20px;
  }
  .c-hero--h640, .c-hero--h860, .c-hero--h1020 {
    max-height: 400px;
  }
}

@media (max-width:767px) {
  body.p-tfsc .c-hero .c-hero__slide {
    top: -30px;
  }
  .c-hero--h480, .c-hero--h640, .c-hero--h860, .c-hero--h1020 {
    max-height: 320px;
  }
}

/* 単枚モードはフェード無効（初期ちらつき防止） */
.c-hero[data-hero-single="true"] .c-hero__slide {
  transition: none;
  opacity: 1;
}

/* Hero中央タイトル */
.c-hero__titleWrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  place-items: center;
  pointer-events: none;
  z-index: 1000;
}

.c-hero__title, .c-hero__tagline {
  color: #fff !important;
  text-shadow: 2px 3px 3px rgba(33, 33, 33, 0.4);
}

.c-hero__title {
  margin: 0 0 .4em !important;
  padding: .4em .8em !important;
  font-size: clamp(16px, 3.6vw, 32px);
  line-height: 1.2;
  font-family: acumin-pro, sans-serif;
  font-style: normal;
  font-weight: 300;
  text-align: center;
  text-wrap: balance;
}

.c-hero__tagline {
  margin: 0 !important;
  padding: .2em .8em !important;
  font-family: acumin-pro, sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.5;
}

.c-hero__titleWrap>.c-hero__title:only-child {
  margin-bottom: 0 !important;
}

/* 他レイヤーからの影響を遮断 */
.c-hero__titleWrap {
  isolation: isolate;
}


.l-main:not(._nobBorder)  ~ .l-contents > .c-heading01 {
    margin-top: 190px
}

/* デフォルト：見出しの下にライン */
.c-heading01::after {
  display: block;
  width: 50px;
  height: 3px;
  margin: 11px auto 0;
  content: "";
  background: #2e5c99;
}

.c-heading01:has(+ .tagline)::after {
  display: none;
}

.c-heading01:has(+ .tagline) + .tagline::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin: 11px auto 0;
  background: #2e5c99;
}

.hide__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== 拡張タイトル（横中央／縦は --ty%） ===== */
.c-hero__xtWrap{
  position:absolute;
  left:50%;
  top: var(--ty, 20%);       /* 上から%で位置指定（デフォ30%） */
  transform: translateX(-50%);
  z-index:1000;
  pointer-events:none;
  text-align:center;
  padding-inline: 4vw;       /* 端のあふれ対策 */
}
@media screen and (max-width:1023px){
  .c-hero__xtWrap{
    padding-inline: 8vw; /* スマホ時はさらにあふれ対策 */
    width: 80%;
  }
}
@media screen and (max-width:767px){
  .c-hero__xtWrap{
    padding-inline: 8vw; /* スマホ時はさらにあふれ対策 */
    width: 100%;
  }
}

.c-hero__xt{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;                   /* 要素同士の最小間隔 */
  pointer-events:auto;       /* ここにリンク等を置く可能性があるなら */
}

/* カテゴリ（小） */
.c-hero__xtCat{
  display: inline-block;
  margin-bottom: .8em;
  padding: .4em 2.5em;
  text-align: center;
  min-width: fit-content;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
  line-height:1.2;
  letter-spacing:.06em;
  color:#000;
  /* text-transform:uppercase; */
  opacity:.9;
}

body.page-id-6817 .c-hero__xtCat,
body.elementor-page-6817 .c-hero__xtCat {
  background-color: rgb(0, 0, 0) !important;
  border: 1px solid rgba(0, 0, 0, 0.8);
  color: #fff !important;
}

.c-hero__xtDesc{
  margin:0 !important;
  padding:0 !important;
  font-family: var(--ff-base);
  font-size: clamp(14px, 2.4vw, 20px);
  font-weight: 300;
  line-height:1.15;
  color:#333;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.88);
  opacity:.95;
}

.c-hero__xtTitle{
  margin:0 !important;
  padding: 0 !important;
  font-family: var(--ff-base);
  font-size: clamp(16px, 3.6vw, 28px);
  line-height:1.25;
  color:#333;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.88);
  font-weight:600;
  text-wrap:balance;
}

/**** スライド任意クラスサンプル
*
******

/* スマホだけ左寄せ
@media (max-width: 767px){
  .c-hero__slide.hero-pos-sp-left { --fx: 30%; }
}

/* タブレットだけ上寄せ
@media (min-width: 768px) and (max-width: 1023px){
  .c-hero__slide.hero-pos-tab-top { --fy: 25%; }
}

/* スマホで右下寄せ
@media (max-width: 767px){
  .c-hero__slide.hero-pos-sp-right-bottom { --fx: 70%; --fy: 60%; }
}

/* スマホでズーム強め
@media (max-width: 768px){
  .c-hero__slide.hero-zoom-sp {
    transform: scale(1.1);
    transition: transform 1.5s ease;
  }
}

/* 右下に寄せ、淡くする
.c-hero__slide.hero-right-fade {
  --fx: 70%;
  --fy: 70%;
  opacity: 0.8;
}

/* 背景ぼかし
.c-hero__slide.hero-blur-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
}

***/


@media screen and (max-width:460px){
.sp_forcus_moved_prdtop01 {
  --fx: 10% !important;
  background-size:180%;
}
.sp_forcus_moved_ptnop01 {
  background-position: 20% 20% !important; /* 変数に負けない方法 */
  transform: scale(1.25);
  transition: transform 1.5s ease;
}
}