/* ============================================================
   共通: skip-link(anima/pc/style.css から移設。partsには未収載)
   ============================================================ */
/* 退避は自身の高さ基準（translateY）で行う。固定px（旧: top:-40px）だと
   フォントサイズ次第で要素の高さが退避量を超え、左上に数px はみ出す。 */
.PC-top .skip-link {
  position: absolute;
  top: 16px;
  left: 16px;
  transform: translateY(calc(-100% - 24px));
  z-index: 1000;
  padding: 8px 12px;
  background: var(--basewhite);
  color: var(--baseblack);
  border-radius: 8px;
}

.PC-top .skip-link:focus {
  transform: none;
}

.PC-top .skip-link:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* 統合調整: main は .PC-top(align-items:center)配下で内容幅に縮まないよう全幅にする
   (parts単体には main が無いため統合時のみ必要。01ヘッダーの header 全幅化と同型) */
.PC-top main {
  width: 100%;
}

/* ============================================================
   01_header
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__catch {
  justify-content: space-between;
  padding: var(--size-space-200) var(--size-space-600) var(--size-space-200)
  var(--size-space-600);
  display: flex;
  width: 1440px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--basegrey);
}

.PC-top .skk-header__catch-text {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  font-family: var(--body-s-font-family);
  font-weight: var(--body-s-font-weight);
  color: var(--themaprimary);
  font-size: var(--body-s-font-size);
  letter-spacing: var(--body-s-letter-spacing);
  line-height: var(--body-s-line-height);
  white-space: nowrap;
  font-style: var(--body-s-font-style);
}

.PC-top .skk-header__utility {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.PC-top .skk-header__utility-link {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--size-space-100) var(--size-space-400) var(--size-space-100)
  var(--size-space-400);
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.PC-top .skk-navlabel {
  font-weight: var(--body-s-font-weight);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-s-font-family);
  color: var(--baseblack);
  text-align: center;
  letter-spacing: var(--body-s-letter-spacing);
  font-style: var(--body-s-font-style);
}

.PC-top .skk-header__bar {
  display: flex;
  width: 1440px;
  justify-content: space-between;
  padding: var(--size-space-300) var(--size-space-600) var(--size-space-300)
  var(--size-space-600);
  flex: 0 0 auto;
  background-color: var(--basewhite);
  align-items: center;
  position: relative;
}

.PC-top .skk-header__logo {
  max-width: 500px;
  max-height: 55.56px;
  height: 55.56px;
  position: relative;
  width: 500px;
  aspect-ratio: 9;
}

.PC-top .skk-logo__frame {
  position: relative;
  width: 99.89%;
  height: 100.00%;
  aspect-ratio: 8.99;
}

/* Figma照合調整: ロゴマーク(rectangle-2.png 96x112)は左端に原比率で配置し、
   テキストSVG(vector-4/5)は原比率のまま垂直センターに置く(全幅引き伸ばしを解除) */
.PC-top .skk-logo__rect {
  width: auto;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.PC-top .skk-logo__vector {
  position: absolute;
  width: 89.73%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 10.27%;
}

.PC-top .skk-logo__img {
  position: absolute;
  width: 89.80%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 10.20%;
}

.PC-top .skk-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--size-space-800);
  position: relative;
  flex: 0 0 auto;
}

.PC-top .skk-header__tel-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: 0 0 auto;
  gap: var(--size-space-0);
}

.PC-top .skk-header__cta-note {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-s-font-family);
  font-weight: var(--body-s-font-weight);
  color: var(--baseblack);
  font-size: var(--body-s-font-size);
  text-align: center;
  letter-spacing: var(--body-s-letter-spacing);
  line-height: var(--body-s-line-height);
  white-space: nowrap;
  font-style: var(--body-s-font-style);
}

.PC-top .skk-header__tel {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 150px;
  max-width: 500px;
  align-items: flex-end;
  gap: var(--size-space-100);
  flex: 0 0 auto;
  border-radius: 99px;
  justify-content: center;
  position: relative;
}

.PC-top .skk-header__tel-icon {
  width: 28px;
  height: 28px;
  position: relative;
  aspect-ratio: 1;
}

