@charset "UTF-8";

/* =========================================
   Design Tokens
   ========================================= */
:root {
  /* Color */
  --color-text: #282828;
  --color-bg: #fff;

  /* Font */
  --font-jp: "Noto Sans JP", "BIZ UDPGothic", sans-serif;
  --font-en: "Montagu Slab", serif;
  --font-maru: "Zen Maru Gothic", serif;

  /* Section spacing */
  --space-section-sm: 48px;
  --space-section-md: 80px;
  --space-section-lg: 120px;

  /* Header */
  --header-height: 84px;
  --header-logo-size: 200.54px;
  --header-nav-height: 74px;
  --header-total-height: 200px;

  /* Page head */
  --pageHead-bg: #eceff3;
  --pageHead-height-sp: 120px;
  --pageHead-height-pc: 152px;

  /* Footer */
  --footer-bg: #1f1f24;
  --footer-text: rgba(255, 255, 255, 0.7);
  --footer-text-strong: #fff;
  --footer-text-muted: rgba(255, 255, 255, 0.5);
}

/* =========================================
   Base
   ========================================= */
/* アンカーリンク (#xxx) で section にジャンプした際、固定ヘッダーぶんを差し引いた位置に着地させる。
   SP/TAB: スクロール後 84px / MV 状態 (87×87ロゴ) 111px の中間値 100px で着地調整
   PC: スクロール後の縮小ヘッダー (約 58px) + 余白 → 70px */
html {
  scroll-padding-top: 100px;
}

@media (min-width: 1025px) {
  html {
    scroll-padding-top: 70px;
  }
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* reset.cssのblanceだと右端までいかないで改行されるため。*/
h1, h2, h3, h4, h5, h6{
  text-wrap: wrap;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
@media(min-width: 650px){
a[href^="tel:"]{pointer-events: none;}
}
/* =========================================
   Layout: Inner (コンテンツ幅)
   ========================================= */
.l-inner {
  width: min(100% - 32px, 1112px);
  margin-inline: auto;
}

.l-inner--small {
  width: min(100% - 32px, 900px);
}

.l-inner--large {
  width: min(100% - 32px, 1200px);
}

.l-inner--news {
  width: min(100% - 32px, 1104px);
}

@media (min-width: 768px) {
  .l-inner{
    width: min(100% - 80px, 1112px);
  }
  .l-inner--large {
    width: min(100% - 80px, 1200px);
  }

  .l-inner--small {
    width: min(100% - 80px, 900px);
  }

  .l-inner--news {
    width: min(100% - 80px, 1104px);
  }
}

.sp-only{
  display: block;
}
@media (min-width: 768px) {
  .sp-only{
    display: none;
  }
}
.pc-only{
  display: none;
}
@media (min-width: 768px) {
  .pc-only{
    display: block;
  }
}

/* =========================================
   Header (l-header / header Block)
   ========================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: #fff;
}

.header__logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.header__logo-link {
  display: block;
  width: 60px;
  height: 60px;
  transition: width 0.25s ease, height 0.25s ease;
}

/* SP/TAB トップページのMV内のみロゴを87x87にし、MV通過後は60x60に戻す */
@media (max-width: 1024px) {
  body.page-top .header:not(.is-scrolled) .header__logo-link {
    width: 87px;
    height: 87px;
  }
}

.header__logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SP/TAB: ハンバーガーで開閉するフルスクリーンメニュー */
.header__nav {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 174px 32px 40px;
  overflow-y: auto;
  background-color: #dcdce2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.headerNav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
  width: 100%;
  max-width: 338px;
}

.header.is-open .header__nav {
  opacity: 1;
  visibility: visible;
}

/* SP メニューを開いた時は .c-tagFilter (sticky 時 z:200) より前面に出す */
.header.is-open {
  z-index: 250;
}

/* メニュー上段（ナビリンク + お問い合わせボタン） */
.headerNav__primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.headerNav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.headerNav__link {
  display: inline-block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #2d2d2d;
  transition: opacity 0.2s ease;
}

.headerNav__link:hover {
  opacity: 0.6;
}

/* お問い合わせボタン（SP メニュー内のみ。PC では非表示） */
.headerNav__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 80px;
  padding: 20px 56px;
  background-color: #e5c158;
  border-radius: 6px;
  transition: opacity 0.25s ease;
}

.headerNav__contact:hover {
  opacity: 0.85;
}

.headerNav__contact-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
  color: #282828;
  white-space: nowrap;
}

.headerNav__contact-icon {
  display: block;
  flex-shrink: 0;
  background-color: #282828;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.headerNav__contact-icon--mail {
  width: 18px;
  height: 14px;
  -webkit-mask-image: url('../img/common/icon-mail.svg');
  mask-image: url('../img/common/icon-mail.svg');
}

.headerNav__contact-icon--arrow {
  width: 12px;
  height: 9px;
  -webkit-mask-image: url('../img/common/icon-arrow-right.svg');
  mask-image: url('../img/common/icon-arrow-right.svg');
}

/* メニュー下段（区切り線 + SNS + フッター情報） */
.headerNav__secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.headerNav__divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #2d2d2d;
  opacity: 0.3;
}

/* SNS（SP メニュー内に表示。PC では非表示） */
.headerNav__social {
  display: flex;
  align-items: center;
  gap: 32px;
}

.headerNav__sns-link {
  display: inline-block;
}

.headerNav__sns-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: #2d2d2d;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: opacity 0.25s ease;
}

.headerNav__sns-link:hover .headerNav__sns-icon {
  opacity: 0.6;
}

.headerNav__sns-icon--instagram {
  -webkit-mask-image: url('../img/common/icon-instagram.svg');
  mask-image: url('../img/common/icon-instagram.svg');
}

.headerNav__sns-icon--facebook {
  -webkit-mask-image: url('../img/common/icon-facebook.svg');
  mask-image: url('../img/common/icon-facebook.svg');
}

.headerNav__sns-icon--x {
  -webkit-mask-image: url('../img/common/icon-x.svg');
  mask-image: url('../img/common/icon-x.svg');
}

/* フッター情報（プライバシーリンク + コピーライト。SP メニュー内のみ） */
.headerNav__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.headerNav__legal {
  display: flex;
  gap: 32px;
}

