/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 01 2026 | 04:34:08 */
/* =========================================================
   吉津総合保険｜01 共通CSS

   全ページ共通 / 下層共通 / VOICE / FOOTER / INVIEW
   Main Color : #08475f
   Sub Color  : #0c6283
   Web Font   : 新ゴ R / 新ゴ B / A1明朝
   Lower Page Breakpoint : 800px
   TCD Parts Breakpoint  : 767px / 768px
========================================================= */

/* =========================================================
   01. COLOR
========================================================= */

:root {
  /* =========================
     BRAND COLOR
  ========================= */

  --kitsu-main: #08475f;
  --kitsu-sub: #0c6283;
  --kitsu-accent: #0a4f13;


  /* =========================
     TEXT COLOR
  ========================= */

  --kitsu-text: #2f3639;
  --kitsu-text-sub: #667176;
  --kitsu-text-light: #879095;


  /* =========================
     BACKGROUND COLOR
  ========================= */

  --kitsu-bg: #f4f8f9;
  --kitsu-bg-light: #f8fbfb;
  --kitsu-bg-accent: #eef5f6;


  /* =========================
     BORDER
  ========================= */

  --kitsu-border: #dce6e9;


  /* =========================
     BASE
  ========================= */

  --kitsu-white: #ffffff;


  /* =========================
     SHADOW
  ========================= */

  --kitsu-shadow:
    0 8px 28px rgba(8, 71, 95, 0.08);

  --kitsu-shadow-hover:
    0 14px 36px rgba(8, 71, 95, 0.13);
	
	/* =========================
   TYPOGRAPHY SIZE
   共通基準値（各パーツへ順次適用）
========================= */

/* 補助情報 */
--kitsu-fs-xs: 13px;

/* 小さめテキスト・ボタン */
--kitsu-fs-sm: 14px;

/* カード本文 */
--kitsu-fs-card: 15px;

/* 通常本文 */
--kitsu-fs-body: 17px;

/* リード文 */
--kitsu-fs-lead: 18px;

/* 小見出し */
--kitsu-fs-h4: 20px;

/* カードタイトル */
--kitsu-fs-card-title: 23px;

/* 中見出し */
--kitsu-fs-h3: 26px;

/* セクション見出し */
--kitsu-fs-h2: 36px;

/* FVメインコピー */
--kitsu-fs-hero: 48px;


/* =========================
   LINE HEIGHT
========================= */

--kitsu-lh-body: 1.9;
--kitsu-lh-heading: 1.45;
--kitsu-lh-card: 1.75;


/* =========================
   LETTER SPACING
========================= */

--kitsu-ls-body: 0.025em;
--kitsu-ls-heading: 0.04em;
--kitsu-ls-en: 0.12em;


  /* =========================
     LEGACY / UTILITY COLOR
     既存CSSとの互換用
  ========================= */

  --kitsu-green: var(--kitsu-accent);

  --kitsu-brown: #412001;
  --kitsu-redbrown: #5f1802;

  --kitsu-bg-blue: var(--kitsu-bg-accent);
  --kitsu-bg-blue-light: var(--kitsu-bg-light);
  --kitsu-bg-gray: #f6f6f6;

}

@media screen and (max-width: 800px) {

  :root {
    --kitsu-fs-xs: 12px;
    --kitsu-fs-sm: 13px;
    --kitsu-fs-card: 14px;
    --kitsu-fs-body: 16px;
    --kitsu-fs-lead: 17px;

    --kitsu-fs-h4: 18px;
    --kitsu-fs-card-title: 20px;
    --kitsu-fs-h3: 23px;
    --kitsu-fs-h2: 28px;

    --kitsu-fs-hero: 34px;
  }

}


/* =========================================================
   02. WEB FONT
   XServer Webフォント
   本文：新ゴ R / 強調・見出し：新ゴ B / ブランドコピー：A1明朝
========================================================= */

:root {

  /* 本文 */
  --kitsu-font-ja:
    "Shin Go Regular",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Kaku Gothic Pro",
    Meiryo,
    sans-serif;

  /* 見出し・太字 */
  --kitsu-font-bold:
    "Shin Go Bold",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Kaku Gothic Pro",
    Meiryo,
    sans-serif;

  /* ブランドコピー用 */
  --kitsu-font-mincho:
    "A1 Mincho",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;
	
  --kitsu-font-number:
  "Gothic MB101",
  "Yu Gothic",
  "YuGothic",
  sans-serif;
}