.PC-top .skk-header__tel-num {
  justify-content: center;
  width: fit-content;
  margin-top: -2px;
  font-size: 40px;
  text-align: center;
  line-height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Zen Kaku Gothic New", Helvetica;
  font-weight: 700;
  color: var(--baseblack);
  letter-spacing: 0;
  white-space: nowrap;
}

.PC-top .skk-header__cta {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 150px;
  max-width: 500px;
  align-items: flex-end;
  gap: var(--size-space-300);
  padding: var(--size-space-400) var(--size-space-600) var(--size-space-400)
  var(--size-space-600);
  flex: 0 0 auto;
  align-self: stretch;
  background-color: var(--themaprimary);
  border-radius: var(--size-radius-200);
  justify-content: center;
  position: relative;
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

.PC-top .skk-header__cta-text {
  display: flex;
  align-items: center;
  flex: 1;
  margin-top: -1px;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--basewhite);
  font-size: var(--button-font-size);
  text-align: center;
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  justify-content: center;
  position: relative;
  font-style: var(--button-font-style);
}

.PC-top .skk-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-space-300) var(--size-space-600) var(--size-space-0)
  var(--size-space-600);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC-top .skk-header__nav-link {
  display: flex;
  padding: var(--size-space-400);
  flex: 1;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.PC-top .skk-header__nav-label {
  font-weight: var(--button-small-font-weight);
  font-size: var(--button-small-font-size);
  line-height: var(--button-small-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--button-small-font-family);
  color: var(--baseblack);
  text-align: center;
  letter-spacing: var(--button-small-letter-spacing);
  font-style: var(--button-small-font-style);
}

.PC-top .skk-header__status {
  display: flex;
  width: 1440px;
  justify-content: center;
  gap: 16px;
  padding: var(--size-space-200) var(--size-space-600) var(--size-space-200)
  var(--size-space-600);
  flex: 0 0 auto;
  background-color: var(--themaprimary);
  align-items: center;
  position: relative;
}

.PC-top .skk-header__status-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: var(--body-m-font-family);
  font-weight: var(--body-m-font-weight);
  color: var(--basewhite);
  font-size: var(--body-m-font-size);
  text-align: center;
  letter-spacing: var(--body-m-letter-spacing);
  line-height: var(--body-m-line-height);
  white-space: nowrap;
  font-style: var(--body-m-font-style);
}

.PC-top .skk-header__status-clock {
  display: inline-flex;
  align-items: baseline;
  gap: var(--size-space-100);
  padding: var(--size-space-100) var(--size-space-300) var(--size-space-100)
  var(--size-space-300);
  position: relative;
  flex: 0 0 auto;
  background-color: var(--basewhite);
  border-radius: 9999px;
}

.PC-top .skk-header__status-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-weight: var(--body-m-font-weight);
  color: var(--baseblack);
  font-size: var(--body-m-font-size);
  text-align: center;
  letter-spacing: var(--body-m-letter-spacing);
  line-height: var(--body-m-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-m-font-family);
  font-style: var(--body-m-font-style);
}

.PC-top .skk-header__status-time {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59px;
  height: 28px;
  margin-top: -1px;
  font-family: var(--subtitle-font-family);
  font-weight: var(--subtitle-font-weight);
  color: var(--themaprimary);
  font-size: var(--subtitle-font-size);
  text-align: center;
  letter-spacing: var(--subtitle-letter-spacing);
  line-height: var(--subtitle-line-height);
  white-space: nowrap;
  font-style: var(--subtitle-font-style);
}

.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

/* Figma照合調整: headerが .PC-top(align-items:center)配下でコンテンツ幅に
   縮まないよう全幅にする(Figmaは各行1440px全幅) */
.PC-top header {
  width: 100%;
}

/* Figma照合調整: 1440px超で背景帯が途切れないよう全幅化。
   space-betweenの行とナビは、左右paddingでコンテンツを中央1440px相当に収める
   (1440px以下では max() が24pxに解決され従来と同一) */
.PC-top .skk-header__catch,
.PC-top .skk-header__bar,
.PC-top .skk-header__status {
  width: 100%;
  max-width: none;
}

