@charset "utf-8";
/* =========================================================================
   components.css  ―  再利用コンポーネント (c-*)
   ========================================================================= */

/* -------------------------------------------------------------------------
   グローバルナビ  c-gnav
   ------------------------------------------------------------------------- */
.c-gnav { display: flex; align-items: center; gap: 4px; }
.c-gnav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-family: var(--f-mincho);
  font-size: 15px;
  font-weight: 400;
  color: var(--c-black);
  white-space: nowrap;
}
.c-gnav__link { color: inherit; }
.c-gnav__item--has-sub { padding: 0; }
.c-gnav__item--has-sub > .c-gnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
}
.c-gnav__item--has-sub > .c-gnav__link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  transform: translateY(-2px) rotate(45deg);
  flex-shrink: 0;
}
.c-gnav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 220px;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
  pointer-events: none;
}
.c-gnav__item--has-sub:hover .c-gnav__sub,
.c-gnav__item--has-sub:focus-within .c-gnav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.c-gnav__sub-link {
  display: block;
  padding: 9px 20px;
  font-family: var(--f-mincho);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--ls-text);
  line-height: 1.7;
  color: var(--c-black);
  transition: background var(--transition), color var(--transition);
}
.c-gnav__sub-link:hover {
  opacity: 1;
  background: rgba(119, 37, 43, 0.08);
  color: var(--c-brown);
}

/* -------------------------------------------------------------------------
   ボタン（枠線）  c-btn  ―  資料請求 / お問い合わせ
   Figma: border 1px #121212 / padding 7px 24px / 15px
   ------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 24px 8px;
  border: 1px solid var(--c-black);
  font-family: var(--f-mincho);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--ls-text);
  color: var(--c-black);
  background: transparent;
  white-space: nowrap;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
/* ホバー：色はそのまま、透明度を上げて薄く透ける（リンクと分かるように） */
.c-btn:hover { opacity: 0.55; }

/* 白枠（フッター等の暗背景上） */
.c-btn--light {
  border-color: var(--c-white);
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 60px;
  font-size: 18px;
  letter-spacing: var(--ls-text);
}
.c-btn--light:hover { background: rgba(255, 255, 255, 0.2); color: var(--c-white); }

/* -------------------------------------------------------------------------
   WordPress投稿エディタのボタン（Gutenberg: .wp-block-button）を
   テーマのボタンデザイン（c-btn）に統一する。
   WP標準の濃いグレー角丸ピルを打ち消し、本文（社長のおもい/ストーリー/ブログ等）
   に貼られたボタンを c-btn と同じ見た目にする。
   ※ 記事本文は白背景のため c-btn ベース（枠線＋濃色文字）。暗背景に置く場合は
     .wp-block-button--light を付与すると c-btn--light（白）になる。
   ------------------------------------------------------------------------- */
.wp-block-button { margin-block: 8px; }
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 24px 8px;
  border: 1px solid var(--c-black);
  border-radius: 0;
  background: transparent;
  color: var(--c-black);
  font-family: var(--f-mincho);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--ls-text);
  line-height: var(--lh-base);
  white-space: nowrap;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.wp-block-button__link:hover { opacity: 0.55; background: transparent; color: var(--c-black); }
/* 暗背景セクションに置く場合の白枠バリエーション（c-btn--light相当） */
.wp-block-button--light .wp-block-button__link {
  border-color: var(--c-white);
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 60px;
  font-size: 18px;
}
.wp-block-button--light .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.2); color: var(--c-white); opacity: 1; }

/* -------------------------------------------------------------------------
   テキストリンクボタン（下線）  c-btn-line  ―  「詳しくはこちら」
   Figma: 198px / text 16px + 下線
   ------------------------------------------------------------------------- */
.c-btn-line {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: 14vw;
  max-width: 100%;
}
.c-btn-line__label {
  font-family: var(--f-mincho);
  font-size: var(--fs-text);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-text);
  color: var(--c-black);
}
.c-btn-line__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-black);
}
.c-btn-line:hover { opacity: 1; }
.c-btn-line:hover .c-btn-line__line { background: var(--c-brown); }
.c-btn-line:hover .c-btn-line__label { color: var(--c-brown); }
/* 中央寄せ版 */
.c-btn-line--center { align-items: center; }
.c-btn-line--center .c-btn-line__label { text-align: center; }