.headerNav__legal-link {
  display: inline-block;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #2d2d2d;
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.headerNav__legal-link:hover {
  opacity: 0.8;
}

.headerNav__copyright {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #2d2d2d;
}

/* iPhone SE（375×667）等、縦が短い端末向けの圧縮レイアウト */
@media (max-width: 1024px) and (max-height: 740px) {
  .header__nav {
    padding-top: 122px;
    padding-bottom: 36px;
  }

  .headerNav {
    gap: 48px;
  }

  .headerNav__primary {
    gap: 32px;
  }

  .headerNav__list {
    gap: 16px;
  }

  .headerNav__link {
    font-size: 16px;
  }

  .headerNav__secondary {
    gap: 24px;
  }

  .headerNav__divider {
    display: none;
  }
}

/* ハンバーガートグル（SP のみ表示） */
.header__toggle {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 40px;
  min-height: 40px;
  z-index: 1;
}

.header__toggleBar {
  position: relative;
  display: block;
  width: 38px;
  height: 15px;
  background-image: linear-gradient(#282828, #282828);
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.header__toggleBar::before,
.header__toggleBar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #282828;
  transition: top 0.3s ease, bottom 0.3s ease, transform 0.3s ease;
}

.header__toggleBar::before {
  top: 0;
}

.header__toggleBar::after {
  bottom: 0;
}

.header.is-open .header__toggleBar {
  background-size: 0 1px;
}

.header.is-open .header__toggleBar::before {
  top: calc(50% - 0.5px);
  transform: rotate(45deg);
}

.header.is-open .header__toggleBar::after {
  bottom: calc(50% - 0.5px);
  transform: rotate(-45deg);
}

/* PC*/
@media (min-width: 1025px) {
  .header {
    display: block;
    padding: 0;
    background-color: transparent;
    height: var(--header-total-height);
  }

  .header__logo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--header-logo-size);
    height: var(--header-total-height);
    padding: 29.861px;
    align-items: flex-start;
    background-color: transparent;
  }

  .header__logo-link {
    width: 140.819px;
    height: 140.279px;
  }

  .header__nav {
    position: absolute;
    inset: 0 0 auto var(--header-logo-size);
    height: var(--header-nav-height);
    padding: 30px 50px;
    justify-content: flex-end;
    overflow-y: visible;
    background-color: transparent;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .headerNav,
  .headerNav__primary {
    display: contents;
  }

  .headerNav__list {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }

  .headerNav__link {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: normal;
    color: var(--color-text);
    white-space: nowrap;
  }

  .headerNav__contact,
  .headerNav__secondary {
    display: none;
  }

  .header__toggle {
    display: none;
  }
}

/* Sticky logo（SP/TAB では非表示、PC でヒーロー通過後のみ表示） */
.header__stickyLogo {
  display: none;
}

/* =========================================
   Header sticky 状態（PC: ヒーロー通過後）
   ========================================= */
@media (min-width: 1025px) {
  .header.is-scrolled {
    height: auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 50px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    transition: background-color 0.25s ease;
  }

  /* スクロール後は元のロゴ配置とナビ配置を解除 */
  .header.is-scrolled .header__logo-wrap {
    display: none;
  }

  .header.is-scrolled .header__nav {
    position: static;
    inset: auto;
    height: auto;
    padding: 0;
  }

  .header.is-scrolled .headerNav__list {
    gap: 28px;
  }

  .header.is-scrolled .headerNav__link {
    font-size: 14px;
    line-height: 14px;
    color: #282828;
  }

  .header.is-scrolled .header__stickyLogo {
    display: block;
    width: 151px;
    height: 42px;
    flex-shrink: 0;
  }

  .header__stickyLogo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* SP/TAB：トップページ（.hero あり）では MV 表示中は透明、通過後（.is-scrolled）は白 */
@media (max-width: 1024px) {
  body:has(.hero) .header {
    background-color: transparent;
    transition: background-color 0.25s ease;
  }

  body:has(.hero) .header.is-scrolled {
    background-color: #fff;
  }
}

/* =========================================
   Page head (l-pageHead / pageHead Block)
   ========================================= */
.l-pageHead {
  display: flex;
  align-items: center;
  padding-block: 40px 32px;
  background-color: var(--pageHead-bg);
  margin-top: var(--header-height);
}

.pageHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.pageHead__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.pageHead__desc {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #8997aa;
}

.pageHead__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pageHead__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #496080;
}

.pageHead__en {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #496080;
}

.pageHead__ja {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* TAB */
@media (min-width: 768px) {
  .l-pageHead {
    padding-block: 32px;
  }

  .pageHead {
    gap: 20px;
  }

  .pageHead__heading {
    gap: 20px;
  }

  .pageHead__dot {
    width: 7px;
    height: 7px;
  }

  .pageHead__en {
    font-size: 15px;
    letter-spacing: normal;
  }

  .pageHead__ja {
    font-size: 32px;
    line-height: 1;
    letter-spacing: normal;
  }

  .pageHead__desc {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: normal;
  }
}

/* PC */
@media (min-width: 1025px) {
  .l-pageHead {
    padding-block: 40px;
    margin-top: var(--header-total-height);
  }

  .pageHead {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }

  .pageHead__heading {
    gap: 24px;
    flex-shrink: 0;
  }

  .pageHead__en {
    font-size: 16px;
  }

  .pageHead__ja {
    font-size: 38px;
  }

  .pageHead__desc {
    font-size: 15px;
  }
}

/* =========================================
   Breadcrumb (l-breadcrumb / breadcrumb Block)
   ========================================= */
.l-breadcrumb {
  padding-block: 12px;
}

.breadcrumb {
  /* flex をやめてインラインの文字組みにし、長いタイトルは右端で折り返す */
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #666;
}

.breadcrumb__item {
  display: inline;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  /* gap の代わりに区切り文字の左右マージンで間隔を確保 */
  margin: 0 8px;
  color: #999;
}

.breadcrumb__link {
  color: inherit;
  transition: opacity 0.2s ease;
  text-decoration: underline;
  overflow-wrap: break-word;
}

.breadcrumb__link:hover {
  opacity: 0.6;
}

.breadcrumb__current {
  color: #46668c;
  /* リンク同様インラインで流し、長い場合は右端で折り返して全文表示（省略なし） */
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .l-breadcrumb {
    padding-block: 16px;
  }

  .breadcrumb {
    font-size: 12px;
    /* 折り返した行どうしの間隔を確保（旧 line-height:1 は1行前提だった） */
    line-height: 1.6;
    letter-spacing: normal;
    color: #384559;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 8px;
    vertical-align: middle;
    background-color: currentColor;
    color: inherit;
    -webkit-mask-image: url('../img/common/icon-chevron.svg');
    mask-image: url('../img/common/icon-chevron.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}

/* =========================================
   Article head (記事詳細のタイトル部 / l-pageHead 内で使用)
   ========================================= */
.articleHead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.articleHead__title {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.5;
  color: #212933;
}

.articleHead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-block: 8px;
}

.articleHead__date {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 16px;
  color: rgba(0, 53, 128, 0.5);
  font-feature-settings: "lnum" 1, "pnum" 1;
}

@media (min-width: 1025px) {
  .articleHead {
    gap: 21px;
  }
}

/* =========================================
   Component: Category pill (c-category)
   カテゴリpill。
　　カテゴリごとに管理画面で色を設定する
   ========================================= */
.c-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background-color: #3c3c59;
  border-radius: 26px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  --c-category-dot: #7e67ff;
}

.c-category__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-category-dot);
  flex-shrink: 0;
}

/* =========================================
   Component: Tag pill (c-tag)
   ========================================= */
.c-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #b8c2cf;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  color: #496080;
}

.newsList .c-tag {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 1025px) {
  .newsList .c-tag {
    flex: 0 0 84px;
  }
}

/* =========================================
   Works article (実績詳細コンテンツ)
   ========================================= */
.worksDetail {
  margin-top: 40px;
  padding-bottom: 45px;
}

.worksDetail .detail__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.worksOverview {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: #2d2d2d;
}

.worksOverview > p + p {
  margin-top: 2em;
}

.worksOverview strong {
  font-weight: 700;
}

/* Related works */
.relatedWorks {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid #496080;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.relatedWorks__heading {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: clamp(24px, 4.5vw, 38px);
  line-height: 1;
  color: #212933;
}

.relatedWorks__list {
  width: 100%;
}

.relatedWorks__more {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Component: もっと見る (c-btnMore) */
.c-btnMore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text);
}

.c-btnMore__label {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.c-btnMore__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.c-btnMore:hover .c-btnMore__label::after {
  width: 100%;
}

.c-btnMore__circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: var(--color-text);
  border: 1px solid var(--color-text);
  transition: background-color 0.3s ease;
}

.c-btnMore__circle::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  -webkit-mask-image: url('../img/common/icon-arrow-sm.svg');
  mask-image: url('../img/common/icon-arrow-sm.svg');
  -webkit-mask-size: 10px 7.5px;
  mask-size: 10px 7.5px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.3s ease;
}

.c-btnMore:hover .c-btnMore__circle {
  background-color: #fff;
}

.c-btnMore:hover .c-btnMore__circle::before {
  background-color: var(--color-text);
}

/* TAB */
@media (min-width: 768px) {
  .worksDetail {
    margin-top: 56px;
    padding-bottom: 80px;
  }

  .worksDetail .detail__body {
    gap: 32px;
  }

  .worksOverview {
    font-size: 16px;
  }

  .relatedWorks {
    margin-top: 72px;
    padding-top: 48px;
    gap: 48px;
  }
}

/* PC */
@media (min-width: 1025px) {
  .worksDetail {
    margin-top: 64px;
  }

  .worksDetail .detail {
    max-width: 900px;
    margin-inline: auto;
    gap: 48px;
  }

  .worksDetail .detail__body {
    max-width: 800px;
    margin-inline: auto;
    gap: 24px;
  }

  .relatedWorks {
    margin-top: 64px;
    padding-top: 80px;
    gap: 80px;
  }

  .relatedWorks__list {
    gap: 48px 16px;
  }
}

/* =========================================
   Works index (実績一覧)
   ========================================= */
.worksIndex {
  margin-top: 40px;
  padding-bottom: 48px;
}

/* SP＆TAB only filter (PC は別タグフィルター c-tagFilter を使用) */
.worksFilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 16px;
  margin-bottom: 16px;
}

.worksFilter__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 1px solid #b8c2cf;
  border-radius: 999px;
  background-color: #fff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #496080;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.worksFilter__pill:hover {
  background-color: #f5f7fa;
}

.worksFilter__pill.is-active {
  background-color: #496080;
  border-color: #496080;
  color: #fff;
}

@media (min-width: 1025px) {
  .worksFilter {
    display: none;
  }
}

.worksGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

/* 空状態: グリッド全幅に広げて中央表示 */
.worksGrid__item--empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 32px 16px;
}

.worksGrid__empty {
  margin: 0;
  text-align: center;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.8;
  color: #4d4d4d;
}

.worksGrid + .pagination {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .worksGrid + .pagination {
    margin-top: 56px;
  }
}

/* Component: Works card (c-worksCard) */
.c-worksCard {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  color: inherit;
}

.c-worksCard__thumbnail {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.c-worksCard__thumbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6) 84.5%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.4s ease;
}

.c-worksCard:hover .c-worksCard__thumbnail::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 65.98%);
}

.c-worksCard__thumbnail::after {
  content: "くわしく見る";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 20px 48px 20px 88px;
  background-color: #1c1c1c;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='13' cy='13' r='8'/><line x1='25' y1='25' x2='19' y2='19'/><line x1='13' y1='9' x2='13' y2='17'/><line x1='9' y1='13' x2='17' y2='13'/></svg>");
  background-repeat: no-repeat;
  background-position: 48px center;
  background-size: 32px 32px;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.c-worksCard:hover .c-worksCard__thumbnail::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.c-worksCard__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.c-worksCard:hover .c-worksCard__thumbnail img {
  transform: scale(1.105);
}

.c-worksCard__info {
  position: absolute;
  left: 7px;
  right: 21px;
  bottom: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
}

.c-worksCard__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.c-worksCard__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.c-worksCard__info .c-category {
  padding: 5px 8px;
  border-radius: 22px;
  background-color: #3c3c59;
  font-size: 9px;
  color: #d9d9d9;
  gap: 5px;
}

.c-worksCard__info .c-category__dot {
  width: 5px;
  height: 5px;
}

/* TAB */
@media (min-width: 768px) {
  .worksIndex {
    margin-top: 56px;
    padding-bottom: 80px;
  }

  .worksGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }

  .c-worksCard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    aspect-ratio: auto;
    overflow: visible;
  }

  .c-worksCard__thumbnail {
    position: relative;
    inset: auto;
    aspect-ratio: 360 / 270;
    border-radius: 2px;
  }

  .c-worksCard__info {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    gap: 20px;
    z-index: auto;
  }

  .c-worksCard__title {
    font-size: 16px;
    color: var(--color-text);
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
  }

  .c-worksCard__info .c-category {
    padding: 10px 12px;
    border-radius: 26px;
    background-color: #3c3c59;
    font-size: 13px;
    color: #fff;
    gap: 8px;
  }

  .c-worksCard__info .c-category__dot {
    width: 8px;
    height: 8px;
  }
}

/* PC */
@media (min-width: 1025px) {
  .worksIndex {
    margin-top: 64px;
  }

  .worksGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 16px;
  }
}

/* =========================================
   News article (お知らせ詳細コンテンツ)
   ========================================= */
.newsDetail {
  margin-top: 40px;
  padding-bottom: 48px;
}

.detail {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
}