/* ---------------------------------------------------------
   基本フォント
--------------------------------------------------------- */

body,
input,
textarea,
select {
  font-family: var(--kitsu-font-ja);
}


/* ---------------------------------------------------------
   見出し・強調
   新ゴBは別書体として指定する
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--kitsu-font-bold);
}


/* ---------------------------------------------------------
   フォールバック時にも太字を維持
--------------------------------------------------------- */

strong,
b,
button,
input[type="submit"],
input[type="button"] {
  font-weight: 700;
}


/* ---------------------------------------------------------
   ブランドコピー用クラス
   A1明朝は必要な場所だけに付与する
--------------------------------------------------------- */

.kitsu-brand-catch {
  font-family: var(--kitsu-font-mincho);
}

/* =========================================================
   03. CONTENT BASE
========================================================= */

.lower-content {
  width: 100%;

  font-family: var(--kitsu-font-ja);

  color: var(--kitsu-text);

  font-size: 18px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.035em;

  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}


/* =========================================================
   04. H2
========================================================= */

.lower-content h2 {
  font-family: var(--kitsu-font-bold);
  position: relative;

  width: 100%;

  margin: 76px 0 30px;
  padding: 0 0 16px 20px;

  color: var(--kitsu-main);

  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;

  text-align: left;

  border-bottom: 1px solid var(--kitsu-border);

  box-sizing: border-box;
}

.lower-content h2::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.22em;

  width: 5px;
  height: 1.15em;

  background: var(--kitsu-sub);

  border-radius: 3px;
}


/* =========================================================
   05. H3
========================================================= */

.lower-content h3 {
  font-family: var(--kitsu-font-bold);
  width: 100%;

  margin: 46px 0 22px;
  padding: 15px 20px;

  color: var(--kitsu-main);
  background: var(--kitsu-bg-blue);

  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;

  text-align: left;

  border-left: 4px solid var(--kitsu-sub);
  border-radius: 4px;

  box-sizing: border-box;
}


/* =========================================================
   06. H4
========================================================= */

.lower-content h4 {
  font-family: var(--kitsu-font-bold);
  position: relative;

  margin: 34px 0 14px;
  padding-left: 16px;

  color: var(--kitsu-sub);

  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;

  text-align: left;
}

.lower-content h4::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.55em;

  width: 6px;
  height: 6px;

  background: var(--kitsu-sub);

  border-radius: 50%;
}


/* =========================================================
   07. PARAGRAPH
========================================================= */

.lower-content p {
  margin: 0 0 24px;
}

.lower-content p:last-child {
  margin-bottom: 0;
}


/* 導入文など少し大きくしたい場合 */
.lower-content .lead {
  font-size: 19px;
  line-height: 2;
}


/* =========================================================
   08. TEXT
========================================================= */

.lower-content strong,
.lower-content b {
  font-family: var(--kitsu-font-bold);
  font-weight: 700;
}

.lower-content .text-main {
  color: var(--kitsu-main);
  font-weight: 700;
}

.lower-content .text-sub {
  color: var(--kitsu-sub);
  font-weight: 700;
}

.lower-content .text-green {
  color: var(--kitsu-green);
  font-weight: 700;
}

.lower-content .text-brown {
  color: var(--kitsu-brown);
  font-weight: 700;
}

.lower-content .text-important {
  color: var(--kitsu-redbrown);
  font-weight: 700;
}

.lower-content .text-bold {
  font-weight: 700;
}