/* -------------------------------------------------------------------------
   セクション見出し  c-section-title  ―  縦線 + 英字 + 和文
   Figma Frame52/296: 縦線51px / "Concept"(Playfair 16 brown) / 和文32px
   ------------------------------------------------------------------------- */
.c-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.c-section-title__line {
  width: 1px;
  height: 48px;
  background: var(--c-black);
}
.c-pagehead .c-section-title__line {
  display: none;
}
.c-section-title__en {
  font-family: var(--f-serif-en);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-en);
  color: var(--c-brown);
}
.c-section-title__ja {
  font-family: var(--f-mincho);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  color: var(--c-black);
}
@media screen and (max-width: 767px) {
  .c-section-title__line { height: 32px; }
  .c-section-title__en { font-size: 14px; }
}

/* -------------------------------------------------------------------------
   お知らせ1行  c-news  ―  日付 + NEW + 本文 + 矢印
   ------------------------------------------------------------------------- */
.c-news {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.c-news__date {
  font-family: var(--f-mincho);
  font-size: var(--fs-text);
  letter-spacing: var(--ls-text);
  white-space: nowrap;
}
.c-news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 20px;
  font-family: var(--f-serif-en);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #B7B7B7;
  border: 1px solid #B7B7B7;
}
.c-news__text {
  flex: 1;
  font-family: var(--f-mincho);
  font-size: var(--fs-text);
  letter-spacing: var(--ls-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-news__arrow { width: 31px; flex-shrink: 0; }
.arrow {
  position: relative;
  width: 30px;
  height: 10px;
}
.arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #121212;
  transform: translateY(-50%);
}
/* 上だけの斜め線 */
.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: #121212;
  transform-origin: right center;
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .c-news {flex-direction: column;}
  .c-news__date {font-size: 14px; }
  .c-news__tag {  padding: 1px 16px;}
  .c-news__text {  font-size: 14px;}
  .c-news__arrow { width: 20px; flex-shrink: 0; }
  .arrow {width: 20px;  height: 5px;}

}

/* -------------------------------------------------------------------------
   サブタイトル（小見出し）  c-subtitle  ―  英字 + 和文 横並び
   ------------------------------------------------------------------------- */
.c-subtitle {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.c-subtitle__en {
  font-family: var(--f-serif-en);
  font-size: 15px;
  color: var(--c-brown);
  letter-spacing: var(--ls-en);
}
.c-subtitle__ja {
  font-family: var(--f-mincho);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-title);
}

/* -------------------------------------------------------------------------
   施工事例 / 物件カード  c-card
   ------------------------------------------------------------------------- */