.PC-top .skk-header__catch,
.PC-top .skk-header__bar {
  padding-left: max(var(--size-space-600), calc(50% - 696px));
  padding-right: max(var(--size-space-600), calc(50% - 696px));
}

.PC-top .skk-header__nav {
  padding-left: max(var(--size-space-600), calc(50% - 696px));
  padding-right: max(var(--size-space-600), calc(50% - 696px));
}

.PC-top .skk-header__tel,
.PC-top .skk-header__cta,
.PC-top .skk-header__utility-link,
.PC-top .skk-header__nav-link {
  cursor: pointer;
}

.PC-top .skk-header__tel,
.PC-top .skk-header__cta,
.PC-top .skk-header__utility-link,
.PC-top .skk-header__nav-link {
  text-decoration: none;
}

.PC-top .skk-header__tel:focus-visible,
.PC-top .skk-header__cta:focus-visible,
.PC-top .skk-header__utility-link:focus-visible,
.PC-top .skk-header__nav-link:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.PC-top .skk-header__logo {
  max-width: 100%;
}

@media (max-width: 1440px) {
  .PC-top .skk-header__catch,
  .PC-top .skk-header__bar,
  .PC-top .skk-header__status {
    width: 100%;
  }
}

/* ===== SPレスポンシブ対応(Figma SP/Header 24:523 / SP/hamburger 28:205) =====
   PCヘッダーはロゴ500px+電話+CTAで約1131px必要なため、
   ヘッダーのみブレークポイントを1100pxとする(指示書のセクション単位調整) */
.PC-top .skk-header__sp-bar,
.PC-top .skk-header__sp-menu {
  display: none;
}

@media (max-width: 1100px) {
  .PC-top .skk-header__catch,
  .PC-top .skk-header__bar,
  .PC-top .skk-header__nav,
  .PC-top .skk-header__status {
    display: none;
  }

  /* 閉時バー: 390×48、ロゴ200×22 + メニューボタン */
  .PC-top .skk-header__sp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: var(--size-space-300) var(--size-space-400);
    background-color: var(--basewhite);
    position: relative;
    z-index: 1001;
  }

  .PC-top .skk-header__sp-logo {
    position: relative;
    display: block;
    width: 200px;
    height: 22px;
  }

  .PC-top .skk-header__toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    cursor: pointer;
    position: relative;
  }

  .PC-top .skk-header__toggle:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
  }

  .PC-top .skk-header__toggle-open {
    width: 24px;
    height: 24px;
  }

  .PC-top .skk-header__toggle-close {
    display: none;
    position: relative;
    width: 24px;
    height: 24px;
  }

  .PC-top .skk-header__toggle-close::before,
  .PC-top .skk-header__toggle-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    background-color: var(--baseblack);
  }

  .PC-top .skk-header__toggle-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .PC-top .skk-header__toggle-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

  .PC-top header.skk-header--menu-open .skk-header__toggle-open { display: none; }
  .PC-top header.skk-header--menu-open .skk-header__toggle-close { display: block; }

  /* 開時メニュー(全画面オーバーレイ、バーの下から) */
  .PC-top header.skk-header--menu-open .skk-header__sp-menu {
    display: block;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: var(--basewhite);
    z-index: 1000;
  }

  /* 補助ナビ帯(よくあるご質問/ご利用ガイド)高さ62・グレー */
  .PC-top .skk-header__sp-utility {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    background-color: var(--basegrey);
  }

  /* 主要リンク・サブリンク(各342×54相当) */
  .PC-top .skk-header__sp-nav,
  .PC-top .skk-header__sp-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--size-space-400) var(--size-space-600);
  }

  .PC-top .skk-header__sp-nav .skk-header__nav-link,
  .PC-top .skk-header__sp-links .skk-header__nav-link {
    width: 100%;
    max-width: 342px;
    flex: 0 0 auto;
  }

  /* CTAブロック(電話・資料請求 各300×62) */
  .PC-top .skk-header__sp-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-400);
    padding: var(--size-space-400) var(--size-space-600);
  }

  .PC-top .skk-header__sp-tel {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-space-200);
    width: 300px;
    max-width: 100%;
    height: 62px;
    border: 1px solid var(--themaprimary);
    border-radius: var(--size-radius-200);
    cursor: pointer;
  }

  .PC-top .skk-header__sp-tel:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
  }

  .PC-top .skk-header__sp-tel img {
    width: 28px;
    height: 28px;
  }

  .PC-top .skk-header__sp-tel-text {
    font-family: "Zen Kaku Gothic New", Helvetica;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--themaprimary);
    white-space: nowrap;
  }

  .PC-top .skk-header__sp-cta .skk-header__cta {
    width: 300px;
    max-width: 100%;
    align-self: center;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   02_fv
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}