.detail__main-image {
  width: 100%;
  aspect-ratio: 900 / 538;
  border-radius: 4px;
  overflow: hidden;
}

.detail__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__body {
  width: 100%;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  color: #2d2d2d;
}

.detail__body > * + * {
  margin-top: 0;
}

/* 段落・リストの基本余白 (トップレベルのみ。入れ子要素には別途指定) */
.detail__body > p + p,
.detail__body > p + ul,
.detail__body > p + ol,
.detail__body > ul + p,
.detail__body > ol + p,
.detail__body > ul + ul,
.detail__body > ol + ol,
.detail__body > ul + ol,
.detail__body > ol + ul {
  margin-top: 1em;
}

/* 見出しの上余白 (前に要素がある場合のみ。先頭は隣接セレクタ + により除外) */
.detail__body > * + h1,
.detail__body > * + h2 {
  margin-top: 2.5em;
}

.detail__body > * + h3,
.detail__body > * + h4 {
  margin-top: 2em;
}

.detail__body > * + h5,
.detail__body > * + h6 {
  margin-top: 1.5em;
}

/* 見出し直後の要素は近接させる (見出しと本文は意味的にセットなので狭め) */
.detail__body > h1 + *,
.detail__body > h2 + *,
.detail__body > h3 + *,
.detail__body > h4 + *,
.detail__body > h5 + *,
.detail__body > h6 + * {
  margin-top: 0.8em;
}

/* 見出し自身の行間調整 */
.detail__body h1,
.detail__body h2,
.detail__body h3,
.detail__body h4,
.detail__body h5,
.detail__body h6 {
  line-height: 1.5;
}

/* 画像ブロック (.wp-block-image) の上に別のコンテンツが続いている場合のみ上余白を付与。
   先頭ブロックには余白を付けない (隣接セレクタ + を使用) */
.detail__body > * + .wp-block-image {
  margin-top: 2em;
}

/* 画像ブロックの直後に続く要素に上余白を付与 (画像の下に空きを作る) */
.detail__body > .wp-block-image + * {
  margin-top: 1em;
}

.detail__body p a{
  text-decoration: underline;
}

.detail__body p a:hover{
  opacity: 0.6;
}

.detail__body ul {
  list-style: disc;
  padding-left: 24px;
}

.detail__body ol {
  list-style: decimal;
  padding-left: 24px;
}

/* 入れ子リスト: マーカーを階層ごとに変える */
.detail__body ul ul {
  list-style: circle;
}

.detail__body ul ul ul {
  list-style: square;
}

/* 入れ子リストは詰めて表示 (li 内に直接ぶら下がる ul/ol) */
.detail__body li > ul,
.detail__body li > ol {
  margin-top: 0.4em;
  margin-bottom: 0;
  padding-left: 20px;
}

/* リスト項目間の余白 */
.detail__body li + li {
  margin-top: 0.4em;
}

/* li 内の段落は通常のリスト見た目を維持 (上下余白をリセット) */
.detail__body li > p {
  margin: 0;
}

/* li 内に複数段落が並ぶ場合 (WP の余白ありリスト) */
.detail__body li > p + p {
  margin-top: 0.5em;
}

/* li 内の段落の直後に入れ子リストが来る場合の調整 */
.detail__body li > p + ul,
.detail__body li > p + ol {
  margin-top: 0.4em;
}

.detail__body a:not([class*="c-btn"]):not(.wp-block-button__link):not(.wp-element-button) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 引用ブロック */
.detail__body > * + .wp-block-quote,
.detail__body > * + blockquote {
  margin-top: 1.5em;
}

.detail__body > .wp-block-quote + *,
.detail__body > blockquote + * {
  margin-top: 1.5em;
}

.detail__body .wp-block-quote,
.detail__body blockquote {
  padding: 1em 1.25em;
  border-left: 3px solid #496080;
  background-color: #f5f7fa;
  font-style: normal;
  color: #4d4d4d;
}

.detail__body .wp-block-quote cite,
.detail__body blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #6b6b6b;
  font-style: normal;
}

/* コード (インライン / ブロック) */
.detail__body code {
  padding: 0.15em 0.4em;
  background-color: #f0f2f5;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.detail__body > * + .wp-block-code,
.detail__body > * + pre {
  margin-top: 1.5em;
}

.detail__body > .wp-block-code + *,
.detail__body > pre + * {
  margin-top: 1.5em;
}

.detail__body .wp-block-code,
.detail__body pre {
  padding: 1em 1.25em;
  background-color: #2d2d2d;
  color: #f5f5f5;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.6;
}

.detail__body .wp-block-code code,
.detail__body pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 0.9em;
}

/* テーブル */
.detail__body > * + .wp-block-table,
.detail__body > * + figure.wp-block-table,
.detail__body > * + table {
  margin-top: 1.5em;
}

.detail__body > .wp-block-table + *,
.detail__body > figure.wp-block-table + *,
.detail__body > table + * {
  margin-top: 1.5em;
}

.detail__body .wp-block-table,
.detail__body figure.wp-block-table {
  overflow-x: auto;
}

.detail__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.detail__body table th,
.detail__body table td {
  padding: 0.6em 0.9em;
  border: 1px solid #d6dbe2;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.detail__body table th {
  background-color: #f5f7fa;
  font-weight: 600;
}

/* 区切り線 */
.detail__body > * + hr,
.detail__body > * + .wp-block-separator {
  margin-top: 2em;
}

.detail__body > hr + *,
.detail__body > .wp-block-separator + * {
  margin-top: 2em;
}

.detail__body hr,
.detail__body .wp-block-separator {
  border: 0;
  border-top: 1px solid #d6dbe2;
}

/* ボタンブロック */
.detail__body > * + .wp-block-buttons,
.detail__body > * + .wp-block-button {
  margin-top: 1.5em;
}

.detail__body > .wp-block-buttons + *,
.detail__body > .wp-block-button + * {
  margin-top: 1.5em;
}

/* 埋め込み (YouTube / Twitter など) */
.detail__body > * + .wp-block-embed,
.detail__body > * + .wp-block-video,
.detail__body > * + .wp-block-audio,
.detail__body > * + .wp-block-file {
  margin-top: 1.5em;
}

.detail__body > .wp-block-embed + *,
.detail__body > .wp-block-video + *,
.detail__body > .wp-block-audio + *,
.detail__body > .wp-block-file + * {
  margin-top: 1.5em;
}

/* ギャラリー / カラム / メディアとテキスト */
.detail__body > * + .wp-block-gallery,
.detail__body > * + .wp-block-columns,
.detail__body > * + .wp-block-media-text,
.detail__body > * + .wp-block-group {
  margin-top: 2em;
}

.detail__body > .wp-block-gallery + *,
.detail__body > .wp-block-columns + *,
.detail__body > .wp-block-media-text + *,
.detail__body > .wp-block-group + * {
  margin-top: 2em;
}

/* 画像のキャプション */
.detail__body .wp-block-image figcaption,
.detail__body figure figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #6b6b6b;
  line-height: 1.6;
  text-align: center;
}

/* 強調 */
.detail__body strong,
.detail__body b {
  font-weight: 700;
}

.detail__body em,
.detail__body i {
  font-style: italic;
}

.detail__body mark {
  background-color: #fff3a8;
  padding: 0 0.15em;
}

.articleNav {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #496080;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.articleNav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4d4d4d;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  transition: opacity 0.25s ease;
}

.articleNav__link:hover {
  opacity: 0.45;
}

.articleNav__link.is-disabled {
  visibility: hidden;
}

.articleNav__arrow {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #9a9a9a;
  -webkit-mask-image: url('../img/common/icon-arrow-sm.svg');
  mask-image: url('../img/common/icon-arrow-sm.svg');
  -webkit-mask-size: 13.8px 10.35px;
  mask-size: 13.8px 10.35px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.25s ease;
}

.articleNav__arrow--prev {
  transform: rotate(180deg);
}

.articleNav__link:hover .articleNav__arrow {
  background-color: #496080;
}

/* Component: 一覧に戻るボタン (c-btnBack) */
.c-btnBack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 24px;
  border: 1px solid #b8c2cf;
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.c-btnBack__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url('../img/common/icon-back.svg');
  mask-image: url('../img/common/icon-back.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.c-btnBack:hover {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

/* 404ページ用：本文に続く戻るボタンの上余白 */
.c-btnBack--404 {
  margin-top: 30px;
}

/* Component: 通常ボタン (c-btnNomal) */
.c-btnNomal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 24px;
  border: 1px solid #b8c2cf;
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.c-btnNomal:hover {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

.c-btnNomal__icon {
  display: inline-block;
  width: 16px;
  aspect-ratio: 2/1;
  background-color: currentColor;
  -webkit-mask-image: url('../img/common/icon-arrow-right.svg');
  mask-image: url('../img/common/icon-arrow-right.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* TAB */
@media (min-width: 768px) {
  .newsDetail {
    margin-top: 56px;
    padding-bottom: 80px;
  }

  .detail {
    gap: 40px;
  }

  .detail__body {
    font-size: 16px;
  }

  .articleNav {
    margin-top: 40px;
    padding-top: 40px;
  }

  .c-btnBack {
    padding: 14px 40px;
    min-width: 171px;
  }
}

/* PC  */
@media (min-width: 1025px) {
  .newsDetail {
    margin-top: 64px;
  }

  .detail {
    max-width: 900px;
    margin-inline: auto;
    gap: 48px;
  }

  .detail__body {
    margin-inline: auto;
  }

  .articleNav {
    max-width: 900px;
    margin-inline: auto;
    margin-top: 64px;
    padding-top: 40px;
  }

  .articleNav__link {
    width: 100px;
  }
}

/* =========================================
   News index (お知らせ一覧)
   ========================================= */
.newsIndex {
  margin-top: 40px;
  padding-bottom: 48px;
}

.newsFilter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  width: 100%;
}

.newsFilter__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #b8c2cf;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #496080;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.newsFilter__pill:hover {
  background-color: #f5f7fa;
}

.newsFilter__pill.is-active {
  background-color: #496080;
  border-color: #496080;
  color: #fff;
}

.newsList {
  margin-top: 32px;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
}

.newsItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
  color: inherit;
  transition: border-color 0.3s ease;
}

.newsItem:hover {
  border-color: #6b6b6b;
}

.newsItem__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  transition: transform 0.3s ease;
}