.c-card { position: relative; display: block; }
.c-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 380 / 280;
}
.c-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.c-card:hover .c-card__img img { transform: scale(1.05); }
.c-card__new {
  position: absolute;
  top: 8px; right: 8px;
  width: 48px;
}
/* 写真の下：カテゴリ色タグ ＋ タイトル（横並び） */
.c-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}
.c-card__tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 102px;
  padding: 2px 9px;
  font-family: var(--f-mincho);
  font-size: 16px;
  letter-spacing: var(--ls-text);
  color: var(--c-white);
  background: #acacb2;                    /* 新築（既定） */
  line-height: 2;
}
.c-card__tag--renovation { background: #b3a07a; }  /* 改築 */
.c-card__tag--kominka    { background: #5a4636; }  /* 古民家再生 */
.c-card__tag--reform     { background: #8c8c8c; }  /* リフォーム・その他 */
.c-card__tag--voice      { background: var(--c-brown); } /* お客様の声 */
.c-card__title {
  font-family: var(--f-mincho);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--ls-text);
  line-height: 1.6;
  color: var(--c-black);
}
.c-card__meta {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--c-gray-line);
  letter-spacing: var(--ls-text);
}
@media screen and (max-width: 767px) {
  .c-card__title {
  font-size: 16px;
}
}

/* -------------------------------------------------------------------------
   スライダー操作（3本線インジケータ）  c-slider-nav
   Figma: Slider Lines Container（3本の罫線）+ ラベル
   ------------------------------------------------------------------------- */
.c-slider-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-slider-nav__line {
  width: 64px; height: 1px;
  background: var(--c-gray-line);
  opacity: 0.5;
}
.c-slider-nav__line.is-active { opacity: 1; background: var(--c-black); }
.c-slider-nav__label {
  font-family: var(--f-serif-en);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
}

/* -------------------------------------------------------------------------
   フッターナビ（カラム見出し + 縦線 + 子リンク）  c-fnav
   ------------------------------------------------------------------------- */
.c-fnav__group { margin-bottom: var(--space-3); }
.c-fnav__head {
  font-family: var(--f-mincho);
  font-size: var(--fs-text);
  font-weight: 500;
  letter-spacing: var(--ls-text);
  color: var(--c-black);
  line-height: var(--lh-base);
}
.c-fnav__sub {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.c-fnav__sub::before {
  content: "";
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
}
.c-fnav__sub ul { 
  display: flex; 
  flex-direction: column; 
}
.c-fnav__sub ul li{ 
  list-style-type: "- ";
  color: #888888;
}
.c-fnav__sub a {
  font-family: var(--f-mincho);
  font-size: var(--fs-sm);
  color: var(--c-gray-line);
  letter-spacing: var(--ls-text);
  line-height: var(--lh-base);
}

/* -------------------------------------------------------------------------
   SNSアイコン
   ------------------------------------------------------------------------- */
.c-sns { display: flex; align-items: center; gap: 28px; }
.c-sns__ig  { width: 40px; }
.c-sns__yt  { width: 50px; }
.c-sns__line { width: 40px; }

/* -------------------------------------------------------------------------
   フッター CTA  c-fcta  ―  Figma 353:1904（背景画像 + 暗幕）
   ------------------------------------------------------------------------- */
.c-fcta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 24px 100px;
  background: url("../img/top/footer-cta-bg.jpg") center top -74px / cover no-repeat;
  color: var(--c-white);
  text-align: center;
}
.c-fcta::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.c-fcta__inner { position: relative; z-index: 1; }
.c-fcta__title {
  font-family: var(--f-mincho);
  font-size: var(--fs-lg); 
  font-weight: 600;
  letter-spacing: var(--ls-title);
}
.c-fcta__tel {
  font-family: var(--f-mincho);
  font-size: 48px; font-weight: 600;
  letter-spacing: var(--ls-title);
  color: var(--c-white) !important;
  -webkit-text-fill-color: var(--c-white);
}
/* iOSが電話番号を自動でタップ可能リンク化した際、独自色(灰)になるのを白へ強制 */
.c-fcta__tel a {
  color: var(--c-white) !important;
  -webkit-text-fill-color: var(--c-white) !important;
  text-decoration: none;
}
.c-fcta__time {
  font-family: var(--f-mincho);
  font-size: 18px; letter-spacing: var(--ls-text);
  margin-bottom: var(--space-7);
}
.c-fcta__btns {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

/* -------------------------------------------------------------------------
   フッター インフォ  c-finfo  ―  Figma 353:1906（テクスチャ背景）
   ------------------------------------------------------------------------- */
.c-finfo {
  position: relative;
  padding: 80px 24px;
  background: url("../img/top/footer-info-bg.jpg") center / cover no-repeat;
  color: var(--c-black);
}
.c-finfo__inner {
  max-width: 1112px;
  margin-inline: auto;
}
.c-finfo__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
}
.c-finfo__logo { width: 229px; margin-bottom: 21px; }
.c-finfo__address p {
  font-family: var(--f-mincho);
  font-size: var(--fs-text);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-text);
}
.c-finfo__address .is-tel { font-size: 21px; font-weight: 700; letter-spacing: 0.05em; }
.c-finfo__address + .c-sns { margin-top: var(--space-6); }
.c-finfo__nav { display: flex; gap: 40px; }
.c-finfo__copy {
  margin-top: 53px;
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-text);
}