.lower-content .text-small {
  color: var(--kitsu-text-light);

  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   09. LINK
========================================================= */

.lower-content a {
  color: var(--kitsu-sub);

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.lower-content a:hover {
  color: var(--kitsu-main);
  opacity: 0.7;
}


/* =========================================================
   10. LIST
========================================================= */

.lower-content ul,
.lower-content ol {
  margin: 20px 0 30px;
  padding-left: 1.7em;
}

.lower-content li {
  margin-bottom: 8px;

  line-height: 1.85;
}

.lower-content li:last-child {
  margin-bottom: 0;
}

.lower-content li::marker {
  color: var(--kitsu-sub);
  font-weight: 700;
}


/* =========================================================
   11. CONTENT BOX
========================================================= */

.lower-content .content-box {
  margin: 32px 0;
  padding: 28px 32px;

  background: var(--kitsu-bg-blue);

  border-radius: 7px;

  box-sizing: border-box;
}

.lower-content .content-box p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   12. BORDER BOX
========================================================= */

.lower-content .border-box {
  margin: 32px 0;
  padding: 28px 32px;

  background: var(--kitsu-white);

  border: 1px solid var(--kitsu-border);
  border-radius: 7px;

  box-sizing: border-box;
}

.lower-content .border-box p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   13. IMPORTANT BOX
========================================================= */

.lower-content .important-box {
  margin: 32px 0;
  padding: 26px 30px;

  background: var(--kitsu-bg-blue-light);

  border-left: 4px solid var(--kitsu-main);
  border-radius: 4px;

  box-sizing: border-box;
}

.lower-content .important-box p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   14. NOTE
========================================================= */

.lower-content .note {
  margin: 24px 0;
  padding: 17px 20px;

  color: #666666;
  background: var(--kitsu-bg-gray);

  font-size: 15px;
  line-height: 1.8;

  border-radius: 4px;

  box-sizing: border-box;
}

.lower-content .note p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   15. TABLE
========================================================= */

.lower-content table {
  width: 100%;

  margin: 32px 0;

  border-collapse: collapse;
  border-spacing: 0;

  color: var(--kitsu-text);

  font-size: 17px;
  line-height: 1.8;
}

.lower-content th,
.lower-content td {
  padding: 18px 20px;

  border: 1px solid var(--kitsu-border);

  text-align: left;
  vertical-align: middle;
}

.lower-content th {
  width: 28%;

  color: var(--kitsu-main);
  background: var(--kitsu-bg-blue);

  font-weight: 700;
}

.lower-content td {
  background: var(--kitsu-white);
}


/* 横長テーブル用 */
.lower-content .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   16. BUTTON
========================================================= */

.lower-content .common-btn,
.lower-content .common-btn-outline {
  display: inline-flex;

  font-family: var(--kitsu-font-bold);

  align-items: center;
  justify-content: center;

  min-width: 250px;
  min-height: 58px;

  padding: 14px 36px;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;

  text-decoration: none;

  border-radius: 50px;

  box-sizing: border-box;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


/* 通常 */
.lower-content .common-btn {
  color: var(--kitsu-white);
  background: var(--kitsu-main);

  border: 1px solid var(--kitsu-main);
}

.lower-content .common-btn:hover {
  color: var(--kitsu-white);
  background: var(--kitsu-sub);

  border-color: var(--kitsu-sub);

  opacity: 1;

  transform: translateY(-2px);
}


/* 白抜き */
.lower-content .common-btn-outline {
  color: var(--kitsu-main);
  background: var(--kitsu-white);

  border: 1px solid var(--kitsu-main);
}

.lower-content .common-btn-outline:hover {
  color: var(--kitsu-white);
  background: var(--kitsu-main);

  opacity: 1;

  transform: translateY(-2px);
}


/* ボタン中央 */
.lower-content .btn-area {
  margin: 42px 0;

  text-align: center;
}


/* =========================================================
   17. HR
========================================================= */

.lower-content hr {
  margin: 55px 0;

  border: 0;
  border-top: 1px solid var(--kitsu-border);
}


/* =========================================================
   18. IMAGE
========================================================= */

.lower-content img {
  max-width: 100%;
  height: auto;
}

.lower-content figure {
  margin: 32px 0;
}

.lower-content .content-image {
  display: block;

  width: 100%;
  height: auto;

  margin: 32px 0;

  border-radius: 8px;
}

.lower-content figcaption {
  margin-top: 10px;

  color: var(--kitsu-text-light);

  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   19. BLOCKQUOTE
========================================================= */

.lower-content blockquote {
  margin: 32px 0;
  padding: 24px 28px;

  color: #555555;
  background: var(--kitsu-bg-blue-light);

  border-left: 4px solid var(--kitsu-sub);

  box-sizing: border-box;
}

.lower-content blockquote p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   20. PC / SP ONLY
========================================================= */

.lower-content .pc-only {
  display: block;
}

.lower-content .sp-only {
  display: none;
}


/* =========================================================
   21. SMARTPHONE
========================================================= */

@media screen and (max-width: 800px) {


  /* BASE
  ----------------------------------------- */

  .lower-content {
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0.025em;
  }


  /* H2
  ----------------------------------------- */

  .lower-content h2 {
    margin: 52px 0 24px;
    padding: 0 0 14px 16px;

    font-size: 25px;
    line-height: 1.45;
    letter-spacing: 0.035em;
  }

  .lower-content h2::before {
    top: 0.18em;

    width: 4px;
  }


  /* H3
  ----------------------------------------- */

  .lower-content h3 {
    margin: 38px 0 20px;
    padding: 13px 15px;

    font-size: 21px;
    line-height: 1.5;

    border-left-width: 4px;
  }


  /* H4
  ----------------------------------------- */

  .lower-content h4 {
    margin: 30px 0 14px;
    padding-left: 14px;

    font-size: 18px;
  }

  .lower-content h4::before {
    width: 5px;
    height: 5px;
  }


  /* P
  ----------------------------------------- */

  .lower-content p {
    margin-bottom: 20px;
  }

  .lower-content .lead {
    font-size: 18px;
  }


  /* LIST
  ----------------------------------------- */

  .lower-content ul,
  .lower-content ol {
    margin: 18px 0 26px;
    padding-left: 1.5em;
  }

  .lower-content li {
    margin-bottom: 7px;
  }


  /* BOX
  ----------------------------------------- */

  .lower-content .content-box,
  .lower-content .border-box {
    margin: 26px 0;
    padding: 22px 19px;

    border-radius: 6px;
  }

  .lower-content .important-box {
    margin: 26px 0;
    padding: 21px 18px;

    border-left-width: 4px;
  }


  /* NOTE
  ----------------------------------------- */

  .lower-content .text-small {
    font-size: 14px;
  }

  .lower-content .note {
    margin: 22px 0;
    padding: 15px 17px;

    font-size: 14px;
  }


  /* TABLE
  ----------------------------------------- */

  .lower-content table {
    margin: 26px 0;

    font-size: 15px;
  }

  .lower-content th,
  .lower-content td {
    padding: 14px 12px;
  }

  .lower-content th {
    width: 32%;
  }


  /* BUTTON
  ----------------------------------------- */

  .lower-content .common-btn,
  .lower-content .common-btn-outline {
    width: 100%;

    min-width: 0;
    min-height: 56px;

    padding: 13px 18px;

    font-size: 16px;
  }

  .lower-content .btn-area {
    margin: 34px 0;
  }


  /* HR
  ----------------------------------------- */

  .lower-content hr {
    margin: 42px 0;
  }


  /* IMAGE
  ----------------------------------------- */

  .lower-content figure,
  .lower-content .content-image {
    margin: 26px 0;
  }


  /* BLOCKQUOTE
  ----------------------------------------- */

  .lower-content blockquote {
    margin: 26px 0;
    padding: 20px 18px;
  }


  /* PC / SP
  ----------------------------------------- */

  .lower-content .pc-only {
    display: none;
  }

  .lower-content .sp-only {
    display: block;
  }

}

/* =========================================================
   22. VOICE
   お客様の声 / 共通
========================================================= */


/* カード全体
--------------------------------------------------------- */

.p-voice-cards-item {
  display: flex;
  flex-direction: column;

  height: 100%;
}

.p-voice-cards-item__content {
  display: flex;
  flex-direction: column;

  flex: 1;
}


/* タイトル
--------------------------------------------------------- */

.p-voice-cards-item__title {
  margin: 0 !important;

  font-family: var(--kitsu-font-bold);
  padding: 40px 40px 8px !important;

  text-align: left !important;
}


/* お客様の声 本文
--------------------------------------------------------- */

.p-voice-cards-item__voice {
  margin: 0;

  font-family: var(--kitsu-font-ja);
  padding: 30px 40px;

  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;

  color: #555;

  font-size: 15px;
  line-height: 2;

  text-align: left;
}


/* 地域・年代をカード下部に揃える
--------------------------------------------------------- */

.p-voice-caption_item {
  margin-top: auto;

  font-family: var(--kitsu-font-ja);
}


/* 地域・年代の左に人アイコン
--------------------------------------------------------- */

.p-voice-caption_item span {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;
}

.p-voice-caption_item span::before {
  content: "";

  width: 18px;
  height: 18px;

  flex-shrink: 0;

  background-color: #666;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}


/* =========================================================
   22-1. VOICE
   PC・タブレット：768px以上
========================================================= */

@media screen and (min-width: 768px) {

  .p-voice-cards-item__voice {
    min-height: 220px;
  }

}


/* =========================================================
   22-2. VOICE
   スマホ：767px以下
========================================================= */

@media screen and (max-width: 767px) {


  /* カード全体
  ------------------------------------------------------- */

  .p-voice-cards-item,
  .p-voice-cards-item__content {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
  }


  /* 画像を見切れず全部表示
  ------------------------------------------------------- */

  .p-voice-cards-item__image {
    width: 100%;

    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    overflow: visible !important;
  }

  .p-voice-cards-item__image img,
  .p-voice-cards-item__image .c-thumbnail-image {
    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100%;

    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
  }


  /* タイトル
  ------------------------------------------------------- */

  .p-voice-cards-item__title {
    width: 100%;
    max-width: 100%;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 22px 20px 0 !important;

    box-sizing: border-box;

    text-align: left !important;
  }

  .p-voice-cards-item__title .c-line-clamp {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* お客様の声 本文
  ------------------------------------------------------- */

  .p-voice-cards-item__voice {
    width: 100%;
    max-width: 100%;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 20px 22px !important;

    box-sizing: border-box;

    font-size: 14px;
    line-height: 1.9;

    white-space: normal;

    overflow-wrap: anywhere;
    word-break: normal;
  }


  /* 地域・年代
  ------------------------------------------------------- */

  .p-voice-caption_item {
    width: 100%;
    max-width: 100%;

    margin-top: 0;

    box-sizing: border-box;
  }

}

/* =========================================================
   23. FOOTER
========================================================= */


/* =========================================================
   23-1. バナー画像の色味
========================================================= */


/* 事故時の連絡先 */

.p-footer-banner__item:nth-child(1) .c-thumbnail-image {
  filter:
    brightness(0.92)
    saturate(0.92);
}


/* お客様の声 */

.p-footer-banner__item:nth-child(2) .c-thumbnail-image {
  filter:
    brightness(0.97)
    saturate(0.92);
}


/* アクセス */

.p-footer-banner__item:nth-child(3) .c-thumbnail-image {
  filter:
    brightness(0.95)
    saturate(0.75);
}


/* =========================================================
   23-2. フッター3カラム
========================================================= */

.p-footer-main {
  align-items: flex-start !important;
}


/* =========================================================
   23-3. メニュー共通リセット
========================================================= */

.p-footer-main > .p-footer-nav,
.p-footer-main > .p-footer-nav ul {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.p-footer-main > .p-footer-nav li {
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

.p-footer-main > .p-footer-nav a {
  height: auto !important;
  min-height: 0 !important;

  margin: 0;

  text-decoration: none !important;

  box-sizing: border-box;
}


/* =========================================================
   23-4. 中央カラム
   会社案内 / サービス
========================================================= */

.p-footer-main
> .p-footer-nav:first-of-type {
  min-width: 0;
}


/* 会社案内 / サービスのブロック間 */

.p-footer-main
> .p-footer-nav:first-of-type
> li {
  display: block !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 0 40px !important;
  padding: 0 !important;

  gap: 0 !important;
}

.p-footer-main
> .p-footer-nav:first-of-type
> li:last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   23-5. 中央カラム
   見出し
========================================================= */

.p-footer-main
> .p-footer-nav:first-of-type
> li
> a {
  position: relative;

  display: block !important;

  font-family: var(--kitsu-font-bold);

  height: auto !important;
  min-height: 0 !important;

  margin: 0 0 10px !important;
  padding: 0 0 8px !important;

  color: #08475f !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.05em;

  transition:
    color 0.25s ease;
}


/* 見出し下ライン */

.p-footer-main
> .p-footer-nav:first-of-type
> li
> a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 30px;
  height: 2px;

  background: #0c6283;

  transition:
    width 0.25s ease;
}


.p-footer-main
> .p-footer-nav:first-of-type
> li
> a:hover {
  color: #0c6283 !important;
}


.p-footer-main
> .p-footer-nav:first-of-type
> li
> a:hover::after {
  width: 45px;
}


/* =========================================================
   23-6. 中央カラム
   SUB MENU
========================================================= */

.p-footer-main
> .p-footer-nav:first-of-type
.sub-menu {
  display: block !important;

  position: static !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 0 !important;
  row-gap: 0 !important;
}


/* 子項目 */

.p-footer-main
> .p-footer-nav:first-of-type
.sub-menu
li {
  display: block !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 0 3px !important;
  padding: 0 !important;

  gap: 0 !important;
}

.p-footer-main
> .p-footer-nav:first-of-type
.sub-menu
li:last-child {
  margin-bottom: 0 !important;
}


/* 子リンク */

.p-footer-main
> .p-footer-nav:first-of-type
.sub-menu
a {
  position: relative;

  display: inline-block !important;

  font-family: var(--kitsu-font-ja);

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding:
    4px
    0
    4px
    15px !important;

  color: #444 !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


/* 親見出し用の下線を解除 */

.p-footer-main
> .p-footer-nav:first-of-type
.sub-menu
a::after {
  content: none !important;

  display: none !important;
}


/* 子リンク矢印 */

.p-footer-main
> .p-footer-nav:first-of-type
.sub-menu
a::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 1px;

  width: 5px;
  height: 5px;

  border-top: 1px solid #0c6283;
  border-right: 1px solid #0c6283;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* hover */

.p-footer-main
> .p-footer-nav:first-of-type
.sub-menu
a:hover {
  color: #0c6283 !important;

  transform: translateX(3px);
}


/* =========================================================
   23-7. 右カラム
   事故時の連絡先 / お客様の声 / お知らせ /
   プライバシーポリシー / 勧誘方針
========================================================= */

.p-footer-main
> .p-footer-nav:last-of-type {
  display: block !important;

  min-width: 0;

  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;

  border-top: 1px solid #dce5e8;
}


/* 各項目 */

.p-footer-main
> .p-footer-nav:last-of-type
> li {
  margin: 0 !important;
  padding: 0 !important;

  border-bottom:
    1px solid #dce5e8 !important;
}


/* リンク */

.p-footer-main
> .p-footer-nav:last-of-type
> li
> a {
  position: relative;

  display: flex !important;

  font-family: var(--kitsu-font-ja);
  align-items: center !important;

  width: 100%;

  margin: 0 !important;

  color: #444 !important;
  background: transparent !important;

  border-radius: 0 !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}


/* 右矢印 */

.p-footer-main
> .p-footer-nav:last-of-type
> li
> a::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 5px;

  width: 6px;
  height: 6px;

  border-top:
    1px solid #0c6283;

  border-right:
    1px solid #0c6283;

  transform:
    translateY(-50%)
    rotate(45deg);

  transition:
    right 0.25s ease;
}


/* hover */

.p-footer-main
> .p-footer-nav:last-of-type
> li
> a:hover {
  padding-left: 7px !important;

  color: #0c6283 !important;
}

.p-footer-main
> .p-footer-nav:last-of-type
> li
> a:hover::after {
  right: 0;
}


/* =========================================================
   23-8. PC・TABLET
   中央 / 右カラム位置＋右メニュー高さ
========================================================= */

@media screen and (min-width: 768px) {


  /* 中央カラムを下げる */

  .p-footer-main
  > .p-footer-nav:first-of-type {
    margin-top: 60px !important;
  }


  /* 右カラムを下げる */

  .p-footer-main
  > .p-footer-nav:last-of-type {
    margin-top: 60px !important;
  }


  /* 右カラム5項目の高さを統一 */

  .p-footer-main
  > .p-footer-nav:last-of-type
  > li {
    height: 66px !important;
    min-height: 66px !important;
  }


  .p-footer-main
  > .p-footer-nav:last-of-type
  > li
  > a {
    width: 100% !important;

    height: 66px !important;
    min-height: 66px !important;

    padding:
      0
      25px
      0
      2px !important;
  }


  /* 事故時の連絡先も完全に同じ指定 */

  .p-footer-main
  > .p-footer-nav:last-of-type
  > li:first-child,

  .p-footer-main
  > .p-footer-nav:last-of-type
  > li:first-child
  > a {
    height: 66px !important;
    min-height: 66px !important;

    margin: 0 !important;

    background: transparent !important;

    border-radius: 0 !important;
  }

}


/* =========================================================
   23-9. FOOTER TABLET
   768～991px
========================================================= */

@media screen and (min-width: 768px) and (max-width: 991px) {


  .p-footer-main
  > .p-footer-nav:first-of-type
  > li {
    margin-bottom: 16px !important;
  }


  .p-footer-main
  > .p-footer-nav:first-of-type
  > li
  > a {
    font-size: 15px !important;
  }


  .p-footer-main
  > .p-footer-nav:first-of-type
  .sub-menu
  a,

  .p-footer-main
  > .p-footer-nav:last-of-type
  > li
  > a {
    font-size: 13px !important;
  }

}


/* =========================================================
   23-10. FOOTER
   800px以下：メニュー非表示
========================================================= */

@media screen and (max-width: 800px) {

  body .l-footer .p-footer-main .p-footer-nav {
    display: none !important;
    visibility: hidden !important;
  }

}

/* =========================================================
   24. 共通 INVIEW
   Scroll Animation
========================================================= */


/* ---------------------------------------------------------
   24-1. Fade Up
   基本アニメーション
--------------------------------------------------------- */

.c-inview-fadein,
.c-inview-up {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}

.c-inview-fadein.is-inview,
.c-inview-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   24-2. Fade
   移動なし
--------------------------------------------------------- */

.c-inview-fade {
  opacity: 0;

  transition:
    opacity 1s ease;

  will-change: opacity;
}

.c-inview-fade.is-inview {
  opacity: 1;
}


/* ---------------------------------------------------------
   24-3. Image Scale
   写真向け
--------------------------------------------------------- */

.c-inview-scale {
  opacity: 0;
  transform: scale(1.045);

  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}

.c-inview-scale.is-inview {
  opacity: 1;
  transform: scale(1);
}


/* ---------------------------------------------------------
   24-4. Fade Left
--------------------------------------------------------- */

.c-inview-left {
  opacity: 0;
  transform: translateX(-24px);

  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}

.c-inview-left.is-inview {
  opacity: 1;
  transform: translateX(0);
}


/* ---------------------------------------------------------
   24-5. Fade Right
--------------------------------------------------------- */

.c-inview-right {
  opacity: 0;
  transform: translateX(24px);

  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}

.c-inview-right.is-inview {
  opacity: 1;
  transform: translateX(0);
}


/* ---------------------------------------------------------
   24-6. Mask Reveal
   キャッチコピー向け
--------------------------------------------------------- */

.c-inview-mask {
  overflow: hidden;
}

.c-inview-mask > * {
  opacity: 0;
  transform: translateY(110%);

  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}

.c-inview-mask.is-inview > * {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   24-7. Delay
--------------------------------------------------------- */

.c-delay-01 {
  transition-delay: 0.08s !important;
}

.c-delay-02 {
  transition-delay: 0.16s !important;
}

.c-delay-03 {
  transition-delay: 0.24s !important;
}

.c-delay-04 {
  transition-delay: 0.32s !important;
}

.c-delay-05 {
  transition-delay: 0.40s !important;
}


/* ---------------------------------------------------------
   24-8. SP
--------------------------------------------------------- */

@media screen and (max-width: 800px) {

  .c-inview-fadein,
  .c-inview-up {
    transform: translateY(18px);
  }

  .c-inview-left {
    transform: translateX(-18px);
  }

  .c-inview-right {
    transform: translateX(18px);
  }


  .c-inview-fadein.is-inview,
  .c-inview-up.is-inview {
    transform: translateY(0);
  }

  .c-inview-left.is-inview,
  .c-inview-right.is-inview {
    transform: translateX(0);
  }

}


/* ---------------------------------------------------------
   24-9. アニメーション軽減設定
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .c-inview-fadein,
  .c-inview-up,
  .c-inview-fade,
  .c-inview-scale,
  .c-inview-left,
  .c-inview-right,
  .c-inview-mask > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}
/* =========================================================
   PHONE NUMBER｜共通
========================================================= */

/* ヘッダー */
.p-header_tel_number {
  font-family: var(--kitsu-font-number) !important;
  font-size: 38px;
  font-weight: 800 !important;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.p-header_tel_number {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
}

.p-header_tel_number .tel_number_icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  flex: 0 0 26px;
}

.p-header_tel_number .tel_number_icon svg {
  display: block;

  width: 100%;
  height: 100%;
}

.p-header-cta__tel-info {
  margin-top: -3px !important;
  line-height: 1.3 !important;
}

/* フッター */
.p-footer-button_phone_number p {
  font-family: var(--kitsu-font-number) !important;
  font-size: 31px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   404 / 検索結果ページ
   INVIEW無効化
========================================================= */
body.error404 .c-inview-fadein,
body.search .c-inview-fadein {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}