/* =====================================================================
   Common — base / header / drawer / pagehero / viewmore / news / CTA / footer
   命名: custom-<block>-<element> / 状態: is-*
   寸法は「XD px ÷ 10 = rem」。PC=1920アートボード基準 / SP=430基準（768px切替）
   ===================================================================== */

/* ---------- Base ---------- */
/* 装飾（背景画像・ブロブ・楕円）は意図的に画面外へはみ出すため、
   横方向のスクロールを html/body の両方で完全に禁止する。
   clip はスクロール領域自体を作らない（非対応ブラウザは hidden にフォールバック）。 */
html {
  overflow-x: hidden;
  overflow-x: clip;
}
.custom-body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 1.6rem;
  line-height: 1.8;
  overflow-x: hidden;
  overflow-x: clip;
}
.custom-main { display: block; }

/* コンテンツ列（PC: 1350px / SP: 350px） */
.custom-container {
  width: 135rem;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .custom-container { width: 35rem; }
}

/* PC/SP出し分け */
@media (min-width: 768px) { .custom-sp-only { display: none !important; } }
@media (max-width: 767px) { .custom-pc-only { display: none !important; } }

/* ---------- Header（浮遊ピル型・全ページ共通） ---------- */
.custom-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 4.1rem 4.8rem 0 4.9rem;
}
.custom-header-bar {
  height: 8.7rem;
  border-radius: 4.4rem;
  background: rgba(255, 255, 255, 0.61);
  backdrop-filter: blur(6px) brightness(1.06);
  -webkit-backdrop-filter: blur(6px) brightness(1.06);
  display: flex;
  align-items: center;
  padding: 0 2.5rem 0 3.7rem;
}
.custom-header-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.custom-header-logo-mark { width: 3.6rem; height: 3.6rem; object-fit: contain; }
.custom-header-logo-text {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: var(--ls-129);
  color: #000;
}
.custom-header-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.custom-header-menu {
  display: flex;
  align-items: center;
  gap: 9.2rem;
}
.custom-header-menu a {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: var(--ls-129);
  color: #000;
  position: relative;
  padding-block: 0.6rem;
}
.custom-header-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.custom-header-menu a:hover::after,
.custom-header-menu a.is-active::after { transform: scaleX(1); }
.custom-header-cta {
  margin-left: 5.3rem;
  width: 23.5rem;
  height: 5.3rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: var(--ls-129);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}
.custom-header-cta:hover { opacity: 0.85; }

.custom-header-toggle { display: none; }

@media (max-width: 767px) {
  .custom-header { padding: 1.4rem 1.4rem 0; }
  .custom-header-bar { height: 4.2rem; padding: 0 0 0 1.4rem; }
  .custom-header-logo-mark { width: 2.2rem; height: 2.2rem; }
  .custom-header-logo-text { font-size: 1.9rem; }
  .custom-header-logo { gap: 0.6rem; }
  .custom-header-nav { display: none; }
  /* ハンバーガー（青2本線） */
  .custom-header-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.41rem;
    width: 4.4rem;
    height: 4.2rem;
    padding-right: 1.89rem;
    margin-left: auto;
    z-index: 101;
  }
  .custom-header-toggle span {
    display: block;
    width: 1.35rem;
    height: 0.15rem;
    min-height: 1.5px;
    background: var(--color-blue);
    transition: transform 0.4s var(--ease), opacity 0.3s, background 0.3s;
  }
  .custom-header-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.28rem) rotate(45deg); background: #fff; }
  .custom-header-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-0.28rem) rotate(-45deg); background: #fff; }
}

/* ---------- Mobile drawer ---------- */
.custom-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
}
.custom-nav-drawer[hidden] { display: none; }
.custom-nav-drawer.is-open { transform: translateY(0); }
.custom-nav-drawer-menu { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; }
.custom-nav-drawer-menu a {
  display: block;
  padding: 0.8rem 2rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: var(--ls-129);
  color: #fff;
}
.custom-nav-drawer-foot { margin-top: 4rem; color: rgba(255, 255, 255, 0.85); font-family: var(--font-en); letter-spacing: var(--ls-129); font-size: 1.4rem; }