.newsItem:hover .newsItem__body {
  transform: translateX(5px);
}

.newsItem__date {
  flex-shrink: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 16px;
  color: rgba(0, 53, 128, 0.5);
  font-feature-settings: "lnum" 1, "pnum" 1;
}

.newsItem__title {
  flex-basis: 100%;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #333;
}

.newsItem__arrow {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 27px;
  background-color: var(--color-text);
  -webkit-mask-image: url('../img/common/icon-arrow-sm.svg');
  mask-image: url('../img/common/icon-arrow-sm.svg');
  -webkit-mask-size: 13.8px 10.35px;
  mask-size: 13.8px 10.35px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.3s ease;
}

.newsItem:hover .newsItem__arrow {
  background-color: #496080;
}

/* Pagination */
/* Pagination (WordPress the_posts_pagination 出力に合わせる) */
.pagination {
  margin-top: 24px;
}

.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d9d9d9;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text);
  font-feature-settings: "lnum" 1, "pnum" 1;
  transition: border-color 0.25s ease, background-color 0.25s ease, font-weight 0.25s ease, color 0.25s ease;
}

a.page-numbers:hover {
  border-color: var(--color-text);
  background-color: #fafafa;
  font-weight: 600;
}

.page-numbers.current {
  background-color: #1c1c1c;
  border-color: #1c1c1c;
  color: #fff;
}

.page-numbers.dots {
  border: none;
}

.page-numbers.prev,
.page-numbers.next {
  border: none;
  color: #9a9a9a;
}

.page-numbers.prev svg,
.page-numbers.next svg {
  display: none;
}

.page-numbers.prev::before,
.page-numbers.next::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url('../img/common/icon-arrow-sm.svg');
  mask-image: url('../img/common/icon-arrow-sm.svg');
  -webkit-mask-size: 13.8px 10.35px;
  mask-size: 13.8px 10.35px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.page-numbers.prev::before {
  transform: rotate(180deg);
}

a.page-numbers.prev:hover,
a.page-numbers.next:hover {
  color: #496080;
  background-color: transparent;
  border: none;
  font-weight: 500;
}

/* TAB */
@media (min-width: 768px) {
  .newsIndex {
    margin-top: 56px;
    padding-bottom: 80px;
  }

  .newsItem {
    align-items: center;
    gap: 18px;
    min-height: 88px;
    padding: 16px 24px;
  }

  .newsItem__date {
    width: 80px;
  }

  .newsItem__title {
    flex-basis: auto;
    line-height: 1.6;
    letter-spacing: normal;
  }

  .pagination {
    margin-top: 56px;
    padding-bottom: 0;
  }
}

/* PC  */
@media (min-width: 1025px) {
  .newsIndex {
    margin-top: 64px;
  }

  .newsFilter {
    grid-template-columns: repeat(auto-fit, minmax(293px, 1fr));
  }

  .newsFilter__pill {
    height: 56px;
    border-radius: 0;
  }

  .newsFilter__pill.is-active {
    padding: 6px 16px;
  }

  .newsList {
    margin-top: 40px;
  }

  .newsItem {
    min-height: 92px;
    padding: 24px;
  }

  .newsItem__body {
    flex-wrap: nowrap;
  }
}

/* =========================================
   移行データのCSS移植
   ========================================= */
.detail__body .satoriseminar_schedule table{
  width: 100%;
	font-size:16px;
  border-collapse: collapse;
}

.detail__body .satoriseminar_schedule tr{
  border-bottom: solid 2px white;
}

.detail__body .satoriseminar_schedule th{
  font-weight: normal;
  vertical-align: top; 
  text-align: left;
  width: 100px;
  background-color: #3ab996;
  color: white;
  padding: 10px;
}

.detail__body .satoriseminar_schedule td{
  text-align: left;
  background-color: #eee;
  padding: 10px 20px;
}

.detail__body .satoriseminar_schedule td .in_btm1{background-color: #FF9933;
  color: #FFFFFF;
padding: 1px 5px;
line-height: 2;}
.detail__body .satoriseminar_schedule td .in_btm2{background-color: #FF5599;
  color: #FFFFFF;
padding: 1px 5px;
line-height: 2;}



@media screen and (max-width:650px) {
.detail__body .satoriseminar_schedule th,.satoriseminar_schedule td{display : block;
	width:100%;}
  .detail__body .stori_table th,
  .detail__body .stori_table td{
    display: block;
    width: 100%;
  }  
}


/*------ニュース内セミナー用-------*/


/* =========================================
   Section head (sectionHead / 共通セクション見出し)
   ========================================= */
.sectionHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.sectionHead__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sectionHead__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #496080;
}

.sectionHead__en {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1;
  color: #496080;
}

.sectionHead__ja {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 38px);
  line-height: 1;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .sectionHead {
    gap: 20px;
  }

  .sectionHead__en {
    font-size: 15px;
  }
}

@media (min-width: 1025px) {
  .sectionHead {
    gap: 24px;
  }

  .sectionHead__en {
    font-size: 16px;
  }
}

/* =========================================
   Hero (トップページ メインビジュアル)
   ========================================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 402 / 874;
  overflow-x: clip;
  overflow-y: visible;
}

.topBackdrop {
  position: relative;
  z-index: 50;
  --topBackdrop-angle: 190deg;
  --topBackdrop-stop-1: 26%;
  --topBackdrop-stop-2: 88%;
  background: linear-gradient(
    var(--topBackdrop-angle),
    #ffffff 0%,
    #ffffff var(--topBackdrop-stop-1),
    #f5f5f5 var(--topBackdrop-stop-1),
    #f5f5f5 var(--topBackdrop-stop-2),
    #ffffff var(--topBackdrop-stop-2),
    #ffffff 100%
  );
  -webkit-mask-image: linear-gradient(110deg, #000 50%, transparent 50%);
          mask-image: linear-gradient(110deg, #000 50%, transparent 50%);
  -webkit-mask-size: 400% 100%;
          mask-size: 400% 100%;
  -webkit-mask-position: 100% center;
          mask-position: 100% center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: -webkit-mask-position 0.5s cubic-bezier(0.7, 0, 0.84, 0),
                      mask-position 0.5s cubic-bezier(0.7, 0, 0.84, 0);
}

.topBackdrop.is-shown {
  -webkit-mask-position: 0% center;
          mask-position: 0% center;
}

/* prefers-reduced-motion 配慮: 即時表示 */
@media (prefers-reduced-motion: reduce) {
  .topBackdrop {
    transition: none;
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}

.topBackdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 240px 240px;
  -webkit-mask-image: linear-gradient(
    var(--topBackdrop-angle),
    transparent 0%,
    transparent var(--topBackdrop-stop-1),
    #000 var(--topBackdrop-stop-1),
    #000 var(--topBackdrop-stop-2),
    transparent var(--topBackdrop-stop-2),
    transparent 100%
  );
          mask-image: linear-gradient(
    var(--topBackdrop-angle),
    transparent 0%,
    transparent var(--topBackdrop-stop-1),
    #000 var(--topBackdrop-stop-1),
    #000 var(--topBackdrop-stop-2),
    transparent var(--topBackdrop-stop-2),
    transparent 100%
  );
}

@media (max-width: 767px) {
  .topBackdrop {
    --topBackdrop-stop-1: 25%;
    --topBackdrop-stop-2: 76%;
  }
}

/* 写真 */
.hero__photos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 402 / 874;
  pointer-events: none;
}