@media screen and (max-width: 767px) {
  .c-fcta { 
    padding: 64px 20px; 
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .c-finfo__logo { width: 180px;}
  .c-fcta__tel { font-size: 34px; }
  .c-fcta__btns { flex-direction: column; gap: 24px; align-items: center; }
  .c-finfo__row { flex-direction: column; gap: var(--space-7); }
  .c-finfo__nav { display:none; }
  .c-finfo__address + .c-sns { justify-content: center; }
}

/* -------------------------------------------------------------------------
   下層ページ共通タイトル  c-pagehead（他のセカンドページにも流用）
   Figma: Main Image(和紙テクスチャ) + Frame52(縦線+英字+和文)
   ------------------------------------------------------------------------- */
.c-pagehead {
  background: url("../img/top/footer-info-bg.jpg") center / cover no-repeat;
  padding: 10vw 0 var(--space-9);
}
.c-pagehead__inner { display: flex; flex-direction: column; align-items: center; }

@media screen and (max-width: 767px) {
  .c-pagehead {
  padding-block: var(--space-9);
}
}

/* -------------------------------------------------------------------------
   カテゴリタブ  c-cattab  ―  Figma 437:3601（各200x54）
   ------------------------------------------------------------------------- */
.c-cattab {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 900px;
  margin-top: var(--space-6);
}
.c-cattab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 54px;
  padding-inline: 18px;
  border: 1px solid #cacaca;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--f-mincho);
  font-size: 15px;
  letter-spacing: var(--ls-text);
  color: var(--c-black);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.c-cattab__item:hover { background: var(--c-white); opacity: 1; }
.c-cattab__item.is-active {
  background: var(--c-brown);
  border-color: var(--c-brown);
  color: var(--c-white);
}

/* -------------------------------------------------------------------------
   ページネーション  c-pagination  ―  Figma 437:3619
   ------------------------------------------------------------------------- */
.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-9);
}
.c-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-family: var(--f-serif-en);
  font-size: 18px;
  color: var(--c-black);
  transition: background var(--transition);
}
.c-pagination a.page-numbers:hover { background: rgba(0, 0, 0, 0.05); opacity: 1; }
.c-pagination .page-numbers.current { background: var(--c-brown); color: var(--c-white); }
.c-pagination .page-numbers.prev,
.c-pagination .page-numbers.next { font-size: 13px; color: var(--c-black); }

@media screen and (max-width: 767px) {
  /* タブはSPで2列 */
  .c-cattab { flex-wrap: wrap; gap: 10px; }
  .c-cattab__item { flex: 0 0 calc(50% - 5px); }
}

/* -------------------------------------------------------------------------
   SPドロワー内 アコーディオンナビ  c-drawer-nav  ―  Figma 500:9323
   ------------------------------------------------------------------------- */
.c-drawer-nav { width: 100%; }
.c-drawer-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  border-bottom: 1px solid #ddd;
  font-family: var(--f-mincho);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-text);
  color: var(--c-black);
  text-align: left;
  background: none;
  cursor: pointer;
}
/* +/- トグル（押すと − に） */
.c-drawer-nav__toggle {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.c-drawer-nav__toggle::before,
.c-drawer-nav__toggle::after {
  content: "";
  position: absolute;
  background: var(--c-black);
  transition: opacity 0.25s ease;
}
.c-drawer-nav__toggle::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.c-drawer-nav__toggle::after  { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.c-drawer-nav__item.is-open .c-drawer-nav__toggle::after { opacity: 0; }
/* サブメニュー（開閉） */
.c-drawer-nav__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.c-drawer-nav__item.is-open .c-drawer-nav__sub { max-height: 600px; }
.c-drawer-nav__sub a {
  display: block;
  padding: 16px 16px 16px 48px;
  border-bottom: 1px solid #ddd;
  font-family: var(--f-mincho);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--ls-text);
  color: #6b6b6b;
}

/* -------------------------------------------------------------------------
   ハンバーガー（独自実装）  c-hamburger
   3本線＋Menu／開いたら×＋Close。hamburgers.min.css・style-custom.css に依存しない。
   PCは非表示（SPのみ表示）。
   ------------------------------------------------------------------------- */
.c-hamburger {
  display: none;            /* PCは非表示（下のSPメディアで表示） */
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.c-hamburger__box {
  position: relative;
  width: 34px;
  height: 18px;
}
.c-hamburger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-black);
  transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
}
.c-hamburger__bar:nth-child(1) { top: 0; }
.c-hamburger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.c-hamburger__bar:nth-child(3) { bottom: 0; }
/* 開いたとき＝× */
.c-hamburger.is-active .c-hamburger__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.c-hamburger.is-active .c-hamburger__bar:nth-child(2) { opacity: 0; }
.c-hamburger.is-active .c-hamburger__bar:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
/* ラベル Menu / Close（ドロワー開閉に直結） */
.c-hamburger__label {
  font-family: var(--f-serif-en);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--c-black);
}
.c-hamburger__label::after { content: "Menu"; }
body.is-drawer-open .c-hamburger__label::after { content: "Close"; }