/* ---------- Page hero（下層ページ共通） ---------- */
.custom-pagehero {
  position: relative;
  height: 60rem;
  background: var(--color-bg);
  overflow: hidden;
}
.custom-pagehero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
.custom-pagehero-deco {
  position: absolute;
  left: 54.9rem;
  top: 8.3rem;
  width: 161.3rem;
  max-width: none;
  transform: rotate(-23deg);
  transform-origin: 0 0;
  opacity: 0.26;
  pointer-events: none;
}
.custom-pagehero-b {
  position: absolute;
  left: 79rem;
  top: 16.7rem;
  width: 34rem;
  opacity: 0.56;
  pointer-events: none;
}
.custom-pagehero-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 29.5rem;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 6.6rem;
  line-height: 6.5rem;
  letter-spacing: var(--ls-129);
  color: #fff;
}
@media (max-width: 767px) {
  .custom-pagehero { height: 54.4rem; }
  .custom-pagehero-deco { display: none; }
  .custom-pagehero-b { left: 11.4rem; top: 17.1rem; width: 20.3rem; }
  .custom-pagehero-title { top: 24.7rem; font-size: 3.9rem; line-height: 4.2rem; }
}

/* ---------- VIEW MORE ボタン（青ピル＋白丸シェブロン） ---------- */
.custom-viewmore {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25.1rem;
  height: 5.3rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: var(--ls-129);
  transition: opacity 0.3s;
}
.custom-viewmore:hover { opacity: 0.88; }
@media (min-width: 768px) {
  .custom-viewmore:not(.is-wide) { justify-content: flex-start; padding-left: 3.6rem; }
}
.custom-viewmore.is-wide { width: 54.5rem; }
.custom-viewmore-icon {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.9rem;
  height: 3.9rem;
  border: 1px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.custom-viewmore-icon svg { width: 0.7rem; height: auto; }
@media (max-width: 767px) {
  .custom-viewmore, .custom-viewmore.is-wide { width: 35rem; }
  .custom-viewmore-icon { right: 0.6rem; }
}

/* ---------- News list ---------- */
.custom-news-list { list-style: none; }
.custom-news-item { position: relative; height: 7.5rem; }
.custom-news-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 5.65rem;
  border-top: 1px solid var(--color-line);
}
.custom-news-link {
  display: grid;
  grid-template-columns: 21.1rem 21.2rem 1fr;
  align-items: center;
  height: 3.8rem;
}
.custom-news-badge {
  width: 14.9rem;
  height: 3.8rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: var(--ls-120);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.custom-news-date {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: var(--ls-120);
  color: #000;
}
.custom-news-title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: var(--ls-120);
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.custom-news-link:hover .custom-news-title { color: var(--color-primary); }
@media (max-width: 767px) {
  /* SPは一回り小さく・すっきり（PCは変更なし） */
  .custom-news-item { height: 10.4rem; }
  .custom-news-item::after { top: 7.5rem; }
  .custom-news-link {
    display: block;
    height: auto;
  }
  .custom-news-badge {
    position: absolute;
    left: 0; top: 0;
    width: 11.8rem;
    height: 3.2rem;
    font-size: 1.5rem;
  }
  .custom-news-date {
    position: absolute;
    left: 13.2rem; top: 0;
    line-height: 3.2rem;
    font-size: 1.6rem;
  }
  .custom-news-title {
    position: absolute;
    left: 0; right: 0;
    top: 4.4rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
}

/* ---------- CONTACT CTA（青角丸カード・全ページ共通） ---------- */
.custom-cta { position: relative; }
.custom-cta-card {
  position: relative;
  z-index: 1;
  width: 135rem;
  height: 40.8rem;
  margin-inline: auto;
  background: var(--color-primary);
  border: 1px solid var(--color-line);
  border-radius: 13.8rem 2.4rem 13.8rem 2.4rem;
  color: #fff;
}
.custom-cta-title {
  position: absolute;
  left: 13.5rem;
  top: 11.2rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 6.6rem;
  line-height: 6.5rem;
  letter-spacing: var(--ls-129);
}
.custom-cta-bmark {
  position: absolute;
  left: 54.6rem;
  top: 10.8rem;
  width: 7.3rem;
  transform: rotate(-3deg);
}
.custom-cta-arrow {
  position: absolute;
  left: 72.9rem;
  top: 10.4rem;
  width: 8.9rem;
  height: 8.9rem;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.3s, color 0.3s;
}
.custom-cta-arrow svg { width: 1.5rem; height: auto; }
.custom-cta-arrow:hover { background: #fff; color: var(--color-primary); }
.custom-cta-text {
  position: absolute;
  left: 13.5rem;
  top: 22.6rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 4.2rem;
  letter-spacing: var(--ls-129);
}
.custom-cta-blob-l {
  position: absolute;
  left: -2.6rem;
  top: -15rem;
  width: 38.9rem;
  z-index: 2;
  pointer-events: none;
}
.custom-cta-blob-r {
  position: absolute;
  left: calc(50% + 47.7rem);
  top: 20.6rem;
  width: 31.6rem;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 767px) {
  .custom-cta-card {
    width: 35rem;
    height: 32rem;
    border-radius: 8.4rem 2.4rem 8.4rem 2.4rem;
  }
  .custom-cta-title { left: 4.7rem; top: 5.5rem; font-size: 3.2rem; line-height: 3rem; }
  .custom-cta-bmark { left: 24.1rem; top: 5.3rem; width: 4.6rem; }
  .custom-cta-arrow { left: 29.7rem; top: 6.1rem; width: 2.74rem; height: 2.74rem; border-width: 1px; }
  .custom-cta-arrow svg { width: 0.5rem; }
  .custom-cta-text {
    left: 2.1rem;
    top: 11.2rem;
    width: 30.8rem;
    text-align: center;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: 0.046em;
  }
  .custom-cta-blob-l { left: -21.4rem; top: -4.1rem; z-index: 0; }
  .custom-cta-blob-r { left: auto; right: -1.7rem; top: 25.8rem; width: 14.8rem; }
}

/* ページ別のCTA上下マージン（XD実測） */
#home-page .custom-cta { margin-top: 20.9rem; margin-bottom: 22.9rem; }
#about-page .custom-cta { margin-top: 6.7rem; margin-bottom: 19.5rem; }
#service-page .custom-cta { margin-top: 24.4rem; margin-bottom: 22.9rem; }
#privacy-page .custom-cta { margin-top: 24.7rem; margin-bottom: 19.3rem; }
#news-page .custom-cta, #page-page .custom-cta { margin-top: 16rem; margin-bottom: 20rem; }
@media (max-width: 767px) {
  #home-page .custom-cta { margin-top: 5.2rem; margin-bottom: 12.8rem; }
  #about-page .custom-cta { margin-top: 5.6rem; margin-bottom: 12.8rem; }
  #service-page .custom-cta { margin-top: 11.6rem; margin-bottom: 12.8rem; }
  #privacy-page .custom-cta { margin-top: 11rem; margin-bottom: 12.8rem; }
  #news-page .custom-cta, #page-page .custom-cta { margin-top: 10rem; margin-bottom: 12.8rem; }
}

/* ---------- Footer（青地） ---------- */
.custom-footer {
  position: relative;
  height: 44.2rem;
  background: var(--color-primary);
  color: #fff;
}
.custom-footer-inner {
  position: relative;
  width: 135rem;
  height: 100%;
  margin-inline: auto;
}
.custom-footer-logo {
  position: absolute;
  left: 0;
  top: 8.6rem;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
}
.custom-footer-logo-mark { width: 5.7rem; height: 5.7rem; }
.custom-footer-logo-text {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 4.9rem;
  line-height: 1;
  letter-spacing: var(--ls-129);
  color: #fff;
}
.custom-footer-nav {
  position: absolute;
  left: 0;
  top: 18.1rem;
}
.custom-footer-nav ul {
  display: flex;
  align-items: center;
  gap: 11.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-footer-nav a {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: var(--ls-129);
  color: #fff;
  transition: opacity 0.3s;
}
.custom-footer-nav a:hover { opacity: 0.75; }
.custom-footer-cta {
  width: 23.5rem;
  height: 5.3rem;
  background: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem !important;
  color: var(--color-primary) !important;
}
.custom-footer-divider {
  position: absolute;
  left: -28.5rem; right: -28.5rem;
  top: 32.8rem;
  border-top: 1px solid #fff;
}
.custom-footer-copy {
  position: absolute;
  left: 0;
  top: 37rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: var(--ls-129);
  color: #fff;
}
.custom-footer-privacy {
  position: absolute;
  right: 0;
  top: 37.1rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: var(--ls-129);
  color: #fff;
}
.custom-footer-privacy:hover { opacity: 0.8; }
.custom-footer-top {
  position: absolute;
  right: 15.8rem;
  top: 5.2rem;
  width: 8.9rem;
  height: 8.9rem;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background 0.3s;
}
.custom-footer-top svg { width: 2.6rem; height: auto; }
.custom-footer-top:hover { background: rgba(255, 255, 255, 0.15); }
.custom-footer-blob {
  position: absolute;
  right: 7rem;
  top: -12.5rem;
  width: 26.5rem;
  filter: blur(3px);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 767px) {
  .custom-footer { height: 57.1rem; }
  .custom-footer-inner { width: 35rem; }
  .custom-footer-logo {
    position: static;
    display: flex;
    justify-content: center;
    padding-top: 6.1rem;
    gap: 1.1rem;
  }
  .custom-footer-logo-mark { width: 4.3rem; height: 4.3rem; }
  .custom-footer-logo-text { font-size: 3.3rem; }
  .custom-footer-nav {
    position: static;
    margin-top: 3.9rem;
  }
  .custom-footer-nav ul {
    flex-direction: column;
    gap: 3.9rem;
  }
  .custom-footer-cta { width: 34.9rem; margin-top: 1.2rem; }
  .custom-footer-divider { top: 46.9rem; left: -4rem; right: -4rem; }
  .custom-footer-copy { left: 0; right: 0; top: 51.2rem; text-align: center; }
  .custom-footer-privacy { left: 0; right: 0; top: 47.7rem; text-align: center; font-size: 1.6rem; }
  .custom-footer-top { right: 3.1rem; top: 2.8rem; width: 4.2rem; height: 4.2rem; border-width: 1px; }
  .custom-footer-top svg { width: 1.2rem; }
  .custom-footer-blob { right: -1rem; top: -5.5rem; width: 12.4rem; }
}

/* ---------- News 一覧ページ ---------- */
.custom-news-page { margin-top: 12rem; }
.custom-news-page-empty { font-size: 1.6rem; line-height: 3.2rem; }
@media (max-width: 767px) {
  .custom-news-page { margin-top: 7rem; }
}

/* ---------- Error / 404 ---------- */
.custom-error { text-align: center; padding: 30rem 0 12rem; }
.custom-error-code { font-family: var(--font-en); font-weight: 700; font-size: 16rem; line-height: 1; color: var(--color-primary); }
.custom-error-title { font-size: 2.6rem; color: #000; margin: 1rem 0 1.6rem; }
.custom-error-text { color: #555; margin-bottom: 3.6rem; }
.custom-error .custom-viewmore { margin-inline: auto; }

/* ---------- Scroll reveal ---------- */
.custom-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.custom-reveal.is-visible { opacity: 1; transform: none; }