.hero__photo {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(165deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
          mask-image: linear-gradient(165deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: -webkit-mask-position 0.5s ease, mask-position 0.5s ease;
}

.hero__photos.is-shown .hero__photo {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

.hero__photos.is-shown .hero__photo--1 { transition-delay: 0.03s; }
.hero__photos.is-shown .hero__photo--2 { transition-delay: 0.22s; }
.hero__photos.is-shown .hero__photo--3 { transition-delay: 0.08s; }
.hero__photos.is-shown .hero__photo--4 { transition-delay: 0.12s; }
.hero__photos.is-shown .hero__photo--5 { transition-delay: 0.17s; }
.hero__photos.is-shown .hero__photo--6 { transition-delay: 0.27s; }
.hero__photos.is-shown .hero__photo--7 { transition-delay: 0.10s; }
.hero__photos.is-shown .hero__photo--8 { transition-delay: 0.15s; }
.hero__photos.is-shown .hero__photo--9 { transition-delay: 0.20s; }
.hero__photos.is-shown .hero__photo--10 { transition-delay: 0.25s; }

/* hero__photos のマスクアニメ完了後、テキスト群を左からふわっと表示 */
/* 横移動付きフェードイン (en / ja のみ) */
.hero__en,
.hero__ja {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* opacity のみのフェードイン (scrollDown)
   ※ scrollDown は子要素 (__ring/__arrow) の既存アニメに干渉しないよう transform 不使用 */
.hero__scrollDown {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.hero__tagFilterWrap .c-tagFilter {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

/* テキスト/UI 用 viewport 枠 (100dvh 以内に収める)
   写真群 (.hero__photos) は hero の aspect-ratio に追従させつつ、
   .hero__viewport で囲った 4 要素は viewport 高以下のエリアに配置されるため
   SP の縦長 hero でも常に画面内に収まる。
   ※ z-index は付けない (sticky 化した c-tagFilter が root 配置できるよう stacking context を作らない) */
.hero__viewport {
  position: absolute;
  inset: 0;
  max-height: 100dvh;
  pointer-events: none;
}
.hero__viewport > * {
  pointer-events: auto;
}

/* スマホ横向き (landscape) では max-height を解除 */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__viewport {
    max-height: none;
  }
}
/* scrollDown  (装飾) */
.hero__viewport > .hero__scrollDown {
  pointer-events: none;
}

.hero__photos.is-shown ~ .hero__viewport .hero__en,
.hero__photos.is-shown ~ .hero__viewport .hero__ja {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.80s;
}

.hero__photos.is-shown ~ .hero__viewport .hero__scrollDown {
  opacity: 1;
  transition-delay: 0.95s;
}

.hero__photos.is-shown ~ .hero__viewport .hero__tagFilterWrap .c-tagFilter {
  opacity: 1;
  transition-delay: 0.95s;
}

.hero__photos.is-shown ~ .hero__viewport .hero__ja { transition-delay: 0.90s; }

@media (prefers-reduced-motion: reduce) {
  .hero__en,
  .hero__ja,
  .hero__scrollDown,
  .hero__tagFilterWrap .c-tagFilter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* SP座標 */
.hero__photo--1 { left: 19.11%;  top: 1.72%;   width: 25.46%; }
.hero__photo--2 { left: -5.47%;  top: 77.46%;  width: 38.68%; }
.hero__photo--3 { left: -2.02%;  top: 22.43%;  width: 37.10%; }
.hero__photo--4 { left: 71.44%;  top: 43.36%;  width: 46.15%; display: none; }
.hero__photo--5 { left: 0;       top: 19%;  width: 141.75%; }
.hero__photo--6 { left: 29.68%;  top: 60.18%;  width: 63.78%; }
/* mask-7 (ピンク)*/
.hero__photo--7 { left: 4.73%;   top: 11.21%;  width: 38.15%; }
.hero__photo--8 { left: 21.64%;  top: 5.61%;   width: 62.28%; }
/* mask-9 (ブルー)*/
.hero__photo--9 { left: 52.99%;  top: -12.47%; width: 68.75%; }
/* mask-10 (グリーン) — 右端揃え (SP/PC 共通: right: 0) */
.hero__photo--10 { right: 0;     top: 34%;     width: 55%; }

/* iPhone SE 等の小型 SP (≤380px) */
@media (max-width: 380px) {
  .hero {
    aspect-ratio: 375 / 667;
  }

  .hero__photos {
    aspect-ratio: 375 / 667;
  }

  .hero__photo--1 { left: 20.13%;  top: 2.40%;   width: 23.32%; }
  .hero__photo--2 { left: -3.30%;  top: 67.11%;  width: 35.42%; }
  .hero__photo--3 { left: 0.77%;   top: 20.09%;  width: 33.98%; }
  .hero__photo--4 { left: 68.05%;  top: 37.98%;  width: 42.27%; }
  .hero__photo--5 { left: 0;       top: 15.26%;  width: 129.82%; }
  .hero__photo--6 { left: 29.81%;  top: 52.35%;  width: 58.42%; }
  .hero__photo--7 { left: 6.95%;   top: 10.51%;  width: 34.94%; }
  .hero__photo--8 { left: 22.45%;  top: 5.72%;   width: 57.04%; }
  .hero__photo--9 { left: 51.15%;  top: -9.73%;  width: 62.97%; }

  .hero__scrollDown {
    left: auto;
    right: 2%;
    top: 52.42%;
    width: 42.83%;
    max-width: 161px;
  }

  .hero__en {
    left: 57.60%;
    top: 22%;
    width: 40.80%;
  }

  .hero__ja {
    left: 2.67%;
    top: 43.73%;
    width: 80.53%;
  }

  /* iPhone SE  */
  body.page-top .header:not(.is-scrolled) .header__logo-link {
    width: 74px;
    height: 74px;
  }
}

.hero__scrollDown {
  position: absolute;
  left: auto;
  right: 2%;
  top: 72%;
  width: 37%;
  max-width: 188px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 3;
}

.hero__scrollDown__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: heroScrollDownSpin 20s linear infinite;
}

.hero__scrollDown__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero__scrollDown__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18%;
  height: auto;
  animation: heroScrollDownArrowBounce 1.6s ease-in-out infinite;
}

@keyframes heroScrollDownSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes heroScrollDownArrowBounce {
  0%, 100% { transform: translate(-50%, -65%); }
  50%      { transform: translate(-50%, -35%); }
}

.hero__en {
  position: absolute;
  top: 22%;
  right: 1.5%;
  left: auto;
  margin: 0;
  width: 42.3%;
  z-index: 2;
}

.hero__enSvg {
  display: block;
  width: 100%;
  height: auto;
}

.hero__ja {
  position: absolute;
  left: 1.74%;
  top: 54.81%;
  bottom: auto;
  margin: 0;
  width: 92.5%;
  z-index: 2;
}

.hero__jaSvg {
  display: block;
  width: 100%;
  height: auto;
}

.hero__tagFilterWrap {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.75%;
  justify-content: center;
  padding-inline: 12px;
  z-index: 100;
}

.l-tagFilterWrap {
  display: none;
}

@media (min-width: 1025px) {
  .l-tagFilterWrap {
    display: flex;
    justify-content: center;
    padding-inline: 32px;
    margin-block: 24px 32px;
  }
}

/* TAB */
@media (min-width: 768px) {
  .hero {
    aspect-ratio: auto;
    min-height: 720px;
    padding-block: 160px 64px;
  }

  .hero__photos {
    aspect-ratio: 1440 / 937;
  }

  .hero__en {
    top: 180px;
    left: auto;
    right: 40px;
    width: clamp(220px, 28vw, 280px);
  }

  .hero__ja {
    left: 40px;
    top: auto;
    bottom: 140px;
    width: clamp(380px, 50vw, 560px);
  }

  .hero__scrollDown {
    left: auto;
    right: 0.25%;
    top: 62.1%;
    width: 21%;
    max-width: 370px;
  }

  .hero__photo--spOnly { display: none; }

  /* TAB+ では PC 座標 (1440×937) を%換算して配置 */
  .hero__photo--1 { left: 10.5%;  top: 9.4%;   width: 13.9%; }
  .hero__photo--2 { left: 86.3%;  top: 38.5%;  width: 19.6%; }
  .hero__photo--3 { left: 1%;     top: 38.5%;  width: 26.1%; }
  .hero__photo--4 { left: 16.6%;  top: 5.8%;   width: 37.7%; display: block; }
  .hero__photo--5 { left: 37.7%;  top: -9.4%;  width: 63.5%; }
  .hero__photo--6 { left: 54%;    top: 53.2%;  width: 32%; }

  /* mask-7 ピンク / mask-9 青 / mask-10 グリーン */
  .hero__photo--7  { left: 10.7%;  top: 21.4%;  width: 15.0%; }
  .hero__photo--9  { left: 33.82%; right: auto; top: -3.1%;  width: 28.7%; }
  .hero__photo--10 { top: 32.0%;  width: 13.5%; }
}

/* PC */
@media (min-width: 1025px) {
  .hero {
    min-height: 900px;
    max-height: 100dvh;
    padding-block: 200px 80px;
  }

  .hero__en {
    top: 160px;
    left: auto;
    right: 48px;
    width: clamp(260px, 22vw, 319px);
  }

  .hero__ja {
    left: 57px;
    top: auto;
    bottom: 200px;
    width: clamp(560px, 48vw, 671px);
  }

  .topBackdrop {
    --topBackdrop-stop-2: 80%;
  }
}

/* 大型ディスプレイ (1441px〜) :*/
@media (min-width: 1441px) {
  .hero {
    margin-inline: auto;
    max-width: 1920px;
    min-height: 0;
    aspect-ratio: 1440 / 937;
    max-height: 100dvh;
    padding-block: 0;
  }

  .hero__en {
    top: 17.08%;
    right: 3.33%;
    width: clamp(319px, 22.15vw, 425px);
  }

  .hero__ja {
    left: 3.96%;
    bottom: 21.35%;
    width: clamp(671px, 46.6vw, 894px);
  }

  .hero__scrollDown {
    left: auto;
    right: 0.25%;
    top: 59.1%;
    width: 21%;
    max-width: clamp(300px, 21vw, 403px);
  }
}

@media (min-width: 961px) {
  .hero__tagFilterWrap {
    bottom: 6.8%;
    padding-inline: 0;
  }
}

/* =========================================
   Component: Tag filter (c-tagFilter)
   カテゴリリスト + 全て見る + お問い合わせ のダークバー
   ========================================= */
.c-tagFilter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 900px;
  padding: 12px 12px 12px 20px;
  background-color: #0e1229;
  border-radius: 999px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  z-index: 100;
  transition: padding 0.35s ease, gap 0.35s ease, max-width 0.35s ease, padding-left 0.35s ease, opacity 0.25s ease, visibility 0.25s ease;
}

.c-tagFilter__menuBtn {
  display: inline-flex;
  width: 0;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width 0.35s ease, margin 0.35s ease, opacity 0.35s ease;
}

.c-tagFilter__menuDots {
  display: block;
  width: 30px;
  height: 6px;
}

.c-tagFilter.is-compact {
  flex-wrap: nowrap;
  width: auto;
  max-width: none;
  padding: 8px 8px 8px 24px;
  gap: 0;
}

.c-tagFilter.is-compact .c-tagFilter__menuBtn {
  width: 48px;
  margin-right: 8px;
  opacity: 1;
  pointer-events: auto;
}

.c-tagFilter.is-compact .c-tagFilter__list,
.c-tagFilter.is-compact .c-tagFilter__viewAll {
  max-width: 0;
  width: 0;
  min-width: 0;
  max-height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  flex-wrap: nowrap;
  border: 0;
}

.c-tagFilter.is-sticky {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
}

.c-tagFilter.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-tagFilter.is-compact .c-tagFilter__navBtn {
  display: none;
}

@media (min-width: 961px) {
  .c-tagFilter.is-sticky {
    bottom: 24px;
  }
}

.c-tagFilter__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  transition: max-width 0.35s ease, width 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin 0.35s ease;
}

.c-tagFilter__list .c-category {
  transition: opacity 0.2s ease;
}

.c-tagFilter__list .c-category:hover {
  opacity: 0.8;
}

.c-tagFilter__viewAll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  min-width: 102px;
  min-height: 40px;
  background-color: #3c3c59;
  border-radius: 26px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  transition: max-width 0.35s ease, width 0.35s ease, min-width 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin 0.35s ease;
}

.c-tagFilter__viewAll:hover {
  opacity: 0.8;
}

.c-tagFilter__contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px 0 0;
  background-color: #fff;
  border: 0.547px solid #727272;
  border-radius: 32px;
  color: var(--color-text);
  transition: background-color 0.25s ease;
}