/* Figma照合調整: Figmaの縦順は バッジ→見出し→説明文。DOM順(説明文→見出し→バッジ)の
   逆のため column-reverse で一致させる(HTMLは変更しない) */












.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}



/* ===== レスポンシブ対応(Figma SP FV 6004:4507) =====
   PCの固定配置(テキストx150 / 画像 右660px)は1380px未満で必ず重なるため、
   1379px以下は「画像(右寄せ・最大660px)→バッジ→見出し→説明文」の縦積みに切替 */
@media (max-width: 1379px) {
  

  

  

  

  
}

/* SP(768px以下)の文字サイズ(390px基準) */
@media (max-width: 768px) {
  

  

  /* 統合対応: .text-wrapper-10 は04と共有のためFVスコープに限定 */
  
}

/* 320px級の狭幅でバッジ・見出しがはみ出さないための縮小 */
@media (max-width: 345px) {
  

  
}

/* ============================================================
   03_achievements
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

























.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

/* Figma照合調整: 1440px超で背景帯が途切れないよう全幅化(コンテンツは中央維持) */


@media (max-width: 1440px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4524、390px基準) =====
   2行構成: [サービスガイドライン/全葬連] [たまそう/年間実績] */
@media (max-width: 768px) {
  

  

  

  

  

  

  

  
}

/* 中間幅対応: 1列合計約846pxのため、920px以下で折返しを許可。
   align-self:stretch + aspect-ratio で折返し時に画像が拡大するため、
   バナーはPC実寸(高さ68px)に固定する */
@media (min-width: 769px) and (max-width: 920px) {
  

  

  
}

/* ============================================================
   04_target
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}







.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

/* Figma照合調整: 1440px超で背景帯が途切れないよう全幅化(コンテンツは中央維持) */


@media (max-width: 1440px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4566、390px基準): 3項目を中央揃えで縦積み ===== */
@media (max-width: 768px) {
  
}

/* ============================================================
   05_emergency
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__tel {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 150px;
  max-width: 500px;
  align-items: flex-end;
  gap: var(--size-space-100);
  flex: 0 0 auto;
  border-radius: 99px;
  justify-content: center;
  position: relative;
}





























.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

.PC-top .skk-header__tel {
  cursor: pointer;
}

.PC-top .skk-header__tel {
  text-decoration: none;
}

.PC-top .skk-header__tel:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4580、390px基準) =====
   白カード内で縦積み: 見出し→説明→無料バッジ→電話→補足 */
@media (max-width: 768px) {
  

  

  /* バッジ+電話を縦積み・中央へ */
  

  

  
}

/* 320px級で電話番号がはみ出さないための縮小 */
@media (max-width: 345px) {
  

  
}

/* ============================================================
   06_plan
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}























.PC-top .skk-footer__office-name {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-top: -1px;
  font-weight: var(--body-s-font-weight);
  color: var(--baseblack);
  font-size: var(--body-s-font-size);
  letter-spacing: var(--body-s-letter-spacing);
  line-height: var(--body-s-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-s-font-family);
  font-style: var(--body-s-font-style);
}

































.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}











@media (max-width: 1100px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4601、390px基準): カード3枚を縦積み ===== */
@media (max-width: 768px) {
  

  

  
}

/* 中間幅対応: 3列(計1000px)が収まらない1100px以下はカードを折返し */
@media (min-width: 769px) and (max-width: 1100px) {
  

  
}

/* ============================================================
   07_features
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}















































.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}











@media (max-width: 1100px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4656、390px基準) =====
   カード内は point→円形画像→テキスト の縦積み(orderで入替)。SPは角丸なし */
@media (max-width: 768px) {
  

  

  

  

  

  

  

  
}

