/* ファーストビュー（角丸の写真が 5 秒ごとに入れ替わる。四隅に葉の形の色面、左に縦書きのコピー） */
.hero { position: relative; height: clamp(480px, 50vw, 720px); }
.hero__inner { position: relative; width: 89.5833%; height: 100%; margin: 0 auto; }
.hero__slide { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; }
.hero__list li { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero__list li.is-active { opacity: 1; z-index: 1; }
.hero__list img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__list { position: absolute; inset: 0; }
.hero__list li:nth-child(1) img { object-position: 50% 40%; }
.hero__list li:nth-child(2) img { object-position: 50% 35%; transform: scale(1.2); transform-origin: left center; }
.hero__list li:nth-child(3) img { object-position: 50% 40%; }
/* コピーが読めるよう、左側だけ白く明るくする */
.hero__list::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 30%, rgba(255, 255, 255, 0) 52%);
}
.f-mid { fill: var(--mid); }
.f-light { fill: #a9c48a; opacity: 0.85; }
.f-white { fill: rgba(255, 255, 255, 0.55); }

/* 左下の送るボタン（白い四角） */
.hero__arrows { position: absolute; bottom: 0; left: 0; z-index: 3; display: flex; }
.hero__prev, .hero__next {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 64px;
  background: var(--white);
  color: var(--deep);
}
.hero__next { border-radius: 0 0.625rem 0 0; }
.hero__prev::before { content: ""; position: absolute; top: 50%; right: -1px; width: 2px; height: 37.5%; background: var(--rule); transform: translateY(-50%); }
.hero__prev::after, .hero__next::after { content: ""; display: block; width: 0.625rem; height: 0.625rem; transform: rotate(45deg); }
.hero__prev::after { border-bottom: 2px solid; border-left: 2px solid; }
.hero__next::after { border-top: 2px solid; border-right: 2px solid; }
.hero__prev:focus-visible, .hero__next:focus-visible { outline: 3px solid var(--deep); outline-offset: -3px; }

/* コピー（横書き。明朝の見出しに、小さな見出しと短い文を添える） */
.hero__txt {
  position: absolute;
  top: 50%;
  left: 7.5%;
  z-index: 3;
  transform: translateY(-50%);
  pointer-events: none;
}
.hero__label {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--deep);
}
.hero__label span { padding-left: 1em; border-left: 1px solid currentColor; font-weight: 500; }
.hero__lead {
  font-family: var(--f-min);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.hero__sub {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.08em;
}

/* 左の縦書きのコピーライト */
.hero__copy {
  position: absolute;
  top: 50%;
  left: 2.0833%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--f-en); font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  white-space: nowrap;
}

/* お知らせ（PC はファーストビューの下端に重なる白い丸い帯。5 秒ごとに入れ替わる） */
.news { position: relative; z-index: 5; margin-top: -102px; padding-bottom: 24px; pointer-events: none; }
.news__list, .news__more { pointer-events: auto; }
.news__inner { width: 89.5833%; margin: 0 auto; }
.news__ttl {
  margin-left: 208px;
  font-family: var(--f-en);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 2.85;
  letter-spacing: 0.1em;
  color: var(--white);
}
.news__list {
  position: relative;
  max-width: 480px;
  height: 40px;
  margin-left: 192px;
  padding: 0 32px;
  border-radius: 9999px;
  background: var(--white);
  box-shadow: var(--shadow);
  font-size: 0.9375rem;
}
.news__list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5rem;
  width: 0.5rem;
  height: 0.5rem;
  margin: auto;
  border-top: 2px solid var(--mid);
  border-right: 2px solid var(--mid);
  transform: rotate(45deg);
  pointer-events: none;
}
.news__item { position: absolute; inset: 0 48px 0 32px; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.news__item.is-active { opacity: 1; visibility: visible; }
.news__item a { display: flex; align-items: center; gap: 1em; width: 100%; white-space: nowrap; overflow: hidden; transition: color 0.4s ease-out; }
.news__item a:hover { color: var(--deep); }
.news__item time { font-family: var(--f-en); font-weight: 600; letter-spacing: 0.08em; flex: none; }
.news__item span { overflow: hidden; text-overflow: ellipsis; }
.news__more { display: none; }

/* 1080px 以下（タブレット）：写真の高さを詰める */
@media (max-width: 1080px) {
  .hero { margin-top: 30px; }
  .hero__inner { width: 90%; }
  .hero__txt { left: 6%; }
  .hero__lead { font-size: 2.125rem; }
  .news__inner { width: 90%; }
  .news__ttl { margin-left: 176px; }
  .news__list { margin-left: 160px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .news__ttl { margin-left: 128px; }
  .news__list { margin-left: 112px; max-width: 440px; }
}

/* スマホ：縦長の写真。コピーは右上、お知らせは下に一覧で並べる */
@media (max-width: 767px) {
  .hero { height: 576px; margin-top: 0; padding-top: 7vw; }
  .hero__inner { width: 86%; }
  .hero__slide { border-radius: 1rem; }
  .hero__prev, .hero__next { width: 56px; height: 52px; }
  .hero__txt { top: auto; bottom: 76px; left: 7%; right: 7%; transform: none; }
  .hero__label { margin-bottom: 0.875rem; font-size: 0.75rem; }
  .hero__lead { font-size: 1.625rem; }
  .hero__sub { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.85; }
  .hero__copy { display: none; }
  /* スマホは写真の人物を上に、コピーのある下側を明るくする */
  .hero__list li:nth-child(1) img { object-position: 62% 50%; transform: none; }
  .hero__list li:nth-child(2) img { object-position: 62% 50%; transform: none; }
  .hero__list li:nth-child(3) img { object-position: 90% 50%; transform: none; }
  .hero__list::after { background: linear-gradient(0deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.7) 34%, rgba(255, 255, 255, 0) 60%); }

  .news { margin-top: 0; padding-top: 40px; padding-bottom: 0; }
  .news__inner { width: 86%; }
  .news__ttl { margin: 0; font-size: 1.7143rem; line-height: 2.85; text-align: center; color: var(--deep); }
  .news__list { height: auto; max-width: none; margin: 0 0 24px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0.9375rem; }
  .news__list::after { display: none; }
  .news__item { position: relative; inset: auto; display: block; opacity: 1; visibility: visible; border-bottom: 1px solid var(--rule); }
  .news__item:first-child { border-top: 1px solid var(--rule); }
  .news__item a { position: relative; display: block; padding: 1em 2.5em 1em 0; white-space: normal; }
  .news__item a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.5rem;
    width: 0.5rem;
    height: 0.5rem;
    margin: auto;
    border-top: 2px solid var(--mid);
    border-right: 2px solid var(--mid);
    transform: rotate(45deg);
  }
  .news__item time { display: block; margin-bottom: 0.5em; }
  .news__item span { display: block; }
  .news__more { display: block; text-align: center; }
}