.c-tagFilter__contact:hover {
  background-color: #f5f5f5;
}

.c-tagFilter__contact-icon {
  display: inline-block;
  width: 44px;
  height: 44px;
  background-color: var(--color-text);
  -webkit-mask-image: url('../img/common/icon-contact.svg');
  mask-image: url('../img/common/icon-contact.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

.c-tagFilter__contact-label {
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 961px) {
  .c-tagFilter {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 8px 8px 26px;
    width: auto;
    max-width: none;
    align-items: stretch;
    height: 90px;
    transition: gap 0.35s ease, max-width 0.35s ease, height 0.35s ease;
  }

  .c-tagFilter.is-compact {
    height: 64px;
  }

  .c-tagFilter__list {
    flex: 0 0 auto;
    width: 530px;
    border-radius: 8px;
    overflow: clip;
  }

  .c-tagFilter__list .c-category--kids {
    width: 148px;
  }

  .c-tagFilter__viewAll {
    align-self: stretch;
    min-height: 0;
    height: auto;
    padding: 6px 16px;
  }

  .c-tagFilter__contact {
    align-self: stretch;
  }
}

.c-tagFilter__navBtn,
.c-tagFilter__mailBtn,
.c-tagFilter__viewAll-sp {
  display: none;
}

@media (max-width: 960px) {
  .c-tagFilter {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: none;
    padding: 5px 6px;
    background-color: #161829;
    border-radius: 999px;
  }

  .c-tagFilter__navBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1.125px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .c-tagFilter__navBtn:hover,
  .c-tagFilter__navBtn:focus-visible {
    background-color: #fff;
    border-color: #fff;
  }

  .c-tagFilter__navIcon {
    display: block;
    width: 5px;
    height: 9px;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-mask-image: url('../img/common/icon-chevron.svg');
            mask-image: url('../img/common/icon-chevron.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    transition: background-color 0.2s ease;
  }

  .c-tagFilter__navBtn:hover .c-tagFilter__navIcon,
  .c-tagFilter__navBtn:focus-visible .c-tagFilter__navIcon {
    background-color: #282828;
  }

  .c-tagFilter__navBtn--prev .c-tagFilter__navIcon {
    transform: scaleX(-1);
  }

  .c-tagFilter__list {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
  }

  .c-tagFilter__list::-webkit-scrollbar {
    display: none;
  }

  .c-tagFilter__list .c-category {
    flex-shrink: 0;
    gap: 5px;
    padding: 8px 13px 8px 11px;
    background-color: #27293c;
    border-radius: 999px;
    font-size: 12px;
  }

  .c-tagFilter__list .c-category__dot {
    width: 5px;
    height: 5px;
  }

  .c-tagFilter__viewAll {
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    width: 51px;
    height: 37px;
    padding: 0 12px;
    background-color: #fff;
    border-radius: 999px;
    color: #282828;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    letter-spacing: 0.96px;
  }

  .c-tagFilter__viewAll-pc {
    display: none;
  }

  .c-tagFilter__viewAll-sp {
    display: inline;
  }

  .c-tagFilter__contact {
    display: none;
  }

  .c-tagFilter__mailBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #fff;
  }

  .c-tagFilter__mailIcon {
    display: block;
    width: 20px;
    aspect-ratio: 5/4;
    background-color: #282828;
    -webkit-mask-image: url('../img/common/icon-mail.svg');
            mask-image: url('../img/common/icon-mail.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
  }
}

/* =========================================
   News (トップページ / お知らせ)
   ========================================= */
.newsTop {
  position: relative;
  z-index: 1;
  padding-block: 0 17%;
}

.newsTop__card {
  background-color: #fff;
  border: 2px solid #fafafa;
  padding: 48px 24px;
  border-radius: 4px;
  box-shadow: 0 4px 80px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.newsTop__header {
  display: contents;
}

.newsTop__header-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.newsTop__description {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: #8997aa;
}

.newsTop__more {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
}

.newsTop__list {
  margin-top: 0;
}

@media (min-width: 768px) {
  .newsTop {
    padding-block: 10%;
  }

  .newsTop__card {
    padding: 48px 56px;
    gap: 40px;
  }

  .newsTop__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .newsTop__more {
    order: 0;
    flex-shrink: 0;
  }

  .newsTop__header-main {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .newsTop__header-main > .sectionHead {
    flex-shrink: 0;
  }

  .newsTop__description {
    font-size: 15px;
  }

  .newsTop__list {
    padding-bottom: 0;
  }
}

@media (min-width: 1025px) {
  .newsTop {
    padding-block: 8%;
  }

  .newsTop__card {
    padding: 90px 80px;
    gap: 40px;
  }

  .newsTop__header-main {
    gap: 64px;
  }

  .newsTop__more {
    justify-content: flex-start;
    padding-left: 48px;
    border-left: 1px solid #dcdcdc;
    align-self: stretch;
  }
}

/* =========================================
   Works (トップページ / 実績紹介)
   ========================================= */
.works {
  padding-block: 25px 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.works__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}

.works__cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.works__cta--header {
  display: none;
}

.works__cta--bottom {
  display: flex;
  justify-content: center;
  width: 100%;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: min(100% - 28px, 373px);
  margin-inline: auto;
}

/* Component: Works overlay card  */
.c-worksOverlayCard {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  color: #fff;
}

.c-worksOverlayCard__thumbnail {
  position: absolute;
  inset: 0;
}

.c-worksOverlayCard__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.c-worksOverlayCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6) 84.5%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.4s ease;
}

.c-worksOverlayCard:hover::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 65.98%);
}

.c-worksOverlayCard:hover .c-worksOverlayCard__thumbnail img {
  transform: scale(1.105);
}

/* ホバー時に中央に出る「くわしく見る」 */
.c-worksOverlayCard::after {
  content: "くわしく見る";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 10px 40px;
  background-color: #1c1c1c;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='13' cy='13' r='8'/><line x1='25' y1='25' x2='19' y2='19'/><line x1='13' y1='9' x2='13' y2='17'/><line x1='9' y1='13' x2='17' y2='13'/></svg>");
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 18px 18px;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.c-worksOverlayCard:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.c-worksOverlayCard__info {
  position: absolute;
  left: 7px;
  right: 21px;
  bottom: 13px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.c-worksOverlayCard__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.c-worksOverlayCard__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.c-categoryCompact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  background-color: #3c3c59;
  border-radius: 22px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #d9d9d9;
  white-space: nowrap;
  --c-category-dot: #ff2e2e;
}

.c-categoryCompact__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--c-category-dot);
  flex-shrink: 0;
}

.c-btnMore--lg {
  gap: 24px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-inline-start: 128px;
  padding-inline-end: 72px;
  border-left: 1px solid #282828;
  min-height: 134px;
}

.c-btnMore--lg .c-btnMore__label {
  padding-bottom: 6px;
}

.c-btnMore--lg .c-btnMore__circle {
  width: 80px;
  height: 80px;
}

.c-btnMore--lg .c-btnMore__circle::before {
  width: 24px;
  height: 24px;
  -webkit-mask-size: 16px 12px;
  mask-size: 16px 12px;
}

.c-btnMore--md {
  gap: 24px;
  font-size: 13.38px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.c-btnMore--md .c-btnMore__label {
  padding-bottom: 6px;
}

.c-btnMore--md .c-btnMore__circle {
  width: 70px;
  height: 70px;
}

.c-btnMore--md .c-btnMore__circle::before {
  width: 22px;
  height: 22px;
  -webkit-mask-size: 16px 12px;
  mask-size: 16px 12px;
}

/* TAB */
@media (min-width: 768px) {
  .works {
    padding-block: 90px 0;
    align-items: stretch;
    gap: 32px;
  }

  .works__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: min(100% - 80px, 1200px);
  }

  .works__cta--header {
    display: flex;
  }

  .works__cta--bottom {
    display: none;
  }

  .works__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
  }

  .c-worksOverlayCard {
    aspect-ratio: 360 / 344;
  }

  .c-worksOverlayCard::after {
    gap: 8px;
    padding: 20px 48px 20px 88px;
    background-position: 48px center;
    background-size: 32px 32px;
    font-size: 14px;
  }

  .c-worksOverlayCard__info {
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 292px;
    gap: 12px;
  }

  .c-worksOverlayCard__title {
    font-size: 14px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: normal;
  }

  .c-categoryCompact {
    gap: 6px;
    padding: 6px 10px;
    border-radius: 26px;
    font-size: 10px;
  }

  .c-categoryCompact__dot {
    width: 6px;
    height: 6px;
  }
}

/* PC */
@media (min-width: 1025px) {
  .works {
    padding-block: 90px 0;
    gap: 8px;
  }

  .works__header {
    padding-block: 28px;
  }

  .works__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .c-worksOverlayCard__info {
    bottom: 24px;
  }
}

/* =========================================
   About Us (ディモルギアとは)
   GSAPによる dark 遷移に対応（.is-dark クラス切替）
   ========================================= */
.aboutUs {
  position: relative;
  padding-block: 200px 366px;
  background-color: #fff;
  transition: background-color 0.8s ease;
  overflow: hidden;
}

.aboutUs::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  aspect-ratio: 402 / 72;
  background-image: url('../img/top/top_triangle_sp.svg');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
}