/* ============================================================
   08_purpose
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}





















































.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}







/* ===== SPレスポンシブ対応(Figma SP 6004:4750、390px基準): カードを縦積み ===== */
@media (max-width: 768px) {
  

  

  

  
}

/* 中間幅対応: 3列(計978px)が収まらない1050px以下はカードを折返し */
@media (min-width: 769px) and (max-width: 1050px) {
  
}

/* ============================================================
   09_campaign_cv
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

































.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}









@media (max-width: 1100px) {
  
}

/* SP専用改行(PCでは非表示のためPC表示に影響しない) */


/* ===== SPレスポンシブ対応(Figma SP 6004:4799、390px基準) =====
   縦型バナー342×250。背景はSP専用画像(sp-banner01.png)に差し替え */
@media (max-width: 768px) {
  

  

  /* 統合対応: .text-wrapper-45 は11と共有のためバナー(.PC)スコープに限定 */
  

  

  

  

  

  

  

  /* 統合対応: .button-10 は10/12と共有のためバナー内ボタンにスコープ限定 */
  

  

  

  
}

/* ============================================================
   10_service
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__tel-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: 0 0 auto;
  gap: var(--size-space-0);
}

.PC-top .skk-header__tel {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 150px;
  max-width: 500px;
  align-items: flex-end;
  gap: var(--size-space-100);
  flex: 0 0 auto;
  border-radius: 99px;
  justify-content: center;
  position: relative;
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}















.PC-top .skk-footer__sns-icon {
  width: 32px;
  height: 32px;
  position: relative;
  aspect-ratio: 1;
}







.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

.PC-top .skk-header__tel,
.PC-top .button-11 {
  cursor: pointer;
}

.PC-top .skk-header__tel,
.PC-top .button-11 {
  text-decoration: none;
}

.PC-top .skk-header__tel:focus-visible,
.PC-top .button-11:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}





@media (max-width: 1100px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4814、390px基準) =====
   テキスト→正方形画像→白カード(電話/資料請求 縦積み)→注記 */
@media (max-width: 768px) {
  

  

  

  

  

  

  
}

/* 中間幅対応: 注記の固定幅1000pxを1100px以下で可変に */
@media (max-width: 1100px) {
  
}

/* ============================================================
   11_support
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}























































.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

/* Figma照合調整: 1440px超で背景帯が途切れないよう全幅化(コンテンツは中央維持) */










@media (max-width: 1440px) {
  
}

@media (max-width: 1100px) {
  

  
}

/* SP専用改行(PCでは非表示) */


/* ===== SPレスポンシブ対応(Figma SP 6004:4832、390px基準) =====
   カード4枚を縦積み、供花バナーはSP縦型(sp-banner02.png)へ */
@media (max-width: 768px) {
  

  

  

  

  

  

  /* 統合対応: .text-wrapper-45 は09と共有のため供花バナースコープに限定 */
  

  

  

  
}

/* ============================================================
   12_contact
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__tel-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: 0 0 auto;
  gap: var(--size-space-0);
}

.PC-top .skk-header__tel {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  min-width: 150px;
  max-width: 500px;
  align-items: flex-end;
  gap: var(--size-space-100);
  flex: 0 0 auto;
  border-radius: 99px;
  justify-content: center;
  position: relative;
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}





.PC-top .skk-footer__sns-icon {
  width: 32px;
  height: 32px;
  position: relative;
  aspect-ratio: 1;
}











.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

.PC-top .skk-header__tel,
.PC-top .button-11 {
  cursor: pointer;
}

.PC-top .skk-header__tel,
.PC-top .button-11 {
  text-decoration: none;
}

.PC-top .skk-header__tel:focus-visible,
.PC-top .button-11:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}



@media (max-width: 1100px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4875、390px基準): カード内を縦積み ===== */
@media (max-width: 768px) {
  

  

  

  
}

/* ============================================================
   13_news
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-header__cta-icon {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}





















.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

/* Figma照合調整: 1440px超で背景帯が途切れないよう全幅化(コンテンツは中央維持) */










@media (max-width: 1440px) {
  
}

@media (max-width: 1100px) {
  
}

/* ===== SPレスポンシブ対応(Figma SP 6004:4903、390px基準): 行内を日付/タイトルの2段に ===== */
@media (max-width: 768px) {
  

  

  

  
}