/* TOPのFV上（未スクロール）は白、スクロール後（コンセプト辺り）／ドロワー開時は黒 */
body.is-home .c-hamburger__bar   { background: var(--c-white); }
body.is-home .c-hamburger__label { color: var(--c-white); }
body.is-home .l-header.is-scrolled .c-hamburger__bar   { background: var(--c-black); }
body.is-home .l-header.is-scrolled .c-hamburger__label { color: var(--c-black); }
body.is-drawer-open .c-hamburger__bar   { background: var(--c-black); }
body.is-drawer-open .c-hamburger__label { color: var(--c-black); }

@media screen and (max-width: 767px) {
  .c-hamburger { display: flex; }   /* SPのみ表示 */
}

/* -------------------------------------------------------------------------
   横線見出し  c-linetitle  ―  ─── 和文 ───（パッシブデザイン / その他の快適性 等）
   ------------------------------------------------------------------------- */
.c-linetitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.c-linetitle__line {
  width: 48px;
  height: 1px;
  background: var(--c-brown);
}
.c-linetitle__ja {
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: var(--ls-title);
  color: var(--c-black);
}
@media screen and (max-width: 767px) {
  .c-linetitle { gap: 16px; }
  .c-linetitle__line { width: 32px; }
  .c-linetitle__ja { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   ページ内アンカーナビ  c-anchnav  ―  下線 + 下矢印（コンセプト/パッシブ等へ）
   Figma 345:1373 アンカーリンク（各255x54）
   ------------------------------------------------------------------------- */
.c-anchnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 900px;
  margin-top: var(--space-7);
}
.c-anchnav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 255px;
  height: 54px;
  padding-inline: 18px;
  border-bottom: 1px solid #cacaca;
  font-family: var(--f-mincho);
  font-size: 16px;
  letter-spacing: var(--ls-text);
  color: var(--c-black);
  transition: color var(--transition), border-color var(--transition);
}
.c-anchnav__item_small{
  font-size: 15px;
}
.c-anchnav__item::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.c-anchnav__item:hover {
  opacity: 1;
  color: var(--c-brown);
  border-color: var(--c-brown);
}
@media screen and (max-width: 767px) {
  .c-anchnav { gap: 16px; padding: 0 var(--space-5); }
  .c-anchnav__item { width: 100%; }
}


/* -------------------------------------------------------------------------
   お知らせ・イベント カード  c-newscard  ―  Figma 485:6547 / 485:6561
   ------------------------------------------------------------------------- */
.c-newscard { display: flex; flex-direction: column; gap: 16px; }
.c-newscard__img { aspect-ratio: 353 / 265; overflow: hidden; background: #d9d9d9; }
.c-newscard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.c-newscard:hover { opacity: 1; }
.c-newscard:hover .c-newscard__img img { transform: scale(1.05); }
.c-newscard__body { display: flex; flex-direction: column; gap: 8px; }
.c-newscard__meta { display: flex; align-items: center; gap: 17px; }
.c-newscard__tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 10px;
  border: 1px solid #888;
  font-family: var(--f-mincho); font-size: 14px; line-height: 2; color: #888;
  white-space: nowrap;
}
.c-newscard__tag--event { border-color: var(--c-brown); color: var(--c-brown); }
.c-newscard__date {
  font-family: var(--f-mincho); font-size: 16px; letter-spacing: var(--ls-text); color: var(--c-black);
}
.c-newscard__title {
  font-family: var(--f-mincho); font-weight: 500; font-size: 16px; line-height: 1.7;
  letter-spacing: var(--ls-text); color: var(--c-black);
}
.c-newscard__event-date {
  font-family: var(--f-mincho); font-size: 16px; line-height: 2;
  letter-spacing: var(--ls-text); color: var(--c-brown);
}