/* 初期(light)状態：is-dark でスクロール時に dark へ遷移（SP / PC 共通） */
.aboutUs .sectionHead__en,
.aboutUs .sectionHead__ja {
  color: var(--color-text);
  transition: color 0.8s ease;
}

.aboutUs .sectionHead__dot {
  background-color: #496080;
}

.aboutUs__body {
  transition: color 0.8s ease;
}

/* Dark 時のみ表示される背景画像 */
.aboutUs__scenery {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  max-width: 1400px;
  pointer-events: none;
  z-index: 0;
}

.aboutUs__scenery-item {
  position: absolute;
  overflow: hidden;
  display: block;
  -webkit-mask-image: linear-gradient(165deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
          mask-image: linear-gradient(165deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: -webkit-mask-position 1s ease, mask-position 1s ease;
}

.aboutUs.is-dark .aboutUs__scenery-item {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

.aboutUs.is-dark .aboutUs__scenery-item--upper { transition-delay: 0.05s; }
.aboutUs.is-dark .aboutUs__scenery-item--lower { transition-delay: 0.25s; }

/* SP scenery */
.aboutUs__scenery-item--upper {
  top: 591px;
  left: -75px;
  width: 695px;
  aspect-ratio: 695 / 556;
}

.aboutUs__scenery-item--lower {
  top: 256px;
  left: -30px;
  width: 346px;
  aspect-ratio: 346 / 320;
}

.aboutUs__scenery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aboutUs__layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.aboutUs__content {
  display: flex;
  flex-direction: column;
  gap: 200px;
}

.aboutUs__body {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-text);
  width: 80%;
}

.aboutUs__body p + p {
  margin-top: 1.5em;
}

.aboutUs__catchphrase {
  position: absolute;
  top: 25%;
  right: 0;
  display: block;
  z-index: 1;
}

.aboutUs__catchphrase img,
.aboutUs__catchphrase-image {
  display: block;
  width: 46px;
  height: auto;
  object-fit: contain;
  filter: invert(1);
  transition: filter 0.8s ease;
}

.aboutUs.is-dark {
  background-color: #16161a;
}

.aboutUs.is-dark .sectionHead__en,
.aboutUs.is-dark .sectionHead__ja,
.aboutUs.is-dark .aboutUs__body {
  color: #fff;
}

.aboutUs.is-dark .sectionHead__dot {
  background-color: #fff;
}

/* SP の白塗り SVG は dark 時はそのまま白で表示 */
.aboutUs.is-dark .aboutUs__catchphrase img,
.aboutUs.is-dark .aboutUs__catchphrase-image {
  filter: invert(0);
}

/* TAB */
@media (min-width: 768px) {
  .aboutUs {
    padding-block: 200px calc(120px + 100vw * 253 / 1435);
    background-color: #fff;
  }

  .aboutUs::before {
    display: block;
    aspect-ratio: 1435 / 253;
    background-image: url('../img/top/top_triangle.svg');
  }

  /* TAB+ は light → is-dark で dark へ遷移 */
  .aboutUs .sectionHead__en,
  .aboutUs .sectionHead__ja {
    color: var(--color-text);
  }

  .aboutUs .sectionHead__dot {
    background-color: #496080;
  }

  .aboutUs__body {
    width: 100%;
    font-size: 16px;
    line-height: 2.3;
    letter-spacing: 0.07em;
    color: var(--color-text);
  }

  .aboutUs__content {
    gap: 40px;
  }

  .aboutUs__catchphrase {
    position: static;
    top: auto;
    right: auto;
    margin-inline: 0;
  }

  .aboutUs__catchphrase img,
  .aboutUs__catchphrase-image {
    width: 150px;
    max-height: 520px;
    filter: invert(0);
  }

  .aboutUs__scenery-item--upper {
    top: 29%;
    left: 19.2%;
    width: 82.4%;
    aspect-ratio: 1188 / 950;
  }

  .aboutUs__scenery-item--lower {
    top: 16.4%;
    left: 2.7%;
    width: 39.2%;
    aspect-ratio: 565 / 524;
  }

  .aboutUs.is-dark {
    background-color: #16161a;
  }

  .aboutUs.is-dark .sectionHead__en,
  .aboutUs.is-dark .sectionHead__ja,
  .aboutUs.is-dark .aboutUs__body {
    color: #fff;
  }

  .aboutUs.is-dark .sectionHead__dot {
    background-color: #fff;
  }

  .aboutUs.is-dark .aboutUs__catchphrase img,
  .aboutUs.is-dark .aboutUs__catchphrase-image {
    filter: invert(1);
  }
}

/* TAB */
@media (min-width: 768px) {
  .aboutUs__layout {
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
  }

  .aboutUs__content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .aboutUs__catchphrase {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 60px;
  }
}

/* PC */
@media (min-width: 1025px) {
  .aboutUs {
    padding-block: 180px calc(120px + 100vw * 253 / 1435);
  }

  .aboutUs__layout {
    position: relative;
  }

  .aboutUs__content {
    gap: 380px;
  }

  .aboutUs__body {
    max-width: 600px;
    margin-inline-start: clamp(40px, 10vw, 120px);
    font-size: 18px;
    line-height: 2.3;
  }

  .aboutUs__body p + p {
    margin-top: 36px;
  }

  .aboutUs__catchphrase {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 211px;
    margin-right: 10%;
  }

  .aboutUs__catchphrase img,
  .aboutUs__catchphrase-image {
    width: 191px;
    max-height: 619px;
  }
}

/* =========================================
   Services (事業紹介)
   ========================================= */
.services {
  position: relative;
  padding-block: 35px 96px;
  isolation: isolate;
}

.services__bg {
  position: absolute;
  inset: 0;
  background-color: #fff;
  z-index: -1;
}

.services__layout {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

/* Component: Service card (c-serviceCard) */
.c-serviceCard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.c-serviceCard__image-area {
  position: relative;
  aspect-ratio: 354 / 232;
  width: 100%;
  padding-top: 32px;
}

.c-serviceCard__image {
  position: absolute;
  top: 32px;
  left: 0;
  width: 100%;
  height: calc(100% - 32px);
  margin: 0;
  overflow: hidden;
}

.c-serviceCard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-serviceCard__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  padding: 16px 24px 16px 0;
  background-color: #fff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #000;
}

.c-serviceCard__desc {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
}

.c-serviceCard__btn{
  align-self: center;
}

/* TAB */
@media (min-width: 768px) {
  .services {
    padding-block: 120px;
  }

  .services__layout {
    gap: 48px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
  }

  .c-serviceCard {
    gap: 16px;
  }

  .c-serviceCard__image-area {
    aspect-ratio: 400 / 278;
    padding-top: 0;
  }

  .c-serviceCard__image {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
  }

  .c-serviceCard__label {
    padding: 20px 28px 20px 0;
    font-size: 17px;
    letter-spacing: normal;
  }

  .c-serviceCard__desc {
    font-weight: 500;
    font-size: 15px;
  }
}

/* PC  */
@media (min-width: 1025px) {
  .services {
    padding-block: 160px 120px;
  }

  .services__bg {
    clip-path: polygon(0 0, 100% 19.1%, 100% 100%, 0 100%);
  }

  .services__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 144px;
  }

  .services__layout > .sectionHead {
    flex-shrink: 0;
  }

  .services__grid {
    flex: 1 1 auto;
    min-width: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
  }

  .c-serviceCard__label {
    padding: 24px 32px 24px 0;
    font-size: 18px;
  }

  .c-serviceCard__desc {
    font-size: 15px;
  }
}

/* =========================================
   Company Info (会社情報)
   ========================================= */
.companyInfo {
  padding-block: 80px 48px;
  display: flex;
  flex-direction: column;
}

.companyInfo > .l-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.companyInfo__access {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.companyInfo__company-name {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #000;
}

.companyInfo__access-line {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #333;
}

.companyInfo__access-line-row {
  display: block;
}

.companyInfo__access-line-sep {
  display: none;
}

.companyInfo__map {
  margin-top: 16px;
  width: 100%;
  aspect-ratio: 354 / 220;
  border: 1px solid #dcdcdc;
  overflow: hidden;
}

.companyInfo__map iframe{
  width: 100%;
  height: 100%;
}

.companyInfo__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.companyInfo__table {
  display: flex;
  flex-direction: column;
}


.companyInfo__row:not(:first-child){
  border-top: 1px solid #e0e0e0;
}

.companyInfo__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 24px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #282828;
}

.companyInfo__row:last-child {
  border-bottom: 1px solid #e0e0e0;
}

.companyInfo__label {
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #496080;
}

.companyInfo__value ul {
  list-style: none;
  padding-left: 0;
}

.companyInfo__value li {
  position: relative;
  padding-left: 14px;
}

.companyInfo__value li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1em;
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* TAB */
@media (min-width: 768px) {
  .companyInfo {
    padding-block: 80px;
  }

  .companyInfo > .l-inner {
    gap: 60px;
  }

  .companyInfo__company-name {
    font-size: 20px;
    line-height: 2;
    letter-spacing: normal;
  }

  .companyInfo__access-line {
    font-size: 17px;
    letter-spacing: normal;
    color: #000;
  }

  .companyInfo__access-line-row {
    display: inline;
  }

  .companyInfo__access-line-sep {
    display: inline;
  }

  .companyInfo__map {
    aspect-ratio: 1229 / 387;
  }

  .companyInfo__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding-block: 32px;
    position: relative;
    border-top: none;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-text);
  }

  .companyInfo__row::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180px;
    height: 1px;
    background-color: var(--color-text);
  }

  .companyInfo__row::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 180px;
    right: 0;
    height: 1px;
    background-color: #dedddd;
  }

  .companyInfo__row:last-child {
    border-bottom: none;
  }

  /* .companyInfo__table::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(to right, var(--color-text) 180px, #dedddd 180px);
  } */

  .companyInfo__label {
    flex-shrink: 0;
    width: 160px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-text);
    text-align: center;
  }

  .companyInfo__value {
    flex: 1 1 auto;
  }
}