/* ============================================================
   14_footer
   ============================================================ */
/* この対象要素で使用するCSSのみを anima/pc/style.css から抽出 */
.PC-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--basewhite);
}

.PC-top .skk-navlabel {
  font-weight: var(--body-s-font-weight);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-s-font-family);
  color: var(--baseblack);
  text-align: center;
  letter-spacing: var(--body-s-letter-spacing);
  font-style: var(--body-s-font-style);
}

/* Figma照合調整(01ヘッダーと同一): ロゴマーク画像は左端に原比率で配置し、
   テキストSVGは原比率のまま垂直センターに置く(全幅引き伸ばしを解除) */
.PC-top .skk-logo__rect {
  width: auto;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.PC-top .skk-logo__vector {
  position: absolute;
  width: 89.73%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 10.27%;
}

.PC-top .skk-logo__img {
  position: absolute;
  width: 89.80%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 10.20%;
}

.PC-top .skk-footer__office-name {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-top: -1px;
  font-weight: var(--body-s-font-weight);
  color: var(--baseblack);
  font-size: var(--body-s-font-size);
  letter-spacing: var(--body-s-letter-spacing);
  line-height: var(--body-s-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-s-font-family);
  font-style: var(--body-s-font-style);
}

.PC-top .skk-footer__sns-icon {
  width: 32px;
  height: 32px;
  position: relative;
  aspect-ratio: 1;
}

.PC-top .skk-footer {
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--size-space-600);
  padding: var(--size-space-800) var(--size-space-1600) var(--size-space-800)
  var(--size-space-1600);
  border-top-width: 1px;
  border-top-style: solid;
  display: flex;
  width: 1440px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--basegrey);
  border-color: var(--basegrey);
}

.PC-top .skk-footer__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC-top .skk-footer__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-200);
  position: relative;
  flex: 0 0 auto;
}

.PC-top .skk-footer__logo {
  height: 55px;
  position: relative;
  width: 500px;
  aspect-ratio: 9;
}

.PC-top .skk-footer__logo-frame {
  position: relative;
  width: 99.89%;
  height: 100.00%;
  aspect-ratio: 9.08;
}

.PC-top .skk-footer__banners {
  display: flex;
  align-items: center;
  gap: var(--size-space-200);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: var(--size-radius-200);
}

.PC-top .skk-footer__banner-service {
  position: relative;
  width: 100px;
  height: 56px;
  aspect-ratio: 1.79;
  object-fit: cover;
}

.PC-top .skk-footer__banner-zensouren {
  position: relative;
  width: 217px;
  height: 56px;
  aspect-ratio: 3.9;
  object-fit: cover;
}

.PC-top .skk-footer__banner-tamasou {
  position: relative;
  width: 166px;
  height: 56px;
  aspect-ratio: 2.97;
  object-fit: cover;
}

.PC-top .skk-footer__address {
  display: inline-flex;
  align-items: center;
  gap: var(--size-space-1200);
  position: relative;
  flex: 0 0 auto;
}

.PC-top .skk-footer__office {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-200);
  padding: var(--size-space-200) 0px var(--size-space-200) 0px;
  position: relative;
  flex: 0 0 auto;
  border-radius: var(--size-radius-200);
}

.PC-top .skk-footer__office-badge {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--size-space-100);
  padding: var(--size-space-050) var(--size-space-400) var(--size-space-050)
  var(--size-space-400);
  position: relative;
  flex: 0 0 auto;
  background-color: var(--themasecondary);
  border-radius: 9999px;
}

.PC-top .skk-footer__office-detail {
  position: relative;
  width: fit-content;
  font-family: var(--body-s-font-family);
  font-weight: var(--body-s-font-weight);
  color: var(--baseblack);
  font-size: var(--body-s-font-size);
  letter-spacing: var(--body-s-letter-spacing);
  line-height: var(--body-s-line-height);
  font-style: var(--body-s-font-style);
}

.PC-top .skk-footer__office-tel {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--size-space-050);
  position: relative;
  flex: 0 0 auto;
}

