/* page-level additions (news list, salon gallery, stylist) */
/* =========================
   News一覧用の余白スタイル（デバッグ付き）
   ========================= */
.news-item {
  padding-top: 2.5rem !important;    /* 上下にたっぷり余白 */
  padding-bottom: 2.5rem !important;
  margin-bottom: 2.5rem !important;  /* アイテム同士の間隔 */
  border-bottom: 1px solid var(--border) !important;
	justify-content: center;
}

.news-item:last-of-type {
  margin-bottom: 0 !important;
}


.news-body p {
  margin-bottom: 0.9rem;
  line-height: 1.85;
}

/* 今いるページのメニューをオレンジにする */

/* 通常時の文字色 */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-page-ancestor > a {
  color: var(--accent);
}

/* 下のライン（ホバー時と同じ演出）も常時付ける */
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after,
.main-nav .current-page-ancestor > a::after {
  width: 100%;
  background-color: var(--accent);
}

/* ============================================
   サロンギャラリーのレイアウト
   ============================================ */
.salon-gallery {
  align-items: stretch;
}

.salon-gallery-left {
  position: relative;
  min-height: 300px;
}

@media (min-width: 768px) {
  .salon-gallery-left {
    height: 500px;
  }
  
  .salon-gallery-right {
    height: 500px;
    display: grid;
    grid-template-rows: 1fr 1fr;
  }
  
  .salon-gallery-right-item {
    height: 100%;
    min-height: 0;
  }
}

.salon-gallery-img {
  display: block;
  transition: transform 1s ease;
  -webkit-transition: transform 1s ease;
}

.salon-gallery-img:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .salon-gallery-left {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================
   サロンギャラリーの余白調整
   ============================================ */
@media (max-width: 767px) {
  .salon-gallery {
    margin-bottom: 6rem !important;
  }
}

/* ============================================
   サロンギャラリー画像の位置調整
   ============================================ */
.salon-gallery-top .salon-gallery-img,
.salon-gallery-img-top {
  object-position: center top;
  -webkit-object-position: center top;
}

/* より細かく調整する場合（顔が中央より上に来るように） */
.salon-gallery-img-top {
  object-position: center 20%;
  -webkit-object-position: center 20%;
}

/* ============================================
   スタイリスト画像のホバー効果
   ============================================ */
.stylist-image-wrapper {
  position: relative;
  overflow: hidden;
}

.stylist-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: transform 0.7s ease, filter 0.7s ease;
  -webkit-transition: transform 0.7s ease, -webkit-filter 0.7s ease;
}

.stylist-image-wrapper:hover .stylist-image {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

/* ============================================
   スタイリストプロフィールリンクのホバー効果
   ============================================ */
.stylist-profile-link {
  color: var(--foreground);
  border-bottom: 1px solid var(--foreground);
  transition: color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}

.stylist-profile-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ============================================
   スタイリストプロフィールリンクのホバー効果
   ============================================ */
.stylist-profile-link {
  color: var(--foreground);
  border-bottom: 1px solid var(--foreground);
  transition: color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}

.stylist-profile-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}