/* PC  */
@media (min-width: 1025px) {
  .companyInfo {
    padding-block: 120px;
  }

  .companyInfo > .l-inner {
    gap: 72px;
  }

  .companyInfo__row {
    padding-block: 40px;
  }

  .companyInfo__row::before {
    width: 180px;
  }

  .companyInfo__row::after {
    left: 180px;
  }

  .companyInfo__table{
    width: min(100%, 930px);
    margin-inline: auto;
  }

  .companyInfo__table::after {
    background: linear-gradient(to right, var(--color-text) 180px, #dedddd 180px);
  }

  .companyInfo__label {
    width: 180px;
    font-size: 15px;
  }

  .companyInfo__value {
    font-size: 15px;
  }
  .companyInfo__value li::before {
    top: 0.7em;
  }
}

/* =========================================
   Group Companies (タカヨシグループ)
   ========================================= */
.groupCompanies {
  padding: 78px 20px;
  background-color: #eceff3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.groupCompanies__title {
  margin-inline: auto;
  max-width: 80%;
}

.groupCompanies__title img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.groupCompanies__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  max-width: 1344px;
}

/* Component: group card (c-groupCard) */
.c-groupCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
}

.c-groupCard__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  transition: opacity 0.25s ease;
}

a.c-groupCard__logo-wrap:hover {
  opacity: 0.7;
}

.c-groupCard__logo-mark {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.c-groupCard__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.c-groupCard__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: #5b5b5b;
  transition: opacity 0.25s ease;
}

a.c-groupCard__name:hover {
  opacity: 0.7;
}

.c-groupCard__external {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: url('../img/common/icon-external-link.svg');
  mask-image: url('../img/common/icon-external-link.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

.c-groupCard__desc {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  color: #505050;
}

/* TAB */
@media (min-width: 768px) {
  .groupCompanies {
    padding: 80px 40px;
    gap: 72px;
  }

  .groupCompanies__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-groupCard {
    padding: 32px 24px;
    gap: 32px;
  }

  .c-groupCard__logo-wrap {
    min-height: 168px;
  }

  .c-groupCard__info {
    gap: 24px;
  }
}

/* PC */
@media (min-width: 1025px) {
  .groupCompanies {
    padding: 112px 64px;
    gap: 104px;
  }

  .groupCompanies__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .c-groupCard {
    padding: 32px 24px;
  }
}

/* =========================================
   Contact section (contact Block Common)
   ========================================= */
.contact {
  position: relative;
  overflow: hidden;
  padding: 72px 24px 64px;
  color: #fff;
  background-color: #16161a;
  isolation: isolate;
}

.page-top .contact {
  margin-top: 0;
}

.l-main > :first-child {
  margin-top: var(--header-height);
}

.l-main > .topBackdrop:first-child {
  margin-top: 0;
}

@media (min-width: 1025px) {
  .l-main > :first-child {
    margin-top: var(--header-total-height);
  }
}

.contact__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.contact__bg-image {
  position: absolute;
  left: 0;
  top: -54.42%;
  width: 100%;
  height: 165.25%;
  background-image: url('../img/common/contact-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  transition: opacity 0.5s ease;
}

/* contact__btn ホバー時：背景画像を暗くする */
/* .contact:has(.contact__btn:hover) .contact__bg-image {
  opacity: 0.05;
} */

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1312px;
  margin-inline: auto;
}

.contact__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.contact__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.contact__en {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fafafa;
}

.contact__ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: #fff;
}

.contact__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.contact__cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 20px 32px;
  background-color: #e5c158;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #282828;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color 0.35s ease, border-color 0.35s ease,
    color 0.35s ease, -webkit-backdrop-filter 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* ホバー：ガラス調（半透明＋ぼかし＋白枠）に切り替え */
.contact__btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: #ffffff;
  color: #ffffff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.contact__btn:hover .contact__btn-icon {
  background-color: #ffffff;
}

.contact__btn-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.contact__btn-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
}

.contact__btn-icon {
  display: inline-block;
  background-color: #282828;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: background-color 0.35s ease;
}

.contact__btn-icon--mail {
  width: 18px;
  height: 14px;
  -webkit-mask-image: url('../img/common/icon-mail.svg');
  mask-image: url('../img/common/icon-mail.svg');
}

.contact__btn-arrow {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
}

.contact__btn-icon--arrow {
  width: 12px;
  height: 9px;
  -webkit-mask-image: url('../img/common/icon-arrow-right.svg');
  mask-image: url('../img/common/icon-arrow-right.svg');
  transition: background-color 0.35s ease,
    transform 0.4s cubic-bezier(0.45, 0, 0.15, 1);
}

.contact__btn-arrow .contact__btn-icon--arrow:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-150%);
}

.contact__btn:hover .contact__btn-arrow .contact__btn-icon--arrow:nth-child(1) {
  transform: translateX(150%);
}

.contact__btn:hover .contact__btn-arrow .contact__btn-icon--arrow:nth-child(2) {
  transform: translateX(0);
}

/* TAB */
@media (min-width: 768px) {
  .contact {
    padding: 80px 40px 64px;
  }

  .contact__inner {
    align-items: stretch;
    gap: 117px;
    min-height: 413px;
  }

  .contact__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .contact__title-group {
    align-items: flex-start;
    gap: 20px;
  }

  .contact__ja {
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .contact__lead {
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
  }

  .contact__btn {
    padding: 32px 40px;
    justify-content: center;
    gap: 16px;
  }

  .contact__btn-main {
    gap: 16px;
  }

  .contact__btn-text {
    font-size: 16px;
    line-height: 1.6;
  }

  .contact__btn-icon--mail {
    width: 26px;
    height: 20px;
  }

  .contact__btn-icon--arrow {
    width: 17px;
    height: 13px;
  }
}

/* PC */
@media (min-width: 1025px) {
  .contact {
    padding: 96px 64px 72px;
  }

  .contact__title-group {
    gap: 14px;
  }

  .contact__en {
    font-size: 64px;
  }

  .contact__lead {
    font-size: 18px;
    letter-spacing: 0.05em;
  }

  .contact__btn {
    padding: 42px 64px;
    gap: 20px;
  }

  .contact__btn-main {
    gap: 20px;
  }

  .contact__btn-text {
    font-size: 20px;
  }

  .contact__btn-icon--mail {
    width: 33px;
    height: 26px;
  }

  .contact__btn-icon--arrow {
    width: 21px;
    height: 16px;
  }
}

/* =========================================
   Footer (footer Block)
   ========================================= */
.footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding: 56px 32px 40px;
}

@media (max-width: 960px) {
  .page-top .footer {
    padding-bottom: calc(40px + 56px);
  }
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

.footer__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__left {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__logo {
  width: 88px;
}

.footer__logo-image {
  width: 100%;
  height: auto;
}

.footer__info-area {
  display: flex;
  flex-direction: column;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.footer__contact-text {
  display: block;
}

.footer__contact-sep {
  display: none;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footerNav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.footerNav__item {
  width: 155px;
}

.footerNav__link {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #fff;
  transition: color 0.25s ease;
}

.footerNav__link:hover {
  color: #fff;
  opacity: 0.7;
}

.footer__social-links {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 8px;
}

.footer__sns-link {
  display: inline-block;
}

.footer__sns-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: #fff;
  opacity: 1;  
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.footer__sns-link:hover .footer__sns-icon {
  background-color: #d0d0d4;
  opacity: 0.7;
}

.footer__sns-icon--instagram {
  -webkit-mask-image: url('../img/common/icon-instagram.svg');
  mask-image: url('../img/common/icon-instagram.svg');
}

.footer__sns-icon--facebook {
  -webkit-mask-image: url('../img/common/icon-facebook.svg');
  mask-image: url('../img/common/icon-facebook.svg');
}

.footer__sns-icon--x {
  -webkit-mask-image: url('../img/common/icon-x.svg');
  mask-image: url('../img/common/icon-x.svg');
}

.footer__bottom {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  align-items: center;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copyright {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.footer__privacy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
}

.footer__legal-link {
  display: inline-block;
  padding: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}

.footer__legal-link:hover {
  color: #b0b0b4;
  text-decoration: underline;
}

/* TAB */
@media (min-width: 768px) {
  .footer {
    padding: 60px 60px;
  }

  .footer__inner {
    gap: 56px;
  }

  .footer__main {
    flex-direction: row;
    justify-content: space-between;
    gap: 60px;
  }

  .footer__logo {
    width: 140px;
  }

  .footer__info-area {
    color: var(--footer-text);
    font-size: 14px;
    line-height: 26px;
    letter-spacing: normal;
    white-space: normal;
  }

  .footer__company {
    font-size: 16px;
  }

  .footer__contact-text {
    display: inline;
  }

  .footer__contact-sep {
    display: inline;
  }

  .footerNav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 18px;
    width: auto;
  }

  .footerNav__item {
    width: auto;
  }

  .footerNav__link {
    padding: 8px 0;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
  }

  .footer__social-links {
    gap: 40px;
    height: 29px;
    padding-top: 0;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 0;
    border-top: none;
  }

  .footer__copyright {
    font-size: 14px;
    letter-spacing: normal;
    color: var(--footer-text-muted);
  }

  .footer__privacy-links {
    justify-content: flex-start;
    gap: 16px 32px;
  }

  .footer__legal-link {
    padding: 4px 0;
    font-size: 10px;
    letter-spacing: normal;
  }
}

/* PC */
@media (min-width: 1025px) {
  .footer {
    padding: 68px 120px;
  }

  .footer__inner {
    gap: 125px;
  }

  .footer__main {
    gap: 0;
  }

  .footer__left {
    width: 704.34px;
    gap: 112px;
  }

  .footer__logo {
    width: 160.34px;
  }

  .footer__info-area {
    width: 332px;
  }

  .footer__nav {
    width: 248px;
    gap: 40px;
  }

  .footer__bottom {
    height: 24px;
  }
}