.PC-top .skk-footer__office-tel-icon {
  width: 16px;
  height: 16px;
  position: relative;
  aspect-ratio: 1;
}

.PC-top .skk-footer__office-tel-num {
  width: 99px;
  height: 20px;
  margin-top: -1px;
  font-size: var(--body-m-font-size);
  line-height: var(--body-m-line-height);
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--body-m-font-family);
  font-weight: var(--body-m-font-weight);
  color: var(--baseblack);
  letter-spacing: var(--body-m-letter-spacing);
  white-space: nowrap;
  font-style: var(--body-m-font-style);
}

.PC-top .skk-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.PC-top .skk-footer__nav-link {
  display: inline-flex;
  padding: var(--size-space-200) var(--size-space-300) var(--size-space-200)
  var(--size-space-300);
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.PC-top .skk-footer__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-600);
  padding: var(--size-space-200) 0px var(--size-space-200) 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: var(--size-radius-200);
}

.PC-top .skk-footer__copyright {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: "Zen Kaku Gothic New", Helvetica;
  font-weight: 400;
  color: var(--baseblack);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.PC-top {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

/* Figma照合調整: 1440px超で背景帯が途切れないよう全幅化(コンテンツは中央維持) */
.PC-top .skk-footer {
  width: 100%;
  max-width: none;
}

.PC-top .skk-footer__nav-link,
.PC-top .skk-footer__office-tel,
.PC-top .skk-footer__sns a {
  cursor: pointer;
}

.PC-top .skk-footer__nav-link,
.PC-top .skk-footer__office-tel {
  text-decoration: none;
}

.PC-top .skk-footer__nav-link:focus-visible,
.PC-top .skk-footer__office-tel:focus-visible,
.PC-top .skk-footer__sns a:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.PC-top .skk-footer__logo {
  max-width: 100%;
}

/* Figma照合調整: フッター全幅化に伴い、内側コンテンツは1440px相当
   (footer左右padding 64px×2を除いた1312px)で中央に固定 */
.PC-top .skk-footer__main {
  max-width: 1312px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1440px) {
  .PC-top .skk-footer {
    width: 100%;
  }
}

/* ===== SPレスポンシブ対応(Figma SP/Footer 6004:4106、390px基準) =====
   縦積み: ロゴ→認証バナー→本社/杉並支社(2列)→ナビ→SNS→コピーライト */
@media (max-width: 768px) {
  .PC-top .skk-footer {
    padding: var(--size-space-800) var(--size-space-400);
  }

  .PC-top .skk-footer__main {
    flex-direction: column;
    gap: var(--size-space-800);
  }

  .PC-top .skk-footer__logo {
    width: 330px;
    height: 36px;
  }

  .PC-top .skk-footer__banner-service,
  .PC-top .skk-footer__banner-zensouren,
  .PC-top .skk-footer__banner-tamasou {
    width: auto;
    height: 36px;
  }

  .PC-top .skk-footer__address {
    width: 100%;
    align-items: flex-start;
    gap: var(--size-space-600);
  }

  .PC-top .skk-footer__office {
    flex: 1;
    min-width: 0;
  }

  .PC-top .skk-footer__office-name {
    white-space: normal;
    width: 100%;
  }

  .PC-top .skk-footer__copyright {
    white-space: normal;
    text-align: center;
    padding: 0 var(--size-space-400);
  }

  .PC-top .skk-footer__brand {
    width: 100%;
    min-width: 0;
  }

  .PC-top .skk-footer__logo {
    max-width: 100%;
  }

  .PC-top .skk-footer__banners,
  .PC-top .skk-footer__address {
    width: 100%;
    flex-wrap: wrap;
  }

  .PC-top .skk-footer__office {
    min-width: 150px;
  }

  .PC-top .skk-footer__office-tel-num {
    width: auto;
  }
}

/* 320px級の狭幅調整 */
@media (max-width: 345px) {
  .PC-top .skk-footer__office-tel-num {
    font-size: 16px;
  }
}

/* 中間幅対応: ロゴ500px+会社情報で約1130px必要なため、1150px以下は折返し */
@media (min-width: 769px) and (max-width: 1150px) {
  .PC-top .skk-footer__main {
    flex-wrap: wrap;
    gap: var(--size-space-800);
  }
}