/* variables */
/*
 * generated by Sitepat Firebase 2026-04-10 09:28:44
 * source: 基本設定 + theme_styles variables
 */
:root {
  --base-radius-m: 0;
  --base-en-fontfamily: var(--font-roboto);
  --base-font-size: 16px;
  --base-line-height: 1.5;
  --base-letter-spacing: 0;
  --base-font-weight: 400;
  --base-font-bold-weight: 700;
  --pcol-mv-border-radius: 16px;
  --header-company-name-sp-fs: 16px;
  --header-company-name-sp-fw: 700;
  --header-company-name-sp-lh: inherit;
  --header-company-name-sp-ls: 0.05em;
  --header-company-name-pc-fs: 20px;
  --header-company-name-pc-fw: 700;
  --header-company-name-pc-lh: inherit;
  --header-company-name-pc-ls: 0.06em;
  --header-drawer-sp-fs: 16px;
  --header-drawer-sp-fw: 700;
  --header-drawer-sp-lh: inherit;
  --header-drawer-sp-ls: 0.06em;
  --header-drawer-pc-fs: 14px;
  --header-drawer-pc-fw: 700;
  --header-drawer-pc-lh: inherit;
  --header-drawer-pc-ls: 0.04em;
  --header-cta-sp-fs: 16px;
  --header-cta-sp-fw: 700;
  --header-cta-sp-lh: inherit;
  --header-cta-sp-ls: 0.06em;
  --header-cta-pc-fs: 14px;
  --header-cta-pc-fw: 700;
  --header-cta-pc-lh: inherit;
  --header-cta-pc-ls: 0.04em;
  --mv-h1-sp-fs: 28px;
  --mv-h1-sp-fw: 700;
  --mv-h1-sp-lh: 1.25;
  --mv-h1-sp-ls: 0.09em;
  --mv-h1-pc-fs: 56px;
  --mv-h1-pc-fw: 700;
  --mv-h1-pc-lh: 1.3;
  --mv-h1-pc-ls: 0.06em;
  --mv-h1-sub-sp-fs: 14px;
  --mv-h1-sub-sp-fw: 400;
  --mv-h1-sub-sp-lh: 1.5;
  --mv-h1-sub-sp-ls: 0.09em;
  --mv-h1-sub-pc-fs: 18px;
  --mv-h1-sub-pc-fw: 400;
  --mv-h1-sub-pc-lh: 1.7;
  --mv-h1-sub-pc-ls: 0.08em;
  --message-h2-main-sp-fs: 24px;
  --message-h2-main-sp-fw: 700;
  --message-h2-main-sp-lh: 1.25;
  --message-h2-main-sp-ls: 0.08em;
  --message-h2-main-pc-fs: 36px;
  --message-h2-main-pc-fw: 700;
  --message-h2-main-pc-lh: 1.5;
  --message-h2-main-pc-ls: 0.08em;
  --message-h2-sub-sp-fs: 14px;
  --message-h2-sub-sp-fw: 400;
  --message-h2-sub-sp-lh: 1.5;
  --message-h2-sub-sp-ls: 0.09em;
  --message-h2-sub-pc-fs: 20px;
  --message-h2-sub-pc-fw: 400;
  --message-h2-sub-pc-lh: inherit;
  --message-h2-sub-pc-ls: 0.06em;
  --message-section-lead-sp-fs: 16px;
  --message-section-lead-sp-fw: 400;
  --message-section-lead-sp-lh: 1.6;
  --message-section-lead-sp-ls: 0.06em;
  --message-section-lead-pc-fs: 16px;
  --message-section-lead-pc-fw: 400;
  --message-section-lead-pc-lh: 1.7;
  --message-section-lead-pc-ls: 0.06em;
  --message-bg-title-sp-fs: 64px;
  --message-bg-title-sp-fw: 700;
  --message-bg-title-sp-lh: 1;
  --message-bg-title-sp-ls: 0.02em;
  --message-bg-title-pc-fs: 160px;
  --message-bg-title-pc-fw: 700;
  --message-bg-title-pc-lh: 1;
  --message-bg-title-pc-ls: 0.04em;
  --message-core-head-sp-fs: 20px;
  --message-core-head-sp-fw: 700;
  --message-core-head-sp-lh: 1.5;
  --message-core-head-sp-ls: 0.07em;
  --message-core-head-pc-fs: 32px;
  --message-core-head-pc-fw: 700;
  --message-core-head-pc-lh: 1.4;
  --message-core-head-pc-ls: 0.08em;
  --message-core-text-sp-fs: 16px;
  --message-core-text-sp-fw: 400;
  --message-core-text-sp-lh: 1.6;
  --message-core-text-sp-ls: 0.07em;
  --message-core-text-pc-fs: 18px;
  --message-core-text-pc-fw: 400;
  --message-core-text-pc-lh: 1.7;
  --message-core-text-pc-ls: 0.08em;
  --message-slide-caption-sp-fs: 12px;
  --message-slide-caption-sp-fw: 400;
  --message-slide-caption-sp-lh: 1.5;
  --message-slide-caption-sp-ls: 0.05em;
  --message-slide-caption-pc-fs: 14px;
  --message-slide-caption-pc-fw: 400;
  --message-slide-caption-pc-lh: 1.5;
  --message-slide-caption-pc-ls: 0.06em;
  --service-h2-sp-fs: 24px;
  --service-h2-sp-fw: 700;
  --service-h2-sp-lh: 1.25;
  --service-h2-sp-ls: 0.08em;
  --service-h2-pc-fs: 36px;
  --service-h2-pc-fw: 700;
  --service-h2-pc-lh: 1.5;
  --service-h2-pc-ls: 0.08em;
  --service-h2-sub-sp-fs: 14px;
  --service-h2-sub-sp-fw: 400;
  --service-h2-sub-sp-lh: 1.5;
  --service-h2-sub-sp-ls: 0.09em;
  --service-h2-sub-pc-fs: 20px;
  --service-h2-sub-pc-fw: 400;
  --service-h2-sub-pc-lh: inherit;
  --service-h2-sub-pc-ls: 0.06em;
  --service-section-lead-sp-fs: 16px;
  --service-section-lead-sp-fw: 400;
  --service-section-lead-sp-lh: 1.6;
  --service-section-lead-sp-ls: 0.06em;
  --service-section-lead-pc-fs: 16px;
  --service-section-lead-pc-fw: 400;
  --service-section-lead-pc-lh: 1.7;
  --service-section-lead-pc-ls: 0.06em;
  --service-block-title-sub-sp-fs: 14px;
  --service-block-title-sub-sp-fw: 400;
  --service-block-title-sub-sp-lh: 1.5;
  --service-block-title-sub-sp-ls: 0.09em;
  --service-block-title-sub-pc-fs: 16px;
  --service-block-title-sub-pc-fw: 400;
  --service-block-title-sub-pc-lh: 1.4;
  --service-block-title-sub-pc-ls: 0.06em;
  --service-block-title-sp-fs: 20px;
  --service-block-title-sp-fw: 700;
  --service-block-title-sp-lh: 1.4;
  --service-block-title-sp-ls: 0.07em;
  --service-block-title-pc-fs: 32px;
  --service-block-title-pc-fw: 700;
  --service-block-title-pc-lh: 1.4;
  --service-block-title-pc-ls: 0.06em;
  --service-block-description-sp-fs: 16px;
  --service-block-description-sp-fw: 400;
  --service-block-description-sp-lh: 1.6;
  --service-block-description-sp-ls: 0.06em;
  --service-block-description-pc-fs: 16px;
  --service-block-description-pc-fw: 400;
  --service-block-description-pc-lh: 1.7;
  --service-block-description-pc-ls: 0.06em;
  --service-tag-sp-fs: 12px;
  --service-tag-sp-fw: 400;
  --service-tag-sp-lh: 1.2;
  --service-tag-sp-ls: 0.05em;
  --service-tag-pc-fs: 14px;
  --service-tag-pc-fw: 400;
  --service-tag-pc-lh: inherit;
  --service-tag-pc-ls: 0.04em;
  --service-list-sp-fs: 16px;
  --service-list-sp-fw: 400;
  --service-list-sp-lh: 1.6;
  --service-list-sp-ls: 0.06em;
  --service-list-pc-fs: 16px;
  --service-list-pc-fw: 400;
  --service-list-pc-lh: 1.7;
  --service-list-pc-ls: 0.06em;
  --service-btn-sp-fs: 16px;
  --service-btn-sp-fw: 700;
  --service-btn-sp-lh: inherit;
  --service-btn-sp-ls: 0.06em;
  --service-btn-pc-fs: 16px;
  --service-btn-pc-fw: Bold;
  --service-btn-pc-lh: inherit;
  --service-btn-pc-ls: 0.06em;
  --service-notice-sp-fs: 12px;
  --service-notice-sp-fw: 400;
  --service-notice-sp-lh: 1.5;
  --service-notice-sp-ls: 0.05em;
  --service-notice-pc-fs: 14px;
  --service-notice-pc-fw: 400;
  --service-notice-pc-lh: 1.5;
  --service-notice-pc-ls: 0.06em;
  --works-h2-sp-fs: 24px;
  --works-h2-sp-fw: 700;
  --works-h2-sp-lh: 1.25;
  --works-h2-sp-ls: 0.08em;
  --works-h2-pc-fs: 36px;
  --works-h2-pc-fw: 700;
  --works-h2-pc-lh: 1.5;
  --works-h2-pc-ls: 0.08em;
  --works-h2-sub-sp-fs: 14px;
  --works-h2-sub-sp-fw: 400;
  --works-h2-sub-sp-lh: 1.5;
  --works-h2-sub-sp-ls: 0.09em;
  --works-h2-sub-pc-fs: 20px;
  --works-h2-sub-pc-fw: 400;
  --works-h2-sub-pc-lh: inherit;
  --works-h2-sub-pc-ls: 0.06em;
  --works-section-lead-sp-fs: 16px;
  --works-section-lead-sp-fw: 400;
  --works-section-lead-sp-lh: 1.6;
  --works-section-lead-sp-ls: 0.06em;
  --works-section-lead-pc-fs: 16px;
  --works-section-lead-pc-fw: 400;
  --works-section-lead-pc-lh: 1.7;
  --works-section-lead-pc-ls: 0.06em;
  --works-slider-title-sp-fs: 18px;
  --works-slider-title-sp-fw: 700;
  --works-slider-title-sp-lh: 1.4;
  --works-slider-title-sp-ls: 0.08em;
  --works-slider-title-pc-fs: 22px;
  --works-slider-title-pc-fw: 700;
  --works-slider-title-pc-lh: 1.5;
  --works-slider-title-pc-ls: 0.06em;
  --works-slider-title-sub-sp-fs: 14px;
  --works-slider-title-sub-sp-fw: 400;
  --works-slider-title-sub-sp-lh: 1.5;
  --works-slider-title-sub-sp-ls: 0.09em;
  --works-slider-title-sub-pc-fs: 18px;
  --works-slider-title-sub-pc-fw: 400;
  --works-slider-title-sub-pc-lh: 1.5;
  --works-slider-title-sub-pc-ls: 0.05em;
  --works-slider-description-sp-fs: 16px;
  --works-slider-description-sp-fw: 400;
  --works-slider-description-sp-lh: 1.6;
  --works-slider-description-sp-ls: 0.06em;
  --works-slider-description-pc-fs: 16px;
  --works-slider-description-pc-fw: 400;
  --works-slider-description-pc-lh: 1.7;
  --works-slider-description-pc-ls: 0.06em;
  --works-slider-tag-sp-fs: 12px;
  --works-slider-tag-sp-fw: 400;
  --works-slider-tag-sp-lh: 1.2;
  --works-slider-tag-sp-ls: 0.05em;
  --works-slider-tag-pc-fs: 14px;
  --works-slider-tag-pc-fw: 400;
  --works-slider-tag-pc-lh: inherit;
  --works-slider-tag-pc-ls: 0.04em;
  --works-silder-btn-sp-fs: 16px;
  --works-silder-btn-sp-fw: 700;
  --works-silder-btn-sp-lh: inherit;
  --works-silder-btn-sp-ls: 0.06em;
  --works-silder-btn-pc-fs: 16px;
  --works-silder-btn-pc-fw: Bold;
  --works-silder-btn-pc-lh: inherit;
  --works-silder-btn-pc-ls: 0.06em;
  --works-notice-sp-fs: 12px;
  --works-notice-sp-fw: 400;
  --works-notice-sp-lh: 1.5;
  --works-notice-sp-ls: 0.05em;
  --works-notice-pc-fs: 14px;
  --works-notice-pc-fw: 400;
  --works-notice-pc-lh: 1.5;
  --works-notice-pc-ls: 0.06em;
  --company-h2-sp-fs: 24px;
  --company-h2-sp-fw: 700;
  --company-h2-sp-lh: 1.25;
  --company-h2-sp-ls: 0.08em;
  --company-h2-pc-fs: 36px;
  --company-h2-pc-fw: 700;
  --company-h2-pc-lh: 1.5;
  --company-h2-pc-ls: 0.08em;
  --company-h2-sub-sp-fs: 14px;
  --company-h2-sub-sp-fw: 400;
  --company-h2-sub-sp-lh: 1.5;
  --company-h2-sub-sp-ls: 0.09em;
  --company-h2-sub-pc-fs: 20px;
  --company-h2-sub-pc-fw: 400;
  --company-h2-sub-pc-lh: inherit;
  --company-h2-sub-pc-ls: 0.06em;
  --company-section-lead-sp-fs: 16px;
  --company-section-lead-sp-fw: 400;
  --company-section-lead-sp-lh: 1.6;
  --company-section-lead-sp-ls: 0.06em;
  --company-section-lead-pc-fs: 16px;
  --company-section-lead-pc-fw: 400;
  --company-section-lead-pc-lh: 1.7;
  --company-section-lead-pc-ls: 0.06em;
  --company-bg-title-sp-fs: 64px;
  --company-bg-title-sp-fw: 700;
  --company-bg-title-sp-lh: 1;
  --company-bg-title-sp-ls: 0.02em;
  --company-bg-title-pc-fs: 160px;
  --company-bg-title-pc-fw: 700;
  --company-bg-title-pc-lh: 1;
  --company-bg-title-pc-ls: 0.04em;
  --company-item-label-sp-fs: 16px;
  --company-item-label-sp-fw: 700;
  --company-item-label-sp-lh: 1.5;
  --company-item-label-sp-ls: 0.06em;
  --company-item-label-pc-fs: 16px;
  --company-item-label-pc-fw: 700;
  --company-item-label-pc-lh: 1.7;
  --company-item-label-pc-ls: 0.06em;
  --company-item-value-sp-fs: 16px;
  --company-item-value-sp-fw: 400;
  --company-item-value-sp-lh: 1.6;
  --company-item-value-sp-ls: 0.06em;
  --company-item-value-pc-fs: 16px;
  --company-item-value-pc-fw: 400;
  --company-item-value-pc-lh: 1.7;
  --company-item-value-pc-ls: 0.06em;
  --contact-h2-sp-fs: 20px;
  --contact-h2-sp-fw: 700;
  --contact-h2-sp-lh: 1.4;
  --contact-h2-sp-ls: 0.07em;
  --contact-h2-pc-fs: 36px;
  --contact-h2-pc-fw: 700;
  --contact-h2-pc-lh: 1.5;
  --contact-h2-pc-ls: 0.08em;
  --contact-lead-sp-fs: 16px;
  --contact-lead-sp-fw: 400;
  --contact-lead-sp-lh: 1.6;
  --contact-lead-sp-ls: 0.06em;
  --contact-lead-pc-fs: 16px;
  --contact-lead-pc-fw: 400;
  --contact-lead-pc-lh: 1.7;
  --contact-lead-pc-ls: 0.06em;
  --contact-cta-txt-sp-fs: 28px;
  --contact-cta-txt-sp-fw: 700;
  --contact-cta-txt-sp-lh: inherit;
  --contact-cta-txt-sp-ls: 0.03em;
  --contact-cta-txt-pc-fs: 36px;
  --contact-cta-txt-pc-fw: 700;
  --contact-cta-txt-pc-lh: inherit;
  --contact-cta-txt-pc-ls: 0.02em;
  --contact-cta-note-sp-fs: 12px;
  --contact-cta-note-sp-fw: 400;
  --contact-cta-note-sp-lh: 1.5;
  --contact-cta-note-sp-ls: 0.05em;
  --contact-cta-note-pc-fs: 14px;
  --contact-cta-note-pc-fw: 400;
  --contact-cta-note-pc-lh: 1.5;
  --contact-cta-note-pc-ls: 0.06em;
  --contact-btn-txt-sp-fs: 16px;
  --contact-btn-txt-sp-fw: 700;
  --contact-btn-txt-sp-lh: 1.35;
  --contact-btn-txt-sp-ls: 0.06em;
  --contact-btn-txt-pc-fs: 18px;
  --contact-btn-txt-pc-fw: 700;
  --contact-btn-txt-pc-lh: 1.5;
  --contact-btn-txt-pc-ls: 0.05em;
  --contact-btn-note-sp-fs: 12px;
  --contact-btn-note-sp-fw: 400;
  --contact-btn-note-sp-lh: 1.2;
  --contact-btn-note-sp-ls: 0.05em;
  --contact-btn-note-pc-fs: 14px;
  --contact-btn-note-pc-fw: 400;
  --contact-btn-note-pc-lh: 1.5;
  --contact-btn-note-pc-ls: 0.06em;
  --news-h2-sp-fs: 24px;
  --news-h2-sp-fw: 700;
  --news-h2-sp-lh: 1.25;
  --news-h2-sp-ls: 0.08em;
  --news-h2-pc-fs: 36px;
  --news-h2-pc-fw: 700;
  --news-h2-pc-lh: 1.5;
  --news-h2-pc-ls: 0.08em;
  --news-h2-sub-sp-fs: 14px;
  --news-h2-sub-sp-fw: 400;
  --news-h2-sub-sp-lh: 1.5;
  --news-h2-sub-sp-ls: 0.09em;
  --news-h2-sub-pc-fs: 20px;
  --news-h2-sub-pc-fw: 400;
  --news-h2-sub-pc-lh: inherit;
  --news-h2-sub-pc-ls: 0.06em;
  --news-section-lead-sp-fs: 16px;
  --news-section-lead-sp-fw: 400;
  --news-section-lead-sp-lh: 1.6;
  --news-section-lead-sp-ls: 0.06em;
  --news-section-lead-pc-fs: 16px;
  --news-section-lead-pc-fw: 400;
  --news-section-lead-pc-lh: 1.7;
  --news-section-lead-pc-ls: 0.06em;
  --news-item-title-sp-fs: 16px;
  --news-item-title-sp-fw: 400;
  --news-item-title-sp-lh: 1.5;
  --news-item-title-sp-ls: 0.06em;
  --news-item-title-pc-fs: 18px;
  --news-item-title-pc-fw: 400;
  --news-item-title-pc-lh: 1.5;
  --news-item-title-pc-ls: 0.05em;
  --news-item-date-sp-fs: 12px;
  --news-item-date-sp-fw: 400;
  --news-item-date-sp-lh: 1.2;
  --news-item-date-sp-ls: 0.05em;
  --news-item-date-pc-fs: 14px;
  --news-item-date-pc-fw: 400;
  --news-item-date-pc-lh: inherit;
  --news-item-date-pc-ls: 0.04em;
  --news-item-category-sp-fs: 12px;
  --news-item-category-sp-fw: 400;
  --news-item-category-sp-lh: 1.2;
  --news-item-category-sp-ls: 0.05em;
  --news-item-category-pc-fs: 14px;
  --news-item-category-pc-fw: 400;
  --news-item-category-pc-lh: inherit;
  --news-item-category-pc-ls: 0.04em;
  --faq-h2-sp-fs: 24px;
  --faq-h2-sp-fw: 700;
  --faq-h2-sp-lh: 1.25;
  --faq-h2-sp-ls: 0.08em;
  --faq-h2-pc-fs: 36px;
  --faq-h2-pc-fw: 700;
  --faq-h2-pc-lh: 1.5;
  --faq-h2-pc-ls: 0.08em;
  --faq-h2-sub-sp-fs: 14px;
  --faq-h2-sub-sp-fw: 400;
  --faq-h2-sub-sp-lh: 1.5;
  --faq-h2-sub-sp-ls: 0.09em;
  --faq-h2-sub-pc-fs: 20px;
  --faq-h2-sub-pc-fw: 400;
  --faq-h2-sub-pc-lh: inherit;
  --faq-h2-sub-pc-ls: 0.06em;
  --faq-section-lead-sp-fs: 16px;
  --faq-section-lead-sp-fw: 400;
  --faq-section-lead-sp-lh: 1.6;
  --faq-section-lead-sp-ls: 0.06em;
  --faq-section-lead-pc-fs: 16px;
  --faq-section-lead-pc-fw: 400;
  --faq-section-lead-pc-lh: 1.7;
  --faq-section-lead-pc-ls: 0.06em;
  --faq-q-sp-fs: 16px;
  --faq-q-sp-fw: 700;
  --faq-q-sp-lh: 1.4;
  --faq-q-sp-ls: 0.05em;
  --faq-q-pc-fs: 18px;
  --faq-q-pc-fw: 700;
  --faq-q-pc-lh: 1.5;
  --faq-q-pc-ls: 0.05em;
  --faq-q-label-sp-fs: 16px;
  --faq-q-label-sp-fw: 700;
  --faq-q-label-sp-lh: 1.4;
  --faq-q-label-sp-ls: 0.05em;
  --faq-q-label-pc-fs: 18px;
  --faq-q-label-pc-fw: 700;
  --faq-q-label-pc-lh: 1.5;
  --faq-q-label-pc-ls: 0.05em;
  --faq-a-sp-fs: 16px;
  --faq-a-sp-fw: 400;
  --faq-a-sp-lh: 1.5;
  --faq-a-sp-ls: 0.06em;
  --faq-a-pc-fs: 16px;
  --faq-a-pc-fw: 400;
  --faq-a-pc-lh: 1.7;
  --faq-a-pc-ls: 0.06em;
  --flow-h2-sp-fs: 24px;
  --flow-h2-sp-fw: 700;
  --flow-h2-sp-lh: 1.25;
  --flow-h2-sp-ls: 0.08em;
  --flow-h2-pc-fs: 36px;
  --flow-h2-pc-fw: 700;
  --flow-h2-pc-lh: 1.5;
  --flow-h2-pc-ls: 0.08em;
  --flow-h2-sub-sp-fs: 14px;
  --flow-h2-sub-sp-fw: 400;
  --flow-h2-sub-sp-lh: 1.5;
  --flow-h2-sub-sp-ls: 0.09em;
  --flow-h2-sub-pc-fs: 20px;
  --flow-h2-sub-pc-fw: 400;
  --flow-h2-sub-pc-lh: inherit;
  --flow-h2-sub-pc-ls: 0.06em;
  --flow-section-lead-sp-fs: 16px;
  --flow-section-lead-sp-fw: 400;
  --flow-section-lead-sp-lh: 1.6;
  --flow-section-lead-sp-ls: 0.06em;
  --flow-section-lead-pc-fs: 16px;
  --flow-section-lead-pc-fw: 400;
  --flow-section-lead-pc-lh: 1.7;
  --flow-section-lead-pc-ls: 0.06em;
  --flow-step-title-sp-fs: 18px;
  --flow-step-title-sp-fw: 700;
  --flow-step-title-sp-lh: 1.4;
  --flow-step-title-sp-ls: 0.08em;
  --flow-step-title-pc-fs: 22px;
  --flow-step-title-pc-fw: 700;
  --flow-step-title-pc-lh: 1.5;
  --flow-step-title-pc-ls: 0.06em;
  --flow-step-title-sub-sp-fs: 14px;
  --flow-step-title-sub-sp-fw: 400;
  --flow-step-title-sub-sp-lh: 1.5;
  --flow-step-title-sub-sp-ls: 0.09em;
  --flow-step-title-sub-pc-fs: 18px;
  --flow-step-title-sub-pc-fw: 400;
  --flow-step-title-sub-pc-lh: 1.5;
  --flow-step-title-sub-pc-ls: 0.05em;
  --flow-step-number-sp-fs: 44px;
  --flow-step-number-sp-fw: 700;
  --flow-step-number-sp-lh: inherit;
  --flow-step-number-sp-ls: 0.02em;
  --flow-step-number-pc-fs: 84px;
  --flow-step-number-pc-fw: 700;
  --flow-step-number-pc-lh: 0.8;
  --flow-step-number-pc-ls: 0.02em;
  --flow-step-label-sp-fs: 24px;
  --flow-step-label-sp-fw: 700;
  --flow-step-label-sp-lh: 1.4;
  --flow-step-label-sp-ls: 0.04em;
  --flow-step-label-pc-fs: 40px;
  --flow-step-label-pc-fw: 700;
  --flow-step-label-pc-lh: 1;
  --flow-step-label-pc-ls: 0.04em;
  --flow-step-body-sp-fs: 16px;
  --flow-step-body-sp-fw: 400;
  --flow-step-body-sp-lh: 1.6;
  --flow-step-body-sp-ls: 0.06em;
  --flow-step-body-pc-fs: 16px;
  --flow-step-body-pc-fw: 400;
  --flow-step-body-pc-lh: 1.7;
  --flow-step-body-pc-ls: 0.06em;
  --footer-nav-item-sp-fs: 14px;
  --footer-nav-item-sp-fw: 700;
  --footer-nav-item-sp-lh: inherit;
  --footer-nav-item-sp-ls: 0.05em;
  --footer-nav-item-pc-fs: 14px;
  --footer-nav-item-pc-fw: 700;
  --footer-nav-item-pc-lh: inherit;
  --footer-nav-item-pc-ls: 0.04em;
  --footer-copyright-sp-fs: 12px;
  --footer-copyright-sp-fw: 400;
  --footer-copyright-sp-lh: 1.5;
  --footer-copyright-sp-ls: 0.05em;
  --footer-copyright-pc-fs: 14px;
  --footer-copyright-pc-fw: 400;
  --footer-copyright-pc-lh: inherit;
  --footer-copyright-pc-ls: 0.04em;
  --footer-company-name-sp-fs: 16px;
  --footer-company-name-sp-fw: 700;
  --footer-company-name-sp-lh: inherit;
  --footer-company-name-sp-ls: 0.05em;
  --footer-company-name-pc-fs: 20px;
  --footer-company-name-pc-fw: 700;
  --footer-company-name-pc-lh: inherit;
  --footer-company-name-pc-ls: 0.06em;
  --footer-address-sp-fs: 14px;
  --footer-address-sp-fw: 400;
  --footer-address-sp-lh: 1.5;
  --footer-address-sp-ls: 0.09em;
  --footer-address-pc-fs: 16px;
  --footer-address-pc-fw: 400;
  --footer-address-pc-lh: 1.4;
  --footer-address-pc-ls: 0.06em;
}

/* colors */
/*
 * generated by Sitepat Firebase 2026-04-10 09:28:44
 * source: 基本設定 + component colors
 */
:root {
  --pcol-strong-text: linear-gradient(135deg, #07aeea, #2bf598);
  --pcol-base-color-1: #0C396C;
  --pcol-base-color-2: #f1f4f8;
  --pcol-base-color-3: #F2F2F2;
  --pcol-base-white: #FFFFFF;
  --pcol-base-black: #2A2F4E;
  --basecol-brand-main: #004EA2;
  --basecol-brand-secondary: #f2f5f8;
  --basecol-brand-tertiary: #F2F2F2;
  --basecol-text-primary: #243242;
  --basecol-text-secondary: #67727e;
  --basecol-text-tertiary: #DBDBDB;
  --basecol-btn-cv: #005EEB;
  --basecol-white: #FFFFFF;
  --basecol-lightgray: #F2F2F2;
  --basecol-gray: #C0C0C0;
  --basecol-black: #111111;
  --pcol-mv-catchphrase-color: #FFFFFF;
  --pcol-mv-sub-catchphrase-color: #FFFFFF;
  --pcol-mv-bg-color: #FFFFFF;
  --pcol-mv-overlay-color: rgb(42, 47, 78,0.3);
  --pcol-message-bg-color: linear-gradient(111deg, #1731C6, #69E9F1);
  --pcol-message-core-head-color: #FFFFFF;
  --pcol-message-core-text-color: #FFFFFF;
  --pcol-message-bg-title-color: rgba(255, 255, 255, 0.10);
  --pcol-message-slide-caption-color: #FFFFFF;
  --pcol-service-bg-color-1: #FFFFFF;
  --pcol-service-tag-bg-color: #F2F2F2;
  --pcol-service-tag-text-color: #67727e;
  --pcol-service-list-text-color: #67727e;
  --pcol-service-btn-bg-color: #004EA2;
  --pcol-service-btn-text-color: #243242;
  --pcol-service-item-title-color: #243242;
  --pcol-service-item-subtitle-color: #004EA2;
  --pcol-service-item-description-color: #243242;
  --pcol-service-section-title-color: #243242;
  --pcol-service-section-title-en-color: #004EA2;
  --pcol-service-section-lead-color: #243242;
  --pcol-service-notice-color: #67727e;
  --pcol-faq-bg-color: #f2f5f8;
  --pcol-faq-text-color: #243242;
  --pcol-faq-item-bg-color: #FFFFFF;
  --pcol-faq-q-label-color: #004EA2;
  --pcol-faq-q-text-color: #243242;
  --pcol-faq-a-text-color: #243242;
  --pcol-faq-section-title-color: #243242;
  --pcol-faq-section-title-en-color: #004EA2;
  --pcol-faq-section-lead-color: #243242;
  --pcol-company-bg-color: #FFFFFF;
  --pcol-company-text-color: #243242;
  --pcol-company-bg-title-color: #f2f5f8;
  --pcol-company-item-bg-color: #f2f5f8;
  --pcol-company-section-title-color: #243242;
  --pcol-company-section-title-en-color: #004EA2;
  --pcol-company-section-lead-color: #243242;
  --pcol-works-base-bg-color: #f2f5f8;
  --pcol-works-base-tag-bg: #FFFFFF;
  --pcol-works-base-tag-text: #67727e;
  --pcol-works-base-title-color: #243242;
  --pcol-works-base-subtitle-color: #67727e;
  --pcol-works-base-desc-color: #243242;
  --pcol-works-base-btn-bg: #004EA2;
  --pcol-works-base-btn-text: #FFFFFF;
  --pcol-works-base-section-title-color: #243242;
  --pcol-works-base-section-title-en-color: #004EA2;
  --pcol-works-base-section-lead-color: #243242;
  --pcol-works-base-notice-color: #67727e;
  --pcol-works-acc-bg-color: linear-gradient(111deg, #1731C6, #69E9F1);
  --pcol-works-acc-tag-bg: #FFFFFF;
  --pcol-works-acc-tag-text: #004EA2;
  --pcol-works-acc-title-color: #FFFFFF;
  --pcol-works-acc-subtitle-color: #FFFFFF;
  --pcol-works-acc-desc-color: #FFFFFF;
  --pcol-works-acc-btn-bg: #FFFFFF;
  --pcol-works-acc-btn-text: #004EA2;
  --pcol-works-acc-section-title-color: #FFFFFF;
  --pcol-works-acc-section-title-en-color: #FFFFFF;
  --pcol-works-acc-section-lead-color: #FFFFFF;
  --pcol-works-acc-notice-color: #FFFFFF;
  --pcol-works-base-pagination-bar: #C0C0C0;
  --pcol-works-base-pagination-active: #004EA2;
  --pcol-works-acc-pagination-bar: rgba(255,255,255,0.3);
  --pcol-works-acc-pagination-active: #FFFFFF;
  --pcol-flow-bg-color: #FFFFFF;
  --pcol-flow-text-color: #243242;
  --pcol-flow-accent-color: #004EA2;
  --pcol-flow-card-num-color: #004EA2;
  --pcol-flow-card-head-color: #243242;
  --pcol-flow-card-head-sub-color: #004EA2;
  --pcol-flow-card-text-color: #243242;
  --pcol-flow-section-title-color: #243242;
  --pcol-flow-section-title-en-color: #004EA2;
  --pcol-flow-section-lead-color: #243242;
  --pcol-flow-pagination-bar: #F2F2F2;
  --pcol-flow-pagination-active: #243242;
  --pcol-contact-bg-color: #FFFFFF;
  --pcol-contact-card-bg-color: rgba(255, 255, 255, 0.80);
  --pcol-contact-card-text-color: #0C396C;
  --pcol-contact-title-color: #004EA2;
  --pcol-contact-section-intro-color: #243242;
  --pcol-header-menu-color-pc: #243242;
  --pcol-header-menu-color-sp: #243242;
  --pcol-hamburger-bg-color: transparent;
  --pcol-hamburger-icon-color: #243242;
  --pcol-logo-color: #004EA2;
  --pcol-cta-bg: #004EA2;
  --pcol-cta-text: #FFFFFF;
  --pcol-sp-drawer-bg: #FFFFFF;
  --pcol-footer-bg-color: linear-gradient(111deg, #1731C6, #69E9F1);
  --pcol-footer-text-color: #FFFFFF;
}

/* common */
@charset "UTF-8";
:root {
  --font-sans: Noto Sans JP, sans-serif;
  --font-serif: Noto Serif JP, serif;
  --font-rounded: M PLUS Rounded 1c, sans-serif;
  --font-roboto: Roboto, sans-serif;
  --font-jost: Jost, sans-serif;
  --font-lato: Lato, sans-serif;
}

.font-sans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-serif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-rounded {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-style: normal;
}

.font-roboto {
  font-family: "Roboto", sans-serif;
  font-style: normal;
}

.font-jost {
  font-family: "Jost", sans-serif;
  font-style: normal;
}

.font-lato {
  font-family: "Lato", sans-serif;
  font-style: normal;
}

:root {
  --col-black: #45494b;
  --col-white: #fff;
  --col-gray1: #777;
  --col-gray2: #bbb;
  --col-gray3: #b5b5b5;
  --col-gray4: #989898;
  --col-base-green: #005c55;
  --col-light-green: #bed5d3;
  --col-light-gray1: #f5f5f5;
  --col-light-gray2: #efefef;
  --col-light-gray3: #e6e6e6;
  --col-light-gray4: #e6e6e6;
  --col-light-gray5: #e1e1e1;
  --col-red: #ef4c6f;
  --col-blue: #3286d9;
  --col-pink: #ffdfdf;
  --font-color-main: var(--col-black);
  --font-color-link: var(--col-blue);
  --font-gothic: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Hiragino Kaku Gothic ProN, Noto Sans JP, Meiryo, sans-serif;
  --font-mincho: Hiragino Mincho ProN, Noto Serif JP, 游明朝, Yu Mincho, MS PMincho, serif;
  --font-noto-sans: Noto Sans JP, sans-serif;
  --font-noto-serif: Noto Serif JP, serif;
  --font-biz-udp-gothic: BIZ UDPGothic, sans-serif;
  --font-roboto: Roboto, sans-serif;
  --font-lato: Lato, sans-serif;
  --font-jost: Jost, sans-serif;
  --font-en: Jost, sans-serif;
}

/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/* Document
   ========================================================================== */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
body {
  margin: 0;
}

/* Grouping content
   ========================================================================== */
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
abbr[title] {
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 2 */
  line-height: 1.15; /* 3 */
  margin: 0; /* 4 */
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 3 */
  max-width: 100%; /* 4 */
  padding: 0; /* 5 */
  white-space: normal; /* 6 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
details {
  display: block;
}

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
template {
  display: none;
}

[hidden] {
  display: none;
}

html {
  font-size: 2.667vw;
  line-height: 1.6;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--font-color-main);
}

/*
body {
  font-size: 14px // 1.4rem; // pixelベースに
}
*/
* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

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

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

a {
  transition: opacity 0.2s ease-out 0s;
}
a:hover {
  opacity: 0.8;
}

p {
  margin: 0;
}

br.br-sp {
  display: none;
}
@media (max-width: 768px) {
  br.br-sp {
    display: inline;
  }
}
br.br-pc {
  display: none;
}
@media (min-width: 769px) {
  br.br-pc {
    display: inline;
  }
}

a {
  color: var(--font-color-link);
}
a.outer {
  padding-right: 1.2em;
  position: relative;
  margin-right: 2px;
  /*
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 2px;
    width: 0.95em;
    height: 100%;
    background: url(../img/icon/ic_outer_link.svg) no-repeat center / 100% auto;
  }
  */
}

select {
  appearance: none; /* ブラウザのデフォルトUIを無効化 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--col-white);
  border: 1px solid var(--col-base-green);
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: var(--font-biz-udp-gothic);
  color: var(--col-base-green);
  width: 100%;
  height: 46px;
  max-width: 500px;
  text-align: left;
  background-image: url("../img/icon/ic_chevron_down.svg");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 769px) {
  select {
    border: 2px solid var(--col-base-green);
    height: 60px;
    background-size: 20px;
    max-width: 480px;
    font-size: 1.8rem;
  }
}

.radio-button {
  display: block;
  margin-bottom: 12px;
}
.radio-button span {
  display: block;
  text-align: center;
  padding: 14px;
  border: 1px solid var(--col-base-green);
  border-radius: 8px;
  font-weight: bold;
  font-family: var(--font-biz-udp-gothic);
  font-size: 1.4rem;
  color: var(--col-base-green);
  background: var(--col-white);
  transition: all 0.2s ease-out;
  cursor: pointer;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio-button span.selected {
  background: var(--col-base-green);
  color: var(--col-white);
}
@media (min-width: 769px) {
  .radio-button span {
    border: 2px solid var(--col-base-green);
    height: 60px;
    font-size: 1.8rem;
  }
}
.radio-button input[type=radio] {
  display: none;
}

input[type=text],
input[type=email],
input[type=tel],
textarea {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--col-light-gray5);
  border-radius: 8px;
  font-size: 1.2em;
  color: var(--col-black);
  background-color: var(--col-white);
  transition: all 0.2s ease-out;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
textarea::placeholder {
  color: var(--col-gray2);
}
@media (min-width: 769px) {
  input[type=text],
  input[type=email],
  input[type=tel],
  textarea {
    border: 2px solid var(--col-base-green);
  }
}

textarea {
  width: 100%;
  height: 150px;
}

.error input[type=text],
.error input[type=email],
.error input[type=tel] {
  background: var(--col-pink);
}
@media (min-width: 769px) {
  .error input[type=text],
  .error input[type=email],
  .error input[type=tel] {
    background: var(--col-pink);
  }
}

.cb-label {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 20px;
  font-family: var(--font-biz-udp-gothic);
  color: var(--col-black);
  display: flex;
  align-items: center;
  height: 20px;
}
@media (min-width: 769px) {
  .cb-label {
    font-size: 1.8rem;
    min-height: 36px;
  }
}
.cb-label input[type=checkbox] {
  display: none;
}
.cb-label input[type=checkbox]:checked + span::before {
  border-color: var(--col-base-green);
  background: var(--col-base-green);
}
.cb-label input[type=checkbox]:checked + span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 10px;
  height: 4px;
  border-left: 3px solid var(--col-white);
  border-bottom: 3px solid var(--col-white);
  transform: rotate(-45deg);
}
@media (min-width: 769px) {
  .cb-label input[type=checkbox]:checked + span::after {
    top: 10px;
    left: 7px;
    width: 18px;
    height: 8px;
    border-left: 5px solid var(--col-white);
    border-bottom: 5px solid var(--col-white);
  }
}
.cb-label span {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
  line-height: 20px;
  display: inline-block;
}
@media (min-width: 769px) {
  .cb-label span {
    padding-left: 54px;
    line-height: 36px;
  }
}
.cb-label span::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--col-gray2);
  border-radius: 4px;
  background: var(--col-white);
}
@media (min-width: 769px) {
  .cb-label span::before {
    width: 36px;
    height: 36px;
    border: 2px solid var(--col-gray2);
  }
}

.submit-button {
  display: inline-block;
  width: 100%;
  padding-bottom: 6px;
}
@media (min-width: 769px) {
  .submit-button {
    width: auto;
  }
}
.submit-button button {
  width: 100%;
  outline: inherit;
  border: none;
  position: relative;
  display: block;
  padding: 0;
  background: none;
  max-width: 600px;
  cursor: pointer;
}
.submit-button button span {
  width: 100%;
  height: 64px;
  border-radius: 8px;
  display: block;
  background: var(--col-base-green);
  position: relative;
  font-size: 1.8rem;
  font-weight: 700;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  letter-spacing: 0.15em;
  transition: all 0.2s ease-out;
}
@media (min-width: 769px) {
  .submit-button button span {
    font-size: 2.4rem;
    height: 90px;
    width: 600px;
  }
}
.submit-button button::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  margin: auto;
  background: url(../img/icon/ic_chevron_right.svg) no-repeat center center/100% auto;
  z-index: 12;
}
@media (min-width: 769px) {
  .submit-button button::before {
    width: 24px;
    height: 24px;
  }
}
.submit-button button::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 8px;
  top: 6px;
  left: 0;
  width: 100%;
  height: 64px;
  background: var(--col-light-green);
  z-index: 0;
  transition: all 0.2s ease-out;
}
@media (min-width: 769px) {
  .submit-button button::after {
    height: 90px;
    width: 600px;
  }
}
.submit-button button.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.submit-button button.disabled span {
  background: var(--col-gray3);
}
.submit-button button.disabled::after {
  background: var(--col-gray4);
}

/*# sourceMappingURL=common.css.map */

/* styles */
@charset "UTF-8";
/* v2026-04-05: multi SP header floating card */
:root {
  --bold: var(--base-font-bold-weight, 700);
}

html {
  color: var(--font-color-main);
}

body {
  background: var(--col-white);
  font-size: var(--base-font-size, 14px);
  line-height: var(--base-line-height, 1.6);
  font-weight: var(--base-font-weight, 400);
}

a {
  text-decoration: none;
  color: var(--font-color-link);
}

strong {
  font-weight: var(--bold, 700);
  color: var(--pcol-strong-text, var(--pcol-base-color-2, var(--col-blue)));
  background: var(--pcol-strong-text, var(--pcol-base-color-2, var(--col-blue)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.container {
  width: 100%;
}

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

.hidden {
  display: none !important;
}



.bg-title {
  overflow: hidden;
  width: 100%;
}

.bg-title .marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: bg-marquee 60s linear infinite;
  line-height: 1 !important;
  gap: 0.5em;
}

@keyframes bg-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.slider-base {
  width: 100%;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.slider-base .slider-wrapper {
  display: inline-flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  will-change: transform;
  animation-name: marquee-slide;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--marquee-duration, 60s);
  animation-play-state: paused;
}
.slider-base .slide-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-base.is-marquee-ready {
  opacity: 1;
}
.slider-base.is-marquee-ready .slider-wrapper {
  animation-play-state: running;
}

@keyframes marquee-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--marquee-distance, -50%));
  }
}
header .header-wrap .logo .company-name {
  font-size: var(--header-company-name-sp-fs);
  font-weight: var(--header-company-name-sp-fw);
  line-height: var(--header-company-name-sp-lh);
  letter-spacing: var(--header-company-name-sp-ls);
}
@media (min-width: 768px) {
  header .header-wrap .logo .company-name {
    font-size: var(--header-company-name-pc-fs, var(--header-company-name-sp-fs));
    font-weight: var(--header-company-name-pc-fw, var(--header-company-name-sp-fw));
    line-height: var(--header-company-name-pc-lh, var(--header-company-name-sp-lh));
    letter-spacing: var(--header-company-name-pc-ls, var(--header-company-name-sp-ls));
  }
}
header {
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
}
@media (min-width: 768px) {
  header {
    padding: 32px 40px;
  }
}
header .header-wrap {
  max-width: 1920px;
  height: 60px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1490196078);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  padding-left: 12px;
}
@media (min-width: 768px) {
  header .header-wrap {
    padding-left: 24px;
    padding-right: 16px;
    border-radius: 8px;
    height: 64px;
    justify-content: flex-start;
  }
}
header .header-wrap .logo {
  width: auto;
  height: auto;
  margin: 0;
}
header .header-wrap .logo img {
  height: auto;
  width: auto;
  max-height: 32px;
}
@media (min-width: 768px) {
  header .header-wrap .logo img {
    max-height: 50px;
  }
}
header .header-wrap .logo a {
  display: contents;
  color: inherit;
  text-decoration: none;
}
header .header-wrap .logo .company-name {
  color: var(--pcol-logo-color, var(--pcol-base-color-1));
  font-family: var(--base-en-fontfamily, var(--font-sans));
}
header .header-wrap .header-nav {
  display: none;
}
@media (min-width: 768px) {
  header .header-wrap .header-nav {
    margin-left: auto;
    margin-right: 40px;
    display: flex;
    gap: 32px;
  }
  header .header-wrap .header-nav li a {
    color: var(--pcol-header-menu-color-pc, var(--pcol-base-black, var(--col-black)));
  }
}
header .header-wrap .button-wrap {
  display: none;
}
@media (min-width: 768px) {
  header .header-wrap .button-wrap {
    display: block;
  }
}
header .header-wrap .button-wrap a {
  display: inline-block;
  padding: 8px 20px;
  background: var(--pcol-cta-bg, var(--pcol-base-color-2, var(--col-blue)));
  color: var(--pcol-cta-text, var(--pcol-base-white, var(--col-white)));
  border-radius: 8px;
  font-weight: bold;
}
header .header-wrap .button-wrap a:hover {
  opacity: 0.8;
}
header .header-drawer-menu {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
}
@media (min-width: 768px) {
  header .header-drawer-menu {
    display: none;
  }
}
header .header-drawer-menu .button-wrap {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1100;
  background: var(--pcol-hamburger-bg-color, var(--pcol-base-color-1, var(--col-blue)));
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  top: 10px;
  right: 12px;
  cursor: pointer;
}
header .header-drawer-menu .button-wrap .hamburger {
  width: 18px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}
header .header-drawer-menu .button-wrap .hamburger span, header .header-drawer-menu .button-wrap .hamburger::before, header .header-drawer-menu .button-wrap .hamburger::after {
  width: 100%;
  height: 2px;
  position: absolute;
  transition: all 0.3s ease;
  display: block;
  background: var(--pcol-hamburger-icon-color, var(--pcol-base-white, var(--col-white)));
}
header .header-drawer-menu .button-wrap .hamburger::before, header .header-drawer-menu .button-wrap .hamburger::after {
  content: "";
}
header .header-drawer-menu .button-wrap .hamburger::before {
  transform: translate(0, -7px);
}
header .header-drawer-menu .button-wrap .hamburger::after {
  transform: translate(0, 7px);
}
header .header-drawer-menu .modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}
header .header-drawer-menu .drawer-wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 280px;
  background: var(--pcol-sp-drawer-bg, var(--pcol-base-white, #fff));
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius: 24px 0 0 24px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;
}
header .header-drawer-menu .drawer-close {
  display: none;
}
header .header-drawer-menu .drawer-close svg {
  width: 20px;
  height: 20px;
}
header .header-drawer-menu .drawer-nav {
  list-style: none;
  margin: 76px 0 0;
  padding: 0 40px;
}
header .header-drawer-menu .drawer-nav li {
  margin: 0;
  padding: 24px 0;
}
header .header-drawer-menu .drawer-nav li:first-child {
  padding-top: 8px;
  padding-bottom: 20px;
}
header .header-drawer-menu .drawer-nav li a {
  display: block;
  text-align: center;
  color: var(--pcol-header-menu-color-sp, var(--pcol-base-black, #0c396c));
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.96px;
}
header .header-drawer-menu .drawer-cta {
  margin-top: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
header .header-drawer-menu .drawer-cta-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 16px 16px 32px;
  border-radius: 8px;
  background: var(--pcol-sp-menu-cta-bg, var(--pcol-base-color-1, #005eeb));
  color: var(--pcol-sp-menu-cta-text, #fff);
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
header .header-drawer-menu .drawer-cta-btn .cta-text {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
header .header-drawer-menu .drawer-cta-btn .cta-sub {
  font-size: 12px;
}
header .header-drawer-menu .drawer-cta-btn .cta-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.96px;
}
header .header-drawer-menu .drawer-cta-btn .cta-arrow {
  flex-shrink: 0;
  width: 20px;
}
header .header-drawer-menu.open .button-wrap .hamburger span {
  opacity: 0;
}
header .header-drawer-menu.open .button-wrap .hamburger::before {
  transform: rotate(45deg);
}
header .header-drawer-menu.open .button-wrap .hamburger::after {
  transform: rotate(-45deg);
}
header .header-drawer-menu.open .modal-bg {
  opacity: 1;
  pointer-events: auto;
}
header .header-drawer-menu.open .drawer-wrap {
  transform: translateX(0);
}


/* ============================================================
   [HEADER] 1024px ブレイクポイント追加 (0305差分)
   styles.css は min-width:769px で PC レイアウトに切り替わるが、
   769-1023px 帯ではナビテキストが改行されるため 1024px に変更。
   ============================================================ */

/* 769-1023px: styles.css min-width:769px の PC ルールを SP 状態に強制戻し */
@media (max-width: 1023px) {
  /* floating card 外余白を除去（SP は padding なし） */
  header {
    padding: 0;
  }
  /* header-wrap を SP 値に戻す */
  header .header-wrap {
    padding-left: 12px;
    padding-right: 0;
    border-radius: 0;
    height: 60px;
    justify-content: space-between;
  }
  /* PC ナビ・ボタンを非表示 */
  header .header-wrap .header-nav {
    display: none;
  }
  header .header-wrap .button-wrap {
    display: none;
  }
  /* ハンバーガーを表示（styles.css の display:none を解除） */
  header .header-drawer-menu {
    display: block;
  }
}

/* multi タイプ SP ヘッダー: フローティングカード (Figma node 710:3) */
@media (max-width: 1023px) {
  .sitepat-multi header {
    padding: 8px 8px 0;
  }
  .sitepat-multi header .header-wrap {
    border-radius: 8px;
  }
  /* ハンバーガーボタン右位置: header外側padding(8px)分をオフセット */
  .sitepat-multi header .header-drawer-menu .button-wrap {
    right: 16px;
  }
}
/* 768-1023px: タイプ別ハンバーガー top 位置調整
   （768px+ で header-wrap 高さが変わるため、<768px のデフォルト top:10px を上書き） */
@media (min-width: 768px) and (max-width: 1023px) {
  /* multi: header padding 8px + (60-40)/2 = 18px */
  .sitepat-multi header .header-drawer-menu .button-wrap {
    top: 18px;
  }
  /* square: wrap 72px → (72-40)/2 = 16px */
  .sitepat-square header .header-drawer-menu .button-wrap {
    top: 16px;
  }
}

/* 1024px+: PC レイアウト（新ブレイクポイント）Figma node:55:2942 準拠 */
@media (min-width: 1024px) {
  /* ① outer padding: Figma py-[32px] px-[40px] — 幅縮小時に左右を clamp で圧縮 */
  header {
    padding: 32px clamp(16px, 3vw, 40px);
  }
  /* ② logo: 幅不足時は縮小許可 + 右 margin で余白確保 */
  header .header-wrap .logo {
    flex-shrink: 1;
    min-width: 0;
    margin-right: clamp(12px, 2vw, 40px);
    overflow: hidden;
    max-width: 30%;
  }
  header .header-wrap .logo img {
    max-height: 40px;
  }
  /* ③ nav: auto spacing（max ~40px gap）、right-aligned
     flex-basis: 520px = 5items×70px + 4gaps×40px ≈ 510px (バッファ込み)
     margin-left:auto で nav+button を右端に寄せる
     viewport 縮小時は flex-shrink:1 で 520px→比例縮小
     min-width:0 で white-space:nowrap 由来の min-content 制約を解除し
     会社名が長い場合もボタンが header-wrap 外に押し出されないよう保護
     gap:0 で styles.css の gap:32px を打ち消し（space-between のみで間隔制御）
     → 会社名が長くなり nav が縮小しても items が nav 外にはみ出さない */
  header .header-wrap .header-nav {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    gap: clamp(8px, 2vw, 40px);
    margin-left: auto;
    margin-right: clamp(8px, 1.5vw, 40px);
    justify-content: flex-end;
    align-items: center;
    height: 100%;
  }
  /* ④ nav item: whitespace-nowrap（font-size / letter-spacing はスプレッドシート管理） */
  header .header-wrap .header-nav li a {
    white-space: nowrap;
  }
  /* ⑤ button-wrap: flex-shrink 防止 */
  header .header-wrap .button-wrap {
    display: block;
    flex-shrink: 0;
  }
  /* ハンバーガー非表示 */
  header .header-drawer-menu {
    display: none;
  }
  /* ⑥ CTA button: Figma h-[40px] px-[32px]（font-size / letter-spacing はスプレッドシート管理） */
  header .header-wrap .button-wrap a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 32px;
    white-space: nowrap;
  }
  /* ⑦ 会社名テキスト1行強制 */
  header .header-wrap .logo .company-name {
    white-space: nowrap;
  }
}

#mv .mv-base-contents h1 {
  font-size: var(--mv-h1-sp-fs);
  font-weight: var(--mv-h1-sp-fw);
  line-height: var(--mv-h1-sp-lh);
  letter-spacing: var(--mv-h1-sp-ls);
}
@media (min-width: 768px) {
  #mv .mv-base-contents h1 {
    font-size: var(--mv-h1-pc-fs, var(--mv-h1-sp-fs));
    font-weight: var(--mv-h1-pc-fw, var(--mv-h1-sp-fw));
    line-height: var(--mv-h1-pc-lh, var(--mv-h1-sp-lh));
    letter-spacing: var(--mv-h1-pc-ls, var(--mv-h1-sp-ls));
  }
}
#mv .mv-base-contents .sub-catchphrase {
  font-size: var(--mv-h1-sub-sp-fs);
  font-weight: var(--mv-h1-sub-sp-fw);
  line-height: var(--mv-h1-sub-sp-lh);
  letter-spacing: var(--mv-h1-sub-sp-ls);
}
@media (min-width: 768px) {
  #mv .mv-base-contents .sub-catchphrase {
    font-size: var(--mv-h1-sub-pc-fs, var(--mv-h1-sub-sp-fs));
    font-weight: var(--mv-h1-sub-pc-fw, var(--mv-h1-sub-sp-fw));
    line-height: var(--mv-h1-sub-pc-lh, var(--mv-h1-sub-sp-lh));
    letter-spacing: var(--mv-h1-sub-pc-ls, var(--mv-h1-sub-sp-ls));
  }
}
#mv {
  position: relative;
  overflow: hidden;
  padding: 90px 16px 0;
  background: var(--pcol-mv-bg-color, var(--pcol-base-white, var(--col-white)));
}
@media (min-width: 768px) {
  #mv {
    padding: 128px 0 0;
  }
}
#mv .mv-bg-image {
  margin: 24px auto 0;
  position: relative;
  inset: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: var(--pcol-mv-border-radius, 16px);
  max-width: 1920px;
}
@media (min-width: 768px) {
  #mv .mv-bg-image {
    aspect-ratio: 136/70;
    padding: 0 40px;
    margin: 40px auto 0;
  }
}
#mv .mv-bg-image .img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
#mv .mv-bg-image .img-wrap img {
  width: auto;
  height: 100%;
  max-width: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  #mv .mv-bg-image .img-wrap img {
    height: auto;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* --- MV スライドショー --- */
/* 1枚のみ: .mv-slideに追加CSSなし → 従来と同じ表示 */
/* 2枚以上: スライドショー */
#mv .mv-bg-image .mv-slide:not(:only-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  overflow: hidden;
  z-index: 0;
}
/* 1枚目は relative にしてコンテナの高さを確保（height:auto テンプレート対応） */
#mv .mv-bg-image .mv-slide:not(:only-child):first-child {
  position: relative;
}
/* active（現在のスライド）: フェードインで前面に */
#mv .mv-bg-image .mv-slide:not(:only-child).active {
  opacity: 1;
  z-index: 2;
}
/* prev（前のスライド）: フェード中も表示を維持（背景透け防止） */
#mv .mv-bg-image .mv-slide:not(:only-child).prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}
#mv .mv-bg-image .mv-slide:not(:only-child).active img {
  animation: mv-kenburns 3s ease-out forwards;
}
/* スライドショー画像: object-fit coverで全面カバー（SP/PC共通） */
#mv .mv-bg-image .mv-slide:not(:only-child) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  position: static !important;
  transform: none;
  max-width: none;
}
@keyframes mv-kenburns {
  from { transform: scale(1.1); }
  to   { transform: scale(1.0); }
}
/* --- /MV スライドショー --- */
#mv .container {
  max-width: 1000px;
  margin-inline: auto;
  padding: 48px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 60vh;
}
#mv .mv-base-contents {
  position: relative;
  max-width: 1920px;
  z-index: 1;
  padding: 0 8px;
}
@media (min-width: 768px) {
  #mv .mv-base-contents {
    padding: 0 60px;
    margin: auto;
  }
}
#mv .mv-base-contents h1 {
  color: var(--pcol-mv-catchphrase-color, var(--pcol-base-color-1, var(--col-black)));
}
#mv .mv-base-contents .sub-catchphrase {
  margin-top: 24px;
  color: var(--pcol-mv-sub-catchphrase-color, var(--pcol-base-color-1, var(--col-black)));
}
@media (min-width: 768px) {
  #mv .mv-base-contents .sub-catchphrase {
    margin-top: 40px;
  }
}
#mv .cta {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}
#mv .cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--pcol-cta-bg, #2563eb);
  color: var(--pcol-cta-text, #fff);
  font-weight: 700;
}


/* ============================================
   [MV] Figma差分 - レスポンシブ画像挙動・間隔修正
   Figma: umAEO5ecZMOcydeEKfPTqG / node 13:762(PC) 13:865(SP)
   ============================================ */

/* --- SP (〜767px) --- */

/* padding-top: 90px → 80px */
#mv {
  padding-top: 80px;
}

/* コンテンツ水平パディング SP: template 8px → 4px (視覚上合計20px = #mv 16px + 4px)
   PC: template 60px をそのまま利用（グローバル指定を外す） */
@media (max-width: 767px) {
  #mv .mv-base-contents {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* キャッチコピー〜サブキャッチ間隔: 24px → 16px */
#mv .mv-base-contents .sub-catchphrase {
  margin-top: 16px;
}

/* SP画像コンテナ: border-radius: SS制御 */
#mv .mv-bg-image {
  border-radius: var(--pcol-mv-border-radius, 16px);
}

/* SP画像: 自然サイズ表示 + img-wrap自体に角丸（object-fit cropでも角丸が見えるよう） */
/* position: relative でスライドショーの absolute 配置基準を img-wrap に統一 */
#mv .mv-bg-image .img-wrap {
  position: relative;
  height: auto;
  border-radius: var(--pcol-mv-border-radius, 16px);
  overflow: hidden;
}
#mv .mv-bg-image .img-wrap picture {
  display: block;
}
#mv .mv-bg-image .img-wrap img {
  position: static;
  width: 100%;
  height: auto;
  transform: none;
}

/* --- PC (769px〜) --- */
@media (min-width: 768px) {
  /* padding-top: 160px → 140px */
  #mv {
    padding-top: 140px;
  }

  /* キャッチコピー〜サブキャッチ間隔: 40px → 32px */
  #mv .mv-base-contents .sub-catchphrase {
    margin-top: 32px;
  }

  /* PC画像コンテナ: 高さ固定700px・aspect-ratio解除・border-radius: SS制御 */
  #mv .mv-bg-image {
    height: 700px;
    aspect-ratio: unset;
    overflow: hidden;
    border-radius: var(--pcol-mv-border-radius, 24px);
  }

  /* PC画像: object-fit coverでセンタークロップ + img-wrap自体に角丸 */
  #mv .mv-bg-image .img-wrap {
    position: relative;
    height: 100%;
    border-radius: var(--pcol-mv-border-radius, 24px);
    overflow: hidden;
  }
  #mv .mv-bg-image .img-wrap picture {
    display: block;
    height: 100%;
  }
  #mv .mv-bg-image .img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
  }
}

/* --- PC Wide (1440px〜) --- */
/* MVフレームが画面幅いっぱいに拡張・画像が上下トリミングでスケール */
@media (min-width: 1440px) {
  #mv .mv-bg-image {
    max-width: none;
  }
}

/* ============================================
   [MV↔MESSAGE] 背景構造変更
   bg_color_2 撤廃 → Message背景を上方に延長して重ねる
   Figma: SP overlap=160px / PC overlap=240px
   ============================================ */

/* MV背景: bg_color_2 → transparent + margin重なり */
#mv {
  background: linear-gradient(to bottom,
    var(--pcol-mv-bg-color, var(--pcol-base-white, var(--col-white))) 0%,
    var(--pcol-mv-bg-color, var(--pcol-base-white, var(--col-white))) calc(100% - 160px),
    transparent calc(100% - 160px));
  z-index: 2;
  margin-bottom: -160px;
}
@media (min-width: 768px) {
  #mv {
    background: linear-gradient(to bottom,
      var(--pcol-mv-bg-color, var(--pcol-base-white, var(--col-white))) 0%,
      var(--pcol-mv-bg-color, var(--pcol-base-white, var(--col-white))) calc(100% - 240px),
      transparent calc(100% - 240px));
    margin-bottom: -240px;
  }
}

#message {
  padding-top: 160px;
  padding-bottom: 0;
}
@media (min-width: 768px) {
  #message {
    padding-top: 240px;
  }
}

/* SP img-wrap max-height: 800px（中央クロップ） */
@media (max-width: 767px) {
  #mv .mv-bg-image .img-wrap {
    max-height: 800px;
    display: flex;
    align-items: center;
  }
  #mv .mv-bg-image .img-wrap picture {
    flex-shrink: 0;
    width: 100%;
  }
}

#message .bg-title {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--message-bg-title-sp-fs);
  font-weight: var(--message-bg-title-sp-fw);
  line-height: var(--message-bg-title-sp-lh);
  letter-spacing: var(--message-bg-title-sp-ls);
}
@media (min-width: 768px) {
  #message .bg-title {
    font-size: var(--message-bg-title-pc-fs, var(--message-bg-title-sp-fs));
    font-weight: var(--message-bg-title-pc-fw, var(--message-bg-title-sp-fw));
    line-height: var(--message-bg-title-pc-lh, var(--message-bg-title-sp-lh));
    letter-spacing: var(--message-bg-title-pc-ls, var(--message-bg-title-sp-ls));
  }
}
#message .container .upper-block h2 {
  font-size: var(--message-h2-main-sp-fs);
  font-weight: var(--message-h2-main-sp-fw);
  line-height: var(--message-h2-main-sp-lh);
  letter-spacing: var(--message-h2-main-sp-ls);
}
@media (min-width: 768px) {
  #message .container .upper-block h2 {
    font-size: var(--message-h2-main-pc-fs, var(--message-h2-main-sp-fs));
    font-weight: var(--message-h2-main-pc-fw, var(--message-h2-main-sp-fw));
    line-height: var(--message-h2-main-pc-lh, var(--message-h2-main-sp-lh));
    letter-spacing: var(--message-h2-main-pc-ls, var(--message-h2-main-sp-ls));
  }
}
#message .container .upper-block h2 span {
  font-size: var(--message-h2-sub-sp-fs);
  font-weight: var(--message-h2-sub-sp-fw);
  line-height: var(--message-h2-sub-sp-lh);
  letter-spacing: var(--message-h2-sub-sp-ls);
}
@media (min-width: 768px) {
  #message .container .upper-block h2 span {
    font-size: var(--message-h2-sub-pc-fs, var(--message-h2-sub-sp-fs));
    font-weight: var(--message-h2-sub-pc-fw, var(--message-h2-sub-sp-fw));
    line-height: var(--message-h2-sub-pc-lh, var(--message-h2-sub-sp-lh));
    letter-spacing: var(--message-h2-sub-pc-ls, var(--message-h2-sub-sp-ls));
  }
}
#message .container .upper-block .section-lead {
  font-size: var(--message-section-lead-sp-fs, 6.8vw);
  font-weight: var(--message-section-lead-sp-fw, 900);
  line-height: var(--message-section-lead-sp-lh, 1);
  letter-spacing: var(--message-section-lead-sp-ls, 0.8);
}
@media (min-width: 768px) {
  #message .container .upper-block .section-lead {
    font-size: var(--message-section-lead-pc-fs, var(--message-section-lead-sp-fs, 6.8vw));
    font-weight: var(--message-section-lead-pc-fw, var(--message-section-lead-sp-fw, 900));
    line-height: var(--message-section-lead-pc-lh, var(--message-section-lead-sp-lh, 1));
    letter-spacing: var(--message-section-lead-pc-ls, var(--message-section-lead-sp-ls, 0.8));
  }
}
#message .container .upper-block .core-messages h3 {
  font-size: var(--message-core-head-sp-fs);
  font-weight: var(--message-core-head-sp-fw);
  line-height: var(--message-core-head-sp-lh);
  letter-spacing: var(--message-core-head-sp-ls);
}
@media (min-width: 768px) {
  #message .container .upper-block .core-messages h3 {
    font-size: var(--message-core-head-pc-fs, var(--message-core-head-sp-fs));
    font-weight: var(--message-core-head-pc-fw, var(--message-core-head-sp-fw));
    line-height: var(--message-core-head-pc-lh, var(--message-core-head-sp-lh));
    letter-spacing: var(--message-core-head-pc-ls, var(--message-core-head-sp-ls));
  }
}
#message .container .upper-block .core-messages .core-text {
  font-size: var(--message-core-text-sp-fs);
  font-weight: var(--message-core-text-sp-fw);
  line-height: var(--message-core-text-sp-lh);
  letter-spacing: var(--message-core-text-sp-ls);
}
@media (min-width: 768px) {
  #message .container .upper-block .core-messages .core-text {
    font-size: var(--message-core-text-pc-fs, var(--message-core-text-sp-fs));
    font-weight: var(--message-core-text-pc-fw, var(--message-core-text-sp-fw));
    line-height: var(--message-core-text-pc-lh, var(--message-core-text-sp-lh));
    letter-spacing: var(--message-core-text-pc-ls, var(--message-core-text-sp-ls));
  }
}

#message {
  width: 100%;
  background: var(--pcol-message-bg-color, var(--col-blue));
  color: var(--col-white);
}
#message strong {
  color: inherit;
}
#message .bg-title {
  display: block;
  color: var(--pcol-message-bg-title-color, var(--pcol-base-color-3));
  white-space: nowrap;
}
#message .container {
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 10;
  margin-top: -2.8em;
  padding-bottom: 152px; /* PC: 動画底面→service上面 = 152px */
}
@media (min-width: 768px) {
  #message .container {
    margin-top: -6.5em;
  }
}
#message .container .upper-block {
  position: relative;
}
#message .container .upper-block h2 {
  font-weight: 400;
  line-height: 2;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--pcol-message-section-title-color, var(--col-white));
}
#message .container .upper-block h2 span {
  display: block;
  margin-bottom: 0.5em;
  color: var(--pcol-message-section-title-en-color, var(--col-white));
}
#message .container .upper-block .section-lead {
  margin-top: 6vw;
  color: var(--pcol-message-section-lead-color, var(--col-white));
}
@media (min-width: 768px) {
  #message .container .upper-block .section-lead {
    margin-top: 30px;
  }
}
#message .container .upper-block .core-messages {
  padding: 0 16px;
}
#message .container .upper-block .core-messages h3 {
  color: var(--pcol-message-core-head-color, var(--pcol-base-color-3));
}
#message .container .upper-block .core-messages .core-text {
  margin-top: 48px;
  color: var(--pcol-message-core-text-color, var(--pcol-base-color-3));
}
#message .container .lower-block {
  margin-top: 48px;
}
#message .message-slider {
  position: relative;
  padding-bottom: 0;
}
#message .message-slider .slider-base {
  position: relative;
  min-height: 200px;
}
@media (min-width: 768px) {
  #message .message-slider .slider-base {
    min-height: 280px;
  }
}
#message .message-slider .slider-base .slider-wrapper {
  align-items: center;
  gap: 16px;
}
#message .message-slider .slide-item {
  width: auto;
}
#message .message-slider .slide-item figure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
}
#message .message-slider .slide-item figure img {
  border-radius: var(--base-radius-m, 16px);
  width: auto;
  height: auto;
  max-height: 100%;
}
#message .message-slider .slide-item figure figcaption {
  margin-top: 16px;
  color: var(--pcol-message-slide-caption-color, var(--col-white));
  max-width: 100%;
  width: 0;
  min-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}
#message .youtube-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
  align-items: stretch;
}
@media (min-width: 1025px) {
  #message .youtube-block {
    align-items: center;
    padding: 0;
  }
}
#message .youtube-block .youtube-item {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
#message .youtube-block .youtube-item iframe,
#message .youtube-block .youtube-item video,
#message .youtube-block .youtube-item .yt-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 1025px) {
  #message .youtube-block .youtube-item {
    max-width: 600px;
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    padding-bottom: 0;
  }
  #message .youtube-block .youtube-item iframe,
  #message .youtube-block .youtube-item video,
  #message .youtube-block .youtube-item .yt-inner {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
  }
}


/* ============================================
   [MESSAGE] 画像ブロック（YouTube同サイズ）
   ============================================ */
#message .image-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
  align-items: stretch;
}
@media (min-width: 1025px) {
  #message .image-block {
    align-items: center;
    padding: 0;
  }
}
#message .image-block .image-block-item {
  width: 100%;
}
@media (min-width: 1025px) {
  #message .image-block .image-block-item {
    max-width: 600px;
    width: 100%;
  }
}
#message .image-block .image-block-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
@media (min-width: 768px) {
  #message .image-block .image-block-item img {
    border-radius: 16px;
  }
}
.sitepat-round #message .image-block .image-block-item img {
  border-radius: 24px;
}
@media (min-width: 768px) {
  .sitepat-round #message .image-block .image-block-item img {
    border-radius: 48px;
  }
}

/* ============================================
   [MESSAGE] Figma差分修正
   Figma node: 1722:17828
   ============================================ */

/* --- スライド画像 角丸 --- */
#message .message-slider .slide-item figure img {
  border-radius: 12px;
}
@media (min-width: 768px) {
  #message .message-slider .slide-item figure img {
    border-radius: 16px;
  }
}

/* --- core-text 上マージン: PC=56px / SP=32px (Figma message_txt_wrap gap) --- */
/* ※ 80px は message_text_wrap gap-[80px] の誤参照。正しくは message_txt_wrap の gap */
#message .container .upper-block .core-messages .core-text {
  margin-top: 56px;  /* PC: Figma message_txt_wrap gap-[56px] */
}
@media (max-width: 767px) {
  #message .container .upper-block .core-messages .core-text {
    margin-top: 32px;  /* SP: Figma message_txt_wrap gap-[32px] */
  }
}

/* --- セクション下部パディング: Figma img-slider=pb-120px / template=60px --- */

/* SP */
@media (max-width: 767px) {
  #message .message-slider .slide-item figure img {
    border-radius: 12px;
  }
  #message .container {
    padding-bottom: 88px; /* SP 動画底面→service上面 = 88px */
  }
  /* SP youtube/image上余白: template=0px → Figma youtube_wrap pt-[48px] */
  #message .youtube-block,
  #message .image-block {
    margin-top: 48px;
  }
}

/* ============================================
   [MESSAGE] 追加修正 (0304差分)
   Figma: umAEO5ecZMOcydeEKfPTqG / node 19:2529
   ① MV→MESSAGE繋ぎ目: bg-title line-height修正
   ② スライダー上余白修正
   ============================================ */

/* ① container margin-top補正 (PC)
   bg-title height変化: 240px → 160px (-80px)
   template: -6.5em/-104px。Figma mb-[-52px]に合わせ → -52px
   container開始: 160px - 52px = 108px (Figma相当 target: ~108-124px) */
@media (min-width: 768px) {
  #message .container {
    margin-top: -52px;
  }
}

/* ① container margin-top補正 (SP)
   bg-title height変化: 96px → 64px (-32px)
   template: -2.8em/-45px。heading位置を維持するため補正
   → 64px - 14px = 50px (元の51pxに近い位置を維持) */
@media (max-width: 767px) {
  #message .container {
    margin-top: -14px;
  }
}

/* ② スライダー上余白: template=48px → Figma=100px (PC)
   Figma img-slider_wrap: pt-[100px] */
@media (min-width: 768px) {
  #message .container .lower-block {
    margin-top: 100px;
  }
}

/* ② YouTube上余白: template=0px → Figma=100px (PC)
   Figma youtube_wrap: pt-[100px] */
@media (min-width: 768px) {
  #message .youtube-block,
  #message .image-block {
    margin-top: 100px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   [MESSAGE] Figma差分修正 (0305差分)
   Figma node: 13:1971 / 337:349(SP) 337:397(PC)
   ============================================ */

/* Fix 1: section-lead margin-top (h2↔本文間隔) */
#message .container .upper-block .section-lead {
  margin-top: 56px;
}
@media (max-width: 767px) {
  #message .container .upper-block .section-lead {
    margin-top: 32px;
  }
}

/* Fix 3: SP slider gap → 12px */
/* Fix 4: SP figcaption margin-top: 16px → 8px */
@media (max-width: 767px) {
  #message .message-slider .slider-base .slider-wrapper {
    gap: 12px;
  }
  #message .message-slider .slide-item figure figcaption {
    margin-top: 8px;
  }
}

/* Fix 5: upper-block max-width PC (テキスト領域のみ制約、スライダーは全幅) */
@media (min-width: 768px) {
  #message .container .upper-block {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Fix 6: 水平padding */
@media (max-width: 767px) {
  #message .container .upper-block {
    padding-left: 20px;
    padding-right: 20px;
  }
  #message .container .upper-block .core-messages {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  #message .container {
    padding-left: 40px;
    padding-right: 40px;
  }
  /* スライダーは全幅表示 → container paddingを相殺 */
  #message .container .lower-block {
    margin-left: -40px;
    margin-right: -40px;
  }
}

/* SP slide-item サイズ制御 (type別) */
/* type 0: 横長 250x200 → 225x180 */
/* type 1: 縦長 200x250 → 180x225 */
/* type 2: 正方形 200x200 → 180x180 */
@media (max-width: 767px) {
  #message .message-slider .slide-item figure img {
    object-fit: cover;
  }
  #message .message-slider .slide-item.slide-type-0 figure img {
    width: 225px;
    height: 180px;
  }
  #message .message-slider .slide-item.slide-type-1 figure img {
    width: 180px;
    height: 225px;
  }
  #message .message-slider .slide-item.slide-type-2 figure img {
    width: 180px;
    height: 180px;
  }
}

#flow h2 .subtitle {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--flow-h2-sub-sp-fs);
  font-weight: var(--flow-h2-sub-sp-fw);
  line-height: var(--flow-h2-sub-sp-lh);
  letter-spacing: var(--flow-h2-sub-sp-ls);
}
@media (min-width: 768px) {
  #flow h2 .subtitle {
    font-size: var(--flow-h2-sub-pc-fs, var(--flow-h2-sub-sp-fs));
    font-weight: var(--flow-h2-sub-pc-fw, var(--flow-h2-sub-sp-fw));
    line-height: var(--flow-h2-sub-pc-lh, var(--flow-h2-sub-sp-lh));
    letter-spacing: var(--flow-h2-sub-pc-ls, var(--flow-h2-sub-sp-ls));
  }
}
#flow h2 {
  font-size: var(--flow-h2-sp-fs);
  font-weight: var(--flow-h2-sp-fw);
  line-height: var(--flow-h2-sp-lh);
  letter-spacing: var(--flow-h2-sp-ls);
}
@media (min-width: 768px) {
  #flow h2 {
    font-size: var(--flow-h2-pc-fs, var(--flow-h2-sp-fs));
    font-weight: var(--flow-h2-pc-fw, var(--flow-h2-sp-fw));
    line-height: var(--flow-h2-pc-lh, var(--flow-h2-sp-lh));
    letter-spacing: var(--flow-h2-pc-ls, var(--flow-h2-sp-ls));
  }
}
#flow .intro {
  font-size: var(--flow-section-lead-sp-fs);
  font-weight: var(--flow-section-lead-sp-fw);
  line-height: var(--flow-section-lead-sp-lh);
  letter-spacing: var(--flow-section-lead-sp-ls);
}
@media (min-width: 768px) {
  #flow .intro {
    font-size: var(--flow-section-lead-pc-fs, var(--flow-section-lead-sp-fs));
    font-weight: var(--flow-section-lead-pc-fw, var(--flow-section-lead-sp-fw));
    line-height: var(--flow-section-lead-pc-lh, var(--flow-section-lead-sp-lh));
    letter-spacing: var(--flow-section-lead-pc-ls, var(--flow-section-lead-sp-ls));
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-head span {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--flow-step-label-sp-fs);
  font-weight: var(--flow-step-label-sp-fw);
  line-height: var(--flow-step-label-sp-lh);
  letter-spacing: var(--flow-step-label-sp-ls);
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .step-head span {
    font-size: var(--flow-step-label-pc-fs, var(--flow-step-label-sp-fs));
    font-weight: var(--flow-step-label-pc-fw, var(--flow-step-label-sp-fw));
    line-height: var(--flow-step-label-pc-lh, var(--flow-step-label-sp-lh));
    letter-spacing: var(--flow-step-label-pc-ls, var(--flow-step-label-sp-ls));
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-head span.num {
  font-size: var(--flow-step-number-sp-fs);
  font-weight: var(--flow-step-number-sp-fw);
  line-height: var(--flow-step-number-sp-lh);
  letter-spacing: var(--flow-step-number-sp-ls);
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .step-head span.num {
    font-size: var(--flow-step-number-pc-fs, var(--flow-step-number-sp-fs));
    font-weight: var(--flow-step-number-pc-fw, var(--flow-step-number-sp-fw));
    line-height: var(--flow-step-number-pc-lh, var(--flow-step-number-sp-lh));
    letter-spacing: var(--flow-step-number-pc-ls, var(--flow-step-number-sp-ls));
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-body .head-sub {
  font-size: var(--flow-step-title-sub-sp-fs);
  font-weight: var(--flow-step-title-sub-sp-fw);
  line-height: var(--flow-step-title-sub-sp-lh);
  letter-spacing: var(--flow-step-title-sub-sp-ls);
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .step-body .head-sub {
    font-size: var(--flow-step-title-sub-pc-fs, var(--flow-step-title-sub-sp-fs));
    font-weight: var(--flow-step-title-sub-pc-fw, var(--flow-step-title-sub-sp-fw));
    line-height: var(--flow-step-title-sub-pc-lh, var(--flow-step-title-sub-sp-lh));
    letter-spacing: var(--flow-step-title-sub-pc-ls, var(--flow-step-title-sub-sp-ls));
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-body h3 {
  font-size: var(--flow-step-title-sp-fs);
  font-weight: var(--flow-step-title-sp-fw);
  line-height: var(--flow-step-title-sp-lh);
  letter-spacing: var(--flow-step-title-sp-ls);
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .step-body h3 {
    font-size: var(--flow-step-title-pc-fs, var(--flow-step-title-sp-fs));
    font-weight: var(--flow-step-title-pc-fw, var(--flow-step-title-sp-fw));
    line-height: var(--flow-step-title-pc-lh, var(--flow-step-title-sp-lh));
    letter-spacing: var(--flow-step-title-pc-ls, var(--flow-step-title-sp-ls));
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-body .step-text {
  font-size: var(--flow-step-body-sp-fs);
  font-weight: var(--flow-step-body-sp-fw);
  line-height: var(--flow-step-body-sp-lh);
  letter-spacing: var(--flow-step-body-sp-ls);
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .step-body .step-text {
    font-size: var(--flow-step-body-pc-fs, var(--flow-step-body-sp-fs));
    font-weight: var(--flow-step-body-pc-fw, var(--flow-step-body-sp-fw));
    line-height: var(--flow-step-body-pc-lh, var(--flow-step-body-sp-lh));
    letter-spacing: var(--flow-step-body-pc-ls, var(--flow-step-body-sp-ls));
  }
}

#flow {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--pcol-flow-bg-color, var(--pcol-base-white, var(--col-white)));
  color: var(--pcol-flow-text-color, var(--pcol-base-black, var(--col-black)));
}
#flow .container {
  max-width: 1000px;
  margin-inline: auto;
  padding: 56px 0;
}
#flow h2 {
  text-align: center;
}
#flow h2 .subtitle {
  display: block;
  padding-bottom: 0;
  color: var(--pcol-flow-card-head-sub-color, var(--pcol-flow-accent-color, var(--pcol-base-color-2, #326ff9)));
}
#flow .intro {
  margin-top: 32px;
  text-align: center;
}
#flow .flow-swiper {
  margin-top: 80px;
  position: relative;
  padding-bottom: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: clip;
}
@media (max-width: 767px) {
  #flow .flow-swiper {
    padding-bottom: 0;
  }
}
#flow .flow-swiper .swiper .swiper-button-prev,
#flow .flow-swiper .swiper .swiper-button-next {
  height: 100%;
  width: 40px;
  top: 0;
  opacity: 0;
}
#flow .flow-swiper .swiper .swiper-button-prev::after,
#flow .flow-swiper .swiper .swiper-button-next::after {
  display: none;
}
#flow .flow-swiper .swiper .swiper-button-prev {
  left: 0;
}
#flow .flow-swiper .swiper .swiper-button-next {
  right: 0;
}
#flow .flow-swiper .swiper-slide {
  height: auto;
  width: 200px;
}
@media (min-width: 768px) {
  #flow .flow-swiper .swiper-slide {
    width: 350px;  /* F2: Figma PC カード幅 350px */
  }
}
#flow .flow-swiper .flow-card {
  height: 100%;
}
#flow .flow-swiper .flow-card .flow-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: var(--base-radius-m, 16px);
  background: var(--pcol-flow-card-bg-color, var(--pcol-base-white, #fff));
  color: var(--pcol-flow-card-text-color, var(--pcol-flow-text-color, var(--pcol-base-black, var(--col-black))));
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-head {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  color: var(--pcol-flow-accent-color, var(--pcol-base-color-2, #326ff9));
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-head span {
  line-height: 1 !important;
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-head span:not(.num) {
  padding-top: 0;
  padding-bottom: 2px;  /* STEPラベルを数字と視覚的に高さ揃え */
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .step-head span:not(.num) {
    padding-bottom: 4px;
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .image-wrap {
  margin: 0;
  margin-top: 16px;
}
#flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image {
    border-radius: 16px;
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image img {
  width: 100%;
  display: block;
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-body {
  margin-top: 24px;
}
/* T9: Figma step_txt_ttl text-center → head_sub/h3 のみ中央揃え、本文は左寄せ */
#flow .flow-swiper .flow-card .flow-card-wrap .step-body .head-sub,
#flow .flow-swiper .flow-card .flow-card-wrap .step-body h3 {
  text-align: center;
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-body .head-sub {
  color: var(--pcol-flow-card-head-sub-color, var(--pcol-flow-accent-color, var(--pcol-base-color-2, #326ff9)));
  margin-bottom: 4px;
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-body h3 {
  color: var(--pcol-flow-card-head-color, var(--pcol-flow-text-color, var(--pcol-base-black, var(--col-black))));
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .step-body h3 {
    margin-bottom: 24px;
  }
}
#flow .flow-swiper .flow-card .flow-card-wrap .step-body .step-text {
  color: var(--pcol-flow-card-text-color, var(--pcol-flow-text-color, var(--pcol-base-black, var(--col-black))));
}


/* ============================================
   [FLOW] Figma差分修正
   Figma node: 1722:18206
   ============================================ */

/* --- container パディング: Figma PC=120px --- */
#flow .container {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* --- step-image 角丸 --- */
#flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image {
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 768px) {
  #flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image {
    border-radius: 16px;
  }
}

@media (max-width: 767px) {
  #flow h2 .subtitle {
    padding-bottom: 0;
  }
  #flow .container {
    padding-top: 64px;  /* T12: SP上下64pxに統一 */
    padding-bottom: 64px;
    padding-left: 20px;   /* F1: Figma SP px-[20px] */
    padding-right: 20px;
  }
  #flow .intro {
    text-align: left;  /* F1: Figma SP intro は左寄せ */
  }
  /* SP: h2→content gap: Figma 56px */
  #flow .flow-swiper {
    margin-top: 56px;
  }
  /* SP: step-head→image gap: Figma 8px / image→step-body gap: Figma 20px */
  #flow .flow-swiper .flow-card .flow-card-wrap .image-wrap {
    margin-top: 8px;
  }
  #flow .flow-swiper .flow-card .flow-card-wrap .step-body {
    margin-top: 20px;
  }
  #flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image {
    border-radius: 12px;
  }
}

/* --- Flow pagination: プログレスバー型（works と同じパターン） --- */
#flow .flow-swiper .swiper-pagination {
  display: flex;
  width: 100%;
  max-width: 1000px;
  margin: 48px auto 0;
  padding: 0 20px;
  line-height: 0;
  font-size: 0;
  box-sizing: border-box;
  position: relative;
}
#flow .flow-swiper .swiper-pagination-bullet {
  flex: 1;
  height: 2px;
  width: auto;
  border-radius: 0;
  margin: 0 !important;
  opacity: 1;
  background: var(--pcol-flow-pagination-bar, #d9d9d9);
}
#flow .flow-swiper .swiper-pagination-bullet-active {
  background: var(--pcol-flow-pagination-active, var(--pcol-flow-accent-color, var(--pcol-base-color-2, #326ff9)));
}
@media (min-width: 768px) {
  #flow .flow-swiper .swiper-pagination {
    margin-top: 80px;
    padding: 0 40px;
  }
}

/* --- 3件以下: ナビゲーションボタン非表示（SP/PC共通） --- */
.works-common.no-pagination .works-swiper .swiper-button-prev,
.works-common.no-pagination .works-swiper .swiper-button-next,
.card-list-common.no-pagination .card-list-swiper .swiper-button-prev,
.card-list-common.no-pagination .card-list-swiper .swiper-button-next,
#flow.no-pagination .flow-swiper .swiper-button-prev,
#flow.no-pagination .flow-swiper .swiper-button-next {
  display: none;
}
/* --- オーバーフローなし: ページネーション非表示 + 中央配置（PC以上） --- */
.works-common.no-pagination .works-swiper .swiper-pagination,
.card-list-common.no-pagination .card-list-swiper .swiper-pagination,
#flow.no-pagination .flow-swiper .swiper-pagination {
  display: none;
}
@media (min-width: 769px) {
  .works-common.no-pagination .works-swiper .swiper-wrapper,
  .card-list-common.no-pagination .card-list-swiper .swiper-wrapper,
  #flow.no-pagination .flow-swiper .swiper-wrapper {
    justify-content: center;
  }
}

#service h2 {
  font-size: var(--service-h2-sp-fs);
  font-weight: var(--service-h2-sp-fw);
  line-height: var(--service-h2-sp-lh);
  letter-spacing: var(--service-h2-sp-ls);
}
@media (min-width: 768px) {
  #service h2 {
    font-size: var(--service-h2-pc-fs, var(--service-h2-sp-fs));
    font-weight: var(--service-h2-pc-fw, var(--service-h2-sp-fw));
    line-height: var(--service-h2-pc-lh, var(--service-h2-sp-lh));
    letter-spacing: var(--service-h2-pc-ls, var(--service-h2-sp-ls));
  }
}
#service h2 .subtitle {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--service-h2-sub-sp-fs);
  font-weight: var(--service-h2-sub-sp-fw);
  line-height: var(--service-h2-sub-sp-lh);
  letter-spacing: var(--service-h2-sub-sp-ls);
}
@media (min-width: 768px) {
  #service h2 .subtitle {
    font-size: var(--service-h2-sub-pc-fs, var(--service-h2-sub-sp-fs));
    font-weight: var(--service-h2-sub-pc-fw, var(--service-h2-sub-sp-fw));
    line-height: var(--service-h2-sub-pc-lh, var(--service-h2-sub-sp-lh));
    letter-spacing: var(--service-h2-sub-pc-ls, var(--service-h2-sub-sp-ls));
  }
}
#service .intro {
  font-size: var(--service-section-lead-sp-fs);
  font-weight: var(--service-section-lead-sp-fw);
  line-height: var(--service-section-lead-sp-lh);
  letter-spacing: var(--service-section-lead-sp-ls);
}
@media (min-width: 768px) {
  #service .intro {
    font-size: var(--service-section-lead-pc-fs, var(--service-section-lead-sp-fs));
    font-weight: var(--service-section-lead-pc-fw, var(--service-section-lead-sp-fw));
    line-height: var(--service-section-lead-pc-lh, var(--service-section-lead-sp-lh));
    letter-spacing: var(--service-section-lead-pc-ls, var(--service-section-lead-sp-ls));
  }
}
#service .service-card .service-body .service-title .ja {
  font-size: var(--service-block-title-sp-fs);
  font-weight: var(--service-block-title-sp-fw);
  line-height: var(--service-block-title-sp-lh);
  letter-spacing: var(--service-block-title-sp-ls);
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-title .ja {
    font-size: var(--service-block-title-pc-fs, var(--service-block-title-sp-fs));
    font-weight: var(--service-block-title-pc-fw, var(--service-block-title-sp-fw));
    line-height: var(--service-block-title-pc-lh, var(--service-block-title-sp-lh));
    letter-spacing: var(--service-block-title-pc-ls, var(--service-block-title-sp-ls));
  }
}
#service .service-card .service-body .service-title .en {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--service-block-title-sub-sp-fs);
  font-weight: var(--service-block-title-sub-sp-fw);
  line-height: var(--service-block-title-sub-sp-lh);
  letter-spacing: var(--service-block-title-sub-sp-ls);
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-title .en {
    font-size: var(--service-block-title-sub-pc-fs, var(--service-block-title-sub-sp-fs));
    font-weight: var(--service-block-title-sub-pc-fw, var(--service-block-title-sub-sp-fw));
    line-height: var(--service-block-title-sub-pc-lh, var(--service-block-title-sub-sp-lh));
    letter-spacing: var(--service-block-title-sub-pc-ls, var(--service-block-title-sub-sp-ls));
  }
}
#service .service-card .service-body .service-desc {
  font-size: var(--service-block-description-sp-fs);
  font-weight: var(--service-block-description-sp-fw);
  line-height: var(--service-block-description-sp-lh);
  letter-spacing: var(--service-block-description-sp-ls);
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-desc {
    font-size: var(--service-block-description-pc-fs, var(--service-block-description-sp-fs));
    font-weight: var(--service-block-description-pc-fw, var(--service-block-description-sp-fw));
    line-height: var(--service-block-description-pc-lh, var(--service-block-description-sp-lh));
    letter-spacing: var(--service-block-description-pc-ls, var(--service-block-description-sp-ls));
  }
}
#service .service-card .service-body .service-tags .tag {
  font-size: var(--service-tag-sp-fs);
  font-weight: var(--service-tag-sp-fw);
  line-height: var(--service-tag-sp-lh);
  letter-spacing: var(--service-tag-sp-ls);
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-tags .tag {
    font-size: var(--service-tag-pc-fs, var(--service-tag-sp-fs));
    font-weight: var(--service-tag-pc-fw, var(--service-tag-sp-fw));
    line-height: var(--service-tag-pc-lh, var(--service-tag-sp-lh));
    letter-spacing: var(--service-tag-pc-ls, var(--service-tag-sp-ls));
  }
}
#service .service-card .service-body .service-more {
  font-size: var(--service-btn-sp-fs);
  font-weight: var(--service-btn-sp-fw);
  line-height: var(--service-btn-sp-lh);
  letter-spacing: var(--service-btn-sp-ls);
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-more {
    font-size: var(--service-btn-pc-fs, var(--service-btn-sp-fs));
    font-weight: var(--service-btn-pc-fw, var(--service-btn-sp-fw));
    line-height: var(--service-btn-pc-lh, var(--service-btn-sp-lh));
    letter-spacing: var(--service-btn-pc-ls, var(--service-btn-sp-ls));
  }
}
#service .service-card .service-body .notice-area .notice {
  font-size: var(--service-notice-sp-fs);
  font-weight: var(--service-notice-sp-fw);
  line-height: var(--service-notice-sp-lh);
  letter-spacing: var(--service-notice-sp-ls);
}
@media (min-width: 768px) {
  #service .service-card .service-body .notice-area .notice {
    font-size: var(--service-notice-pc-fs, var(--service-notice-sp-fs));
    font-weight: var(--service-notice-pc-fw, var(--service-notice-sp-fw));
    line-height: var(--service-notice-pc-lh, var(--service-notice-sp-lh));
    letter-spacing: var(--service-notice-pc-ls, var(--service-notice-sp-ls));
  }
}
#service .notice-area .notice {
  font-size: var(--service-notice-sp-fs);
  font-weight: var(--service-notice-sp-fw);
  line-height: var(--service-notice-sp-lh);
  letter-spacing: var(--service-notice-sp-ls);
}
@media (min-width: 768px) {
  #service .notice-area .notice {
    font-size: var(--service-notice-pc-fs, var(--service-notice-sp-fs));
    font-weight: var(--service-notice-pc-fw, var(--service-notice-sp-fw));
    line-height: var(--service-notice-pc-lh, var(--service-notice-sp-lh));
    letter-spacing: var(--service-notice-pc-ls, var(--service-notice-sp-ls));
  }
}

:root {
  --col-black: #45494b;
  --col-white: #fff;
  --col-gray4: #989898;
  --col-light-gray2: #efefef;
  --col-blue: #3286d9;
  --font-color-main: var(--col-black);
  --font-color-link: var(--col-blue);
  --font-biz-udp-gothic: BIZ UDPGothic, sans-serif;
  --font-roboto: Roboto, sans-serif;
  --font-lato: Lato, sans-serif;
  --font-jost: Jost, sans-serif;
}

#service {
  width: 100%;
  background: var(--pcol-service-bg-color-1, var(--pcol-base-white, var(--col-white)));
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin-top: -24px; /* SP: 角丸分を前セクションに重ねる */
  margin-bottom: 0;
}
#service .container {
  max-width: 1280px;
  margin-inline: auto;
  padding: 64px 20px;
}
@media (min-width: 768px) {
  #service {
    margin-top: -32px; /* PC: 角丸分を前セクションに重ねる */
    border-radius: 32px;
  }
  #service .container {
    padding: 120px 40px;
  }
}
#service h2 {
  text-align: center;
  position: relative;
  color: var(--pcol-service-section-title-color, inherit);
}
#service h2 .subtitle {
  display: block;
  padding-bottom: 0;
  color: var(--pcol-service-section-title-en-color, inherit);
}
#service .intro {
  text-align: center;
  margin-top: 48px;
  color: var(--pcol-service-section-lead-color, inherit);
}
@media (max-width: 767px) {
  #service .intro {
    text-align: left;
  }
}
@media (min-width: 768px) {
  #service .intro {
    margin-top: 56px;
  }
}
#service .services-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  margin-top: 48px;
}
@media (min-width: 768px) {
  #service .services-list {
    margin-top: 80px;
    gap: 56px;
  }
}
#service .service-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 768px) {
  #service .service-card {
    flex-direction: row;
    gap: 48px;
    align-items: center;
  }
  #service .service-card:nth-child(even) {
    flex-direction: row-reverse;
  }
}
#service .service-card figure {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  #service .service-card figure {
    width: 40%;
  }
}
#service .service-card figure img {
  width: 100%;
  border-radius: 12px;
}
@media (min-width: 768px) {
  #service .service-card figure img {
    border-radius: 16px;
  }
}
@media (min-width: 768px) {
  #service .service-card .service-body {
    width: 60%;
  }
}
#service .service-card .service-body .service-title {
  display: flex;
  flex-direction: column-reverse;
}
#service .service-card .service-body .service-title > span {
  display: block;
}
#service .service-card .service-body .service-title .ja {
  color: var(--pcol-service-item-title-color, inherit);
}
#service .service-card .service-body .service-title .en {
  color: var(--pcol-service-item-subtitle-color, var(--pcol-base-color-2, var(--col-blue)));
}
#service .service-card .service-body .service-desc {
  margin-top: 32px;
  color: var(--pcol-service-item-description-color, inherit);
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-desc {
    margin-top: 16px;
  }
}
#service .service-card .service-body .service-tags {
  margin-top: 32px;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-tags {
    margin-top: 16px;
  }
}
#service .service-card .service-body .service-tags .tag {
  display: inline-block;
  white-space: nowrap;
  color: var(--pcol-service-tag-text-color, var(--pcol-base-color-3));
  background: var(--pcol-service-tag-bg-color, var(--pcol-base-color-2));
}
#service .service-card .service-body .service-tags.list-style {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#service .service-card .service-body .service-tags.list-style .tag {
  display: block;
  padding: 0 0 0 28px;
  position: relative;
  color: var(--pcol-service-list-text-color, var(--pcol-base-color-2));
  background: none;
}
#service .service-card .service-body .service-tags.list-style .tag::before {
  display: inline-block;
  position: absolute;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  left: 0;
  font-family: "Font Awesome 7 Free";
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  width: 24px;
  text-align: center;
  content: "\f14a";  /* fa-square-check */
}
/* T2: 括弧記法カスタムicon時は ::before 非表示 */
#service .service-card .service-body .service-tags.list-style .tag.has-icon::before {
  display: none;
}
/* has-icon の padding-left は .tag の 28px を継承 */
#service .service-card .service-body .service-tags.list-style .tag.has-icon > i {
  position: absolute;
  left: 0;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
#service .service-card .service-body .service-more {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 4vw;
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-more {
    justify-content: flex-end;
    padding-top: 16px;
  }
}
#service .service-card .service-body .service-more .btn-more {
  color: var(--pcol-service-btn-text-color, var(--pcol-base-white, var(--col-white)));
  background: var(--pcol-service-btn-bg-color, var(--pcol-base-color-2, var(--col-blue)));
  position: relative;
}
#service .service-card .service-body .service-more .btn-more::after {
  content: "→";
  font-size: 16px;
  position: absolute;
  right: 24px;
}
#service .notice-area {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 768px) {
  #service .notice-area {
    margin-top: 96px;
  }
}
#service .notice-area .notice {
  position: relative;
  padding-left: 1.2em;
  color: var(--pcol-service-notice-color, inherit);
}
#service .notice-area .notice::before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  content: "※";
  margin-right: 4px;
}


/* ============================================
   [SERVICE] Figma差分修正
   Figma node: 1722:17878
   ============================================ */


/* --- セクション見出し h2 レイアウト調整 --- */
/* Figma: en(subtitle, 小・blue)が上 → ja(タイトル, 大)が下 */
/* DOM順: span.subtitle(en) → テキストノード(ja) → flex:column で en上・ja下 */
/* h2 レイアウト: block + text-align で統一（他セクションと同じパターン） */

/* --- カード 画像/テキスト 比率: Figma=50/50 / template=40/60 --- */
@media (min-width: 768px) {
  #service .service-card figure {
    width: auto;
    flex: 1 0 0;
  }

  #service .service-card .service-body {
    width: auto;
    flex: 1 0 0;
  }
}

/* --- カード flex-direction: Alpine.js x-for による<template>タグオフセット補正 ---
   x-for が services-list の先頭に<template>タグを挿入するため
   nth-child が1つずれる（1枚目カード = nth-child(2) = even）
   template の nth-child(even)=row-reverse 設定を逆転させて補正する --- */
@media (min-width: 768px) {
  /* even位置(2,4,6...) = 1枚目・3枚目... → 画像左(row) */
  #service .service-card:nth-child(even) {
    flex-direction: row;
  }
  /* odd位置(3,5,7...) = 2枚目・4枚目... → 画像右(row-reverse) */
  #service .service-card:nth-child(odd) {
    flex-direction: row-reverse;
  }
}

/* --- 画像の角丸 --- */
#service .service-card figure img {
  border-radius: 12px;
}
@media (min-width: 768px) {
  #service .service-card figure img {
    border-radius: 16px;
  }
}

/* --- service-body 内テキストブロック間のgap --- */
/* Figma: text_area gap=24px (desc〜tags〜more) / service_txt_wrap gap=40px (title〜desc) */
#service .service-card .service-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- サービス名タイトル: en/ja 間のgap --- */
/* Figma: service_name_wrap gap PC=4px / SP=4px */
#service .service-card .service-body .service-title {
  gap: 4px;
}

/* --- タグ (pill-style) --- */
/* keyword_style="pill" のカードに適用 */
/* タグ間gap: PC・SP 共通 8px (Figma **_service_tag_wrap gap-[8px]) */
#service .service-card .service-body .service-tags.pill-style {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#service .service-card .service-body .service-tags.pill-style .tag {
  display: inline-block;
  padding: 8px 12px;
  background: var(--pcol-service-tag-bg-color, #f2f2f2);
  color: var(--pcol-service-tag-text-color, #6d6d6d);
  border-radius: 4px;
}

/* --- タグ (list-style) --- */
/* keyword_style="list" のカードに適用: アイコン付きリスト */
#service .service-card .service-body .service-tags.list-style .tag {
  font-size: var(--service-list-sp-fs);
  font-weight: var(--service-list-sp-fw);
  line-height: var(--service-list-sp-lh);
  letter-spacing: var(--service-list-sp-ls);
  color: var(--pcol-service-list-text-color, #6d6d6d);
}
@media (min-width: 768px) {
  #service .service-card .service-body .service-tags.list-style .tag {
    font-size: var(--service-list-pc-fs, var(--service-list-sp-fs));
    font-weight: var(--service-list-pc-fw, var(--service-list-sp-fw));
    line-height: var(--service-list-pc-lh, var(--service-list-sp-lh));
    letter-spacing: var(--service-list-pc-ls, var(--service-list-sp-ls));
  }
}

/* --- ボタン「詳しく見る」スタイル --- */
/* Figma: height=56px, min-width=240px, max-width=300px, padding=0 24px, */
/*        border-radius=28px(pill), bg=#0c396c(navy), text=white, 16px bold */
/* テキスト中央配置 + 矢印を右端に absolute 固定 (Figma レイアウト準拠) */
#service .service-card .service-body .service-more .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 240px;
  max-width: 300px;
  height: 56px;
  padding: 0 24px;
  background: var(--pcol-service-btn-bg-color, var(--pcol-cta-bg, #0c396c));
  color: var(--pcol-service-btn-text-color, #fff);
  border-radius: 8px;  /* Figma btn_default radius=8px */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
}

/* ボタン右矢印アイコン: 右端に absolute 固定 */
#service .service-card .service-body .service-more .btn-more::after {
  content: "→";
  font-size: 16px;
  position: absolute;
  right: 24px;
}

/* --- service-more コンテナ 整列 --- */
#service .service-card .service-body .service-more {
  display: flex;
}

/* Figma確認: 全カードともボタンはテキストエリア内で左揃え */
#service .service-card .service-body .service-more {
  justify-content: flex-start;
}

/* SP: ボタン中央揃え + 各種 SP 修正 (0304修正Figma node: 13:1816) */
@media (max-width: 767px) {
  #service .service-card .service-body .service-more {
    justify-content: center;
    margin-top: 8px;  /* Figma service_txt_wrap gap-[32px]: gap 24px + 8px = 32px */
  }

  /* SP: 画像角丸 */
  #service .service-card figure img {
    border-radius: 12px;
  }

  /* SP: 角丸を縮小（T11: box-shadow廃止、重なり不要） */
  #service {
    border-radius: 24px;
  }

  /* SP: h2 .subtitle padding-bottom → 0px */
  #service h2 .subtitle {
    padding-bottom: 0;
  }

  /* SP: service-body gap: 24px */
  #service .service-card .service-body {
    gap: 24px;
  }

  /* SP: service-title (en/ja) gap: 4px */
  #service .service-card .service-body .service-title {
    gap: 4px;
  }

  /* SP: タグ pill サイズ縮小 (py-4px px-8px, radius 4px, font 12px) */
  #service .service-card .service-body .service-tags.pill-style .tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
  }

  /* SP: ボタン高さ: 56px → 52px / min-width: 240px → 280px */
  #service .service-card .service-body .service-more .btn-more {
    height: 52px;
    min-width: 280px;  /* Figma SP btn min-w-[280px] */
  }
}

/* ============================================
   [SERVICE] 追加修正 (0304差分)
   Figma: umAEO5ecZMOcydeEKfPTqG / node 17:2251
   h2→intro gap修正 + service-body子要素margin二重計算リセット
   ============================================ */

/* service-body 子要素: template の margin-top/padding-top をリセット
   template は .service-desc / .service-tags に margin-top: 32px(SP) / 16px(PC)、
   .service-more に padding-top: 4vw(SP) / 16px(PC) を設定しているため
   custom.css の gap と合算されて spacing が過大になっていた
   ※ .service-tags.list-style には specificity 140 の個別ルール(32px)があるため
      同等以上の specificity で上書きする */
#service .service-card .service-body .service-desc,
#service .service-card .service-body .service-tags,
#service .service-card .service-body .service-tags.list-style,
#service .service-card .service-body .service-tags.pill-style,
#service .service-card .service-body .service-more {
  margin-top: 0;
  padding-top: 0;
}
/* PC: h2 → .intro 間隔 */
@media (min-width: 768px) {
  #service .intro {
    margin-top: 32px;
  }
}


/* ============================================
   [SERVICE] SP 追加修正 (0305差分)
   Figma: umAEO5ecZMOcydeEKfPTqG / node 13:1816
   ② intro margin-top / ③ services-list margin-top / ④ service-card gap
   ⑥ list-style gap / ⑨ notice-area gap
   ============================================ */

@media (max-width: 767px) {
  /* ② SP: intro 上余白 */
  #service .intro {
    margin-top: 32px;
  }

  /* ③ SP: services-list 上余白: Figma h2→content gap 56px */
  #service .services-list {
    margin-top: 56px;
  }

  /* ④ SP: service-card 縦 gap: template 32px → Figma ◎_service_item_wrap gap-[24px] */
  #service .service-card {
    gap: 24px;
  }

  /* ⑥ SP: list-style タグ間 gap: template 12px → Figma List gap-[4px] */
  #service .service-card .service-body .service-tags.list-style {
    gap: 4px;
  }

  /* ⑨ SP: notice-area gap: template 8px → Figma section_note gap-[4px] */
  #service .notice-area {
    gap: 4px;
  }
}

/* .tags グローバルクラス (styles.css) の padding-bottom をリセット
   SP: .tags { padding-bottom: 2vw } / PC: @media(769px+) { .tags { padding-bottom: 8px } }
   これにより tags→more 間スペースが Figma より超過していた
   修正後: padding(0) + gap(24px SP/32px PC) + margin-top(8px) = 32px SP / 40px PC = Figma 一致 */
#service .service-card .service-body .service-tags {
  padding-bottom: 0;
}


/* --- btn-arrow mask-image 方式 --- */
/* 矢印SVGの色を btn_text_color に追従させる（background-image → mask-image 変換） */
#service .service-card .service-body .service-more .btn-more::after {
  background: var(--pcol-service-btn-text-color, #fff);
  -webkit-mask-image: url("../app-img/ic_right_arrow.svg");
  mask-image: url("../app-img/ic_right_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
}


.works-common h2 {
  font-size: var(--works-h2-sp-fs);
  font-weight: var(--works-h2-sp-fw);
  line-height: var(--works-h2-sp-lh);
  letter-spacing: var(--works-h2-sp-ls);
}
@media (min-width: 768px) {
  .works-common h2 {
    font-size: var(--works-h2-pc-fs, var(--works-h2-sp-fs));
    font-weight: var(--works-h2-pc-fw, var(--works-h2-sp-fw));
    line-height: var(--works-h2-pc-lh, var(--works-h2-sp-lh));
    letter-spacing: var(--works-h2-pc-ls, var(--works-h2-sp-ls));
  }
}
.works-common h2 .subtitle {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--works-h2-sub-sp-fs);
  font-weight: var(--works-h2-sub-sp-fw);
  line-height: var(--works-h2-sub-sp-lh);
  letter-spacing: var(--works-h2-sub-sp-ls);
}
@media (min-width: 768px) {
  .works-common h2 .subtitle {
    font-size: var(--works-h2-sub-pc-fs, var(--works-h2-sub-sp-fs));
    font-weight: var(--works-h2-sub-pc-fw, var(--works-h2-sub-sp-fw));
    line-height: var(--works-h2-sub-pc-lh, var(--works-h2-sub-sp-lh));
    letter-spacing: var(--works-h2-sub-pc-ls, var(--works-h2-sub-sp-ls));
  }
}
.works-common .intro {
  font-size: var(--works-section-lead-sp-fs);
  font-weight: var(--works-section-lead-sp-fw);
  line-height: var(--works-section-lead-sp-lh);
  letter-spacing: var(--works-section-lead-sp-ls);
}
@media (min-width: 768px) {
  .works-common .intro {
    font-size: var(--works-section-lead-pc-fs, var(--works-section-lead-sp-fs));
    font-weight: var(--works-section-lead-pc-fw, var(--works-section-lead-sp-fw));
    line-height: var(--works-section-lead-pc-lh, var(--works-section-lead-sp-lh));
    letter-spacing: var(--works-section-lead-pc-ls, var(--works-section-lead-sp-ls));
  }
}
.works-common .works-swiper .swiper-slide .work-title {
  font-size: var(--works-slider-title-sp-fs);
  font-weight: var(--works-slider-title-sp-fw);
  line-height: var(--works-slider-title-sp-lh);
  letter-spacing: var(--works-slider-title-sp-ls);
}
@media (min-width: 768px) {
  .works-common .works-swiper .swiper-slide .work-title {
    font-size: var(--works-slider-title-pc-fs, var(--works-slider-title-sp-fs));
    font-weight: var(--works-slider-title-pc-fw, var(--works-slider-title-sp-fw));
    line-height: var(--works-slider-title-pc-lh, var(--works-slider-title-sp-lh));
    letter-spacing: var(--works-slider-title-pc-ls, var(--works-slider-title-sp-ls));
  }
}
.works-common .works-swiper .swiper-slide .work-title span {
  font-size: var(--works-slider-title-sub-sp-fs);
  font-weight: var(--works-slider-title-sub-sp-fw);
  line-height: var(--works-slider-title-sub-sp-lh);
  letter-spacing: var(--works-slider-title-sub-sp-ls);
}
@media (min-width: 768px) {
  .works-common .works-swiper .swiper-slide .work-title span {
    font-size: var(--works-slider-title-sub-pc-fs, var(--works-slider-title-sub-sp-fs));
    font-weight: var(--works-slider-title-sub-pc-fw, var(--works-slider-title-sub-sp-fw));
    line-height: var(--works-slider-title-sub-pc-lh, var(--works-slider-title-sub-sp-lh));
    letter-spacing: var(--works-slider-title-sub-pc-ls, var(--works-slider-title-sub-sp-ls));
  }
}
.works-common .works-swiper .swiper-slide .work-tags .tag {
  font-size: var(--works-slider-tag-sp-fs);
  font-weight: var(--works-slider-tag-sp-fw);
  line-height: var(--works-slider-tag-sp-lh);
  letter-spacing: var(--works-slider-tag-sp-ls);
}
@media (min-width: 768px) {
  .works-common .works-swiper .swiper-slide .work-tags .tag {
    font-size: var(--works-slider-tag-pc-fs, var(--works-slider-tag-sp-fs));
    font-weight: var(--works-slider-tag-pc-fw, var(--works-slider-tag-sp-fw));
    line-height: var(--works-slider-tag-pc-lh, var(--works-slider-tag-sp-lh));
    letter-spacing: var(--works-slider-tag-pc-ls, var(--works-slider-tag-sp-ls));
  }
}
.works-common .works-swiper .swiper-slide .work-desc {
  font-size: var(--works-slider-description-sp-fs);
  font-weight: var(--works-slider-description-sp-fw);
  line-height: var(--works-slider-description-sp-lh);
  letter-spacing: var(--works-slider-description-sp-ls);
}
@media (min-width: 768px) {
  .works-common .works-swiper .swiper-slide .work-desc {
    font-size: var(--works-slider-description-pc-fs, var(--works-slider-description-sp-fs));
    font-weight: var(--works-slider-description-pc-fw, var(--works-slider-description-sp-fw));
    line-height: var(--works-slider-description-pc-lh, var(--works-slider-description-sp-lh));
    letter-spacing: var(--works-slider-description-pc-ls, var(--works-slider-description-sp-ls));
  }
}
.works-common .works-swiper .swiper-slide .work-more .btn-more {
  font-size: var(--works-slider-btn-sp-fs);
  font-weight: var(--works-slider-btn-sp-fw);
  line-height: var(--works-slider-btn-sp-lh);
  letter-spacing: var(--works-slider-btn-sp-ls);
}
@media (min-width: 768px) {
  .works-common .works-swiper .swiper-slide .work-more .btn-more {
    font-size: var(--works-slider-btn-pc-fs, var(--works-slider-btn-sp-fs));
    font-weight: var(--works-slider-btn-pc-fw, var(--works-slider-btn-sp-fw));
    line-height: var(--works-slider-btn-pc-lh, var(--works-slider-btn-sp-lh));
    letter-spacing: var(--works-slider-btn-pc-ls, var(--works-slider-btn-sp-ls));
  }
}

.works-common {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--pcol-works-base-bg-color, var(--pcol-base-white, var(--col-white)));
  color: var(--pcol-works-base-text-color, var(--pcol-base-black, var(--col-black)));
  transition: color 0.8s ease-out;
}
/* reverse 背景をふわっと切替: グラデーションは transition が効かないため
   ::after に reverse 背景を置き opacity でフェードさせる */
.works-common::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pcol-works-acc-bg-color, var(--pcol-works-base-bg-color, var(--pcol-base-white, var(--col-white))));
  opacity: 0;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}
.works-common.reverse::after {
  opacity: 1;
}
/* reverse 切替時に親子の色遷移を同期 */
.works-common h2,
.works-common h2 .subtitle,
.works-common .intro,
.works-common .notice,
.works-common .works-swiper .swiper-slide .work-body .work-title,
.works-common .works-swiper .swiper-slide .work-body .work-subtitle,
.works-common .works-swiper .swiper-slide .work-body .work-desc {
  transition: color 0.8s ease-out;
}
.works-common .works-swiper .swiper-slide .work-tags .tag,
.works-common .works-swiper .swiper-slide .work-more .btn-more {
  transition: color 0.8s ease-out, background 0.8s ease-out;
}
.works-common .works-swiper .swiper-pagination-bullet {
  transition: background 0.8s ease-out;
}
.works-common .container {
  max-width: 1200px;
  padding: 56px 0;
  margin: auto;
}
.works-common h2 {
  text-align: center;
  padding-bottom: 3.2vw;
  position: relative;
}
.works-common h2 .subtitle {
  display: block;
  padding-bottom: 0;
}
.works-common .intro {
  display: block;
  text-align: center;
  margin-bottom: 4vw;
  padding: 0 4vw;
}
@media (max-width: 767px) {
  .works-common .intro {
    text-align: left;
  }
}
.works-common .works-swiper {
  margin-top: 24px;
  position: relative;
  padding-bottom: 40px;
}
.works-common .works-swiper .swiper .swiper-button-prev,
.works-common .works-swiper .swiper .swiper-button-next {
  height: 100%;
  width: 40px;
  top: 0;
  opacity: 0;
}
.works-common .works-swiper .swiper .swiper-button-prev::after,
.works-common .works-swiper .swiper .swiper-button-next::after {
  display: none;
}
.works-common .works-swiper .swiper .swiper-button-prev {
  left: 0;
}
.works-common .works-swiper .swiper .swiper-button-next {
  right: 0;
}
.works-common .works-swiper .swiper-slide {
  height: auto;
}
.works-common .works-swiper .swiper-slide .work-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.works-common .works-swiper .swiper-slide .work-thumb {
  margin: 0 0 8px;
  width: 100%;
  border-radius: var(--base-radius-m, 16px);
  overflow: hidden;
}
.works-common .works-swiper .swiper-slide .work-thumb img {
  width: 100%;
}
.works-common .works-swiper .swiper-slide .work-title {
  color: var(--pcol-works-base-title-color, var(--pcol-base-color-2, #326ff9));
  margin-top: 8px;
}
.works-common .works-swiper .swiper-slide .work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.works-common .works-swiper .swiper-slide .work-tags .tag {
  color: var(--pcol-works-base-tag-text, var(--pcol-base-black, var(--col-black)));
  background-color: var(--pcol-works-base-tag-bg, var(--pcol-base-white, var(--col-white)));
}
.works-common .works-swiper .swiper-slide .work-more .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--pcol-works-base-btn-bg, var(--pcol-base-color-2, #326ff9));
  color: var(--pcol-works-base-btn-text, #fff);
  border-radius: 8px;
  padding: 10px 16px;
}
.works-common .works-swiper .swiper-slide .work-more .btn-more:hover {
  filter: brightness(0.95);
}
.works-common .notice-area {
  margin-top: 48px; /* SP: Figma section_note pt 48px */
  padding-left: 20px;  /* SP: serviceセクション同様の左右余白 */
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .works-common .notice-area {
    margin-top: 80px; /* PC: Figma section_note pt 80px */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
  }
}
.works-common .notice-area .notice {
  position: relative;
  padding-left: 1.2em;
  font-size: var(--works-notice-sp-fs);
  font-weight: var(--works-notice-sp-fw);
  line-height: var(--works-notice-sp-lh);
  letter-spacing: var(--works-notice-sp-ls);
}
@media (min-width: 768px) {
  .works-common .notice-area .notice {
    font-size: var(--works-notice-pc-fs, var(--works-notice-sp-fs));
    font-weight: var(--works-notice-pc-fw, var(--works-notice-sp-fw));
    line-height: var(--works-notice-pc-lh, var(--works-notice-sp-lh));
    letter-spacing: var(--works-notice-pc-ls, var(--works-notice-sp-ls));
  }
}
.works-common .notice-area .notice::before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  content: "※";
  margin-right: 4px;
}
.works-common.reverse {
  color: var(--pcol-works-acc-text-color, var(--pcol-works-base-text-color, var(--pcol-base-black, var(--col-black))));
  /* background は ::after の opacity フェードで制御 */
}
.works-common.reverse .works-swiper .swiper-slide .work-tags .tag {
  color: var(--pcol-works-acc-tag-text, var(--pcol-works-base-tag-text, var(--pcol-base-black, var(--col-black))));
  background: var(--pcol-works-acc-tag-bg, var(--pcol-works-base-tag-bg, var(--pcol-base-white, var(--col-white))));
}
.works-common.reverse h2 {
  color: var(--pcol-works-acc-section-title-color, var(--pcol-works-base-section-title-color, #fff));
}
.works-common.reverse h2 .subtitle {
  color: var(--pcol-works-acc-section-title-en-color, var(--pcol-works-base-section-title-en-color, #fff));
}
.works-common.reverse .intro {
  color: var(--pcol-works-acc-section-lead-color, var(--pcol-works-base-section-lead-color, #fff));
}
.works-common.reverse .works-swiper .swiper-slide .work-body .work-title {
  color: var(--pcol-works-acc-title-color, var(--pcol-works-base-title-color, #fff));
}
.works-common.reverse .works-swiper .swiper-slide .work-body .work-subtitle {
  color: var(--pcol-works-acc-subtitle-color, var(--pcol-works-base-subtitle-color, #fff));
}
.works-common.reverse .works-swiper .swiper-slide .work-body .work-desc {
  color: var(--pcol-works-acc-desc-color, var(--pcol-works-base-desc-color, #fff));
}
.works-common.reverse .works-swiper .swiper-slide .work-more .btn-more {
  background: var(--pcol-works-acc-btn-bg, var(--pcol-works-base-btn-bg, var(--pcol-base-white, #fff)));
  color: var(--pcol-works-acc-btn-text, var(--pcol-works-base-btn-text, var(--pcol-base-color-1, #0C396C)));
}
.works-common.reverse .notice {
  color: var(--pcol-works-acc-notice-color, var(--pcol-works-base-notice-color, #fff));
}


/* ============================================
   [WORKS] Figma差分修正
   Figma node: 1722:18029
   ============================================ */

/* --- container パディング: Figma=120px --- */
#works1 .container,
.works-common .container {
  padding-top: 120px; /* T12: service重なり廃止、純粋な120px */
  padding-bottom: 120px;
}

/* --- 画像の角丸: Figma=20px --- */
.works-common .works-swiper .swiper-slide .work-thumb {
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .works-common .works-swiper .swiper-slide .work-thumb {
    border-radius: 16px;
  }
}

/* --- work-body: flex レイアウト + 個別余白 ---
   template は display:block + 各要素のmargin-top管理
   各要素の margin-top で間隔を個別制御 --- */
.works-common .works-swiper .swiper-slide .work-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
}

/* 既存margin-topをリセット */
.works-common .works-swiper .swiper-slide .work-body > * {
  margin-top: 0;
}
/* 個別余白: subtitle 4px / tags 16px / desc 16px / more 16px */
.works-common .works-swiper .swiper-slide .work-subtitle {
  margin-top: 4px;
  font-size: var(--works-slider-title-sub-sp-fs);
  font-weight: var(--works-slider-title-sub-sp-fw);
  line-height: var(--works-slider-title-sub-sp-lh);
  letter-spacing: var(--works-slider-title-sub-sp-ls);
}
@media (min-width: 768px) {
  .works-common .works-swiper .swiper-slide .work-subtitle {
    font-size: var(--works-slider-title-sub-pc-fs, var(--works-slider-title-sub-sp-fs));
    font-weight: var(--works-slider-title-sub-pc-fw, var(--works-slider-title-sub-sp-fw));
    line-height: var(--works-slider-title-sub-pc-lh, var(--works-slider-title-sub-sp-lh));
    letter-spacing: var(--works-slider-title-sub-pc-ls, var(--works-slider-title-sub-sp-ls));
  }
}
.works-common .works-swiper .swiper-slide .work-tags {
  margin-top: 16px;
}
.works-common .works-swiper .swiper-slide .work-desc {
  margin-top: 16px;
}
.works-common .works-swiper .swiper-slide .work-more {
  margin-top: 16px;
}

/* --- タグ pill スタイル ---
   PC: py-[8px] px-[12px], rounded-8px
   SP: py-[6px] px-[8px], rounded-8px --- */
.works-common .works-swiper .swiper-slide .work-tags .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 4px 8px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
}

/* SP */
@media (max-width: 767px) {
  #works1 .container,
  .works-common .container {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}


/* ============================================================
   [WORKS] Figma反映 (0305差分)
   PC node: 62:3028 / SP node: 62:3322
   ============================================================ */

/* pagination: 全幅プログレスバー型（bullet を flex:1 で均等幅バーに変換） */
.works-common .works-swiper .swiper-pagination {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  line-height: 0;
  font-size: 0;
  box-sizing: border-box;
}
.works-common .works-swiper .swiper-pagination-bullet {
  flex: 1;
  height: 2px;
  width: auto;
  border-radius: 0;
  margin: 0 !important;
  opacity: 1;
  background: var(--pcol-works-base-pagination-bar, #d9d9d9);
}
.works-common .works-swiper .swiper-pagination-bullet-active {
  background: var(--pcol-works-base-pagination-active, var(--pcol-theme-color, #0C396C));
}
/* reverse(acc)状態 */
.works-common.reverse .works-swiper .swiper-pagination-bullet {
  background: var(--pcol-works-acc-pagination-bar, var(--pcol-works-base-pagination-bar, rgba(255,255,255,0.3)));
}
.works-common.reverse .works-swiper .swiper-pagination-bullet-active {
  background: var(--pcol-works-acc-pagination-active, var(--pcol-works-base-pagination-active, #fff));
}

/* ① work-thumb の styles.css margin: 0 0 8px を解除 */
.works-common .works-swiper .swiper-slide .work-thumb {
  margin: 0;
}

/* ② h2→intro gap: Figma h2_wrap gap-[40px]（PC/SP 共通・固定値）*/
.works-common h2 {
  padding-bottom: 40px;
}

/* ─── PC (769px+) ─── */
@media (min-width: 768px) {
  /* ③ intro→swiper gap: Figma section gap-[80px] between h2_wrap and content-slider_wrap */
  .works-common .intro {
    margin-bottom: 0;
    padding: 0;
  }
  .works-common .works-swiper {
    margin-top: 80px;
    padding-bottom: 0;
  }
  /* ⑨ カード下部→スライダーバー: 80px (Figma content-slider gap-[80px]) */
  .works-common .works-swiper .swiper-pagination {
    position: relative;
    margin-top: 80px;
    padding: 0 40px;
  }

  /* ④ work-card gap（thumb↔body）: Figma ◎_content_item_wrap gap-[24px] */
  .works-common .works-swiper .swiper-slide .work-card {
    gap: 24px;
  }
}

/* ─── SP (〜768px) ─── */
@media (max-width: 767px) {
  /* SP: h2_ttl_txt_wrap gap → 0px */
  .works-common h2 .subtitle {
    padding-bottom: 0;
  }
  /* ⑤ intro→swiper gap: h2→slider pt Figma 56px */
  .works-common .intro {
    margin-bottom: 24px;
    padding: 0 20px;   /* Figma SP section px-[20px] と同等の水平余白 */
  }
  .works-common .works-swiper {
    margin-top: 56px;
    padding-bottom: 0;
  }
  /* ⑨ カード下部→スライダーバー: 48px (最も高いカードから48px) */
  .works-common .works-swiper .swiper-pagination {
    position: relative;
    margin-top: 48px;
  }

  /* SP スライド幅: Figma ◎_content_item_wrap w-[260px] */
  .works-common .works-swiper .swiper-slide {
    width: 260px;
  }

  /* ⑥ work-card gap（thumb↔body）: Figma ◎_content_item_wrap gap-[16px] */
  .works-common .works-swiper .swiper-slide .work-card {
    gap: 16px;
  }

  /* ⑦ work-thumb: SP border-radius */
  .works-common .works-swiper .swiper-slide .work-thumb {
    width: 100%;
    border-radius: 12px;
  }
  .works-common .works-swiper .swiper-slide .work-thumb img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ⑧ tags SP スタイル: py-4px px-8px, border-radius 4px, gap 6px */
  .works-common .works-swiper .swiper-slide .work-tags .tag {
    height: auto;
    padding: 4px 8px;
    border-radius: 4px;
  }
  .works-common .works-swiper .swiper-slide .work-tags {
    gap: 6px;
  }
}

/* ============================================================
   [WORKS] JS反映後 CSS追加 (0305追記)
   slidesPerView:'auto' 反映後の追加スタイル
   ============================================================ */

/* ⑩ swiper を container の外に拡張し画面幅いっぱいに表示（PC・SP共通）
   centeredSlides: true で先頭カードが中央配置される
   overflow-x: clip で 100vw スクロールバー幅分のはみ出しを防止 */
.works-common .works-swiper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: clip;
  padding-left: 0;
  padding-right: 0;
}

/* ⑪ PC: layout クラス別スライド幅・画像高さ（Figma 指定の固定サイズ）
   ※ index.html の .swiper-slide に :class="'layout-' + (item.layout ?? 0)" が必須 */
@media (min-width: 768px) {
  /* PC デフォルト: layout クラスなしでも 450px（Figma layout-0 相当） */
  .works-common .works-swiper .swiper-slide { width: 450px; }

  /* layout-0: 横長 450px幅 */
  .works-common .works-swiper .swiper-slide.layout-0 { width: 450px; }

  /* layout-1: 縦長 360px幅 */
  .works-common .works-swiper .swiper-slide.layout-1 { width: 360px; }

  /* layout-2: 正方形 360px幅 */
  .works-common .works-swiper .swiper-slide.layout-2 { width: 360px; }

  /* 画像: 自然なアスペクト比を保持（SPと同様） */
  .works-common .works-swiper .swiper-slide .work-thumb img {
    display: block;
    width: 100%;
    height: auto;
  }
}

#company .bg-title {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--company-bg-title-sp-fs);
  font-weight: var(--company-bg-title-sp-fw);
  letter-spacing: var(--company-bg-title-sp-ls);
}
@media (min-width: 768px) {
  #company .bg-title {
    font-size: var(--company-bg-title-pc-fs, var(--company-bg-title-sp-fs));
    font-weight: var(--company-bg-title-pc-fw, var(--company-bg-title-sp-fw));
    letter-spacing: var(--company-bg-title-pc-ls, var(--company-bg-title-sp-ls));
  }
}
#company .container h2 {
  font-size: var(--company-h2-sp-fs);
  font-weight: var(--company-h2-sp-fw);
  line-height: var(--company-h2-sp-lh);
  letter-spacing: var(--company-h2-sp-ls);
}
@media (min-width: 768px) {
  #company .container h2 {
    font-size: var(--company-h2-pc-fs, var(--company-h2-sp-fs));
    font-weight: var(--company-h2-pc-fw, var(--company-h2-sp-fw));
    line-height: var(--company-h2-pc-lh, var(--company-h2-sp-lh));
    letter-spacing: var(--company-h2-pc-ls, var(--company-h2-sp-ls));
  }
}
#company .container h2 .subtitle {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--company-h2-sub-sp-fs);
  font-weight: var(--company-h2-sub-sp-fw);
  line-height: var(--company-h2-sub-sp-lh);
  letter-spacing: var(--company-h2-sub-sp-ls);
}
@media (min-width: 768px) {
  #company .container h2 .subtitle {
    font-size: var(--company-h2-sub-pc-fs, var(--company-h2-sub-sp-fs));
    font-weight: var(--company-h2-sub-pc-fw, var(--company-h2-sub-sp-fw));
    line-height: var(--company-h2-sub-pc-lh, var(--company-h2-sub-sp-lh));
    letter-spacing: var(--company-h2-sub-pc-ls, var(--company-h2-sub-sp-ls));
  }
}
#company .container .intro {
  font-size: var(--company-section-lead-sp-fs);
  font-weight: var(--company-section-lead-sp-fw);
  line-height: var(--company-section-lead-sp-lh);
  letter-spacing: var(--company-section-lead-sp-ls);
  color: var(--pcol-company-section-lead-color, var(--pcol-company-text-color));
  text-align: left;  /* Figma SP: 左揃え */
  margin-top: 32px;
}
@media (min-width: 768px) {
  #company .container .intro {
    font-size: var(--company-section-lead-pc-fs, var(--company-section-lead-sp-fs));
    font-weight: var(--company-section-lead-pc-fw, var(--company-section-lead-sp-fw));
    line-height: var(--company-section-lead-pc-lh, var(--company-section-lead-sp-lh));
    letter-spacing: var(--company-section-lead-pc-ls, var(--company-section-lead-sp-ls));
    text-align: center;  /* Figma PC: 中央揃え */
  }
}
#company .container .company-wrap .infos .info-item .title {
  font-size: var(--company-item-label-sp-fs);
  font-weight: var(--company-item-label-sp-fw);
  line-height: var(--company-item-label-sp-lh);
  letter-spacing: var(--company-item-label-sp-ls);
}
@media (min-width: 768px) {
  #company .container .company-wrap .infos .info-item .title {
    font-size: var(--company-item-label-pc-fs, var(--company-item-label-sp-fs));
    font-weight: var(--company-item-label-pc-fw, var(--company-item-label-sp-fw));
    line-height: var(--company-item-label-pc-lh, var(--company-item-label-sp-lh));
    letter-spacing: var(--company-item-label-pc-ls, var(--company-item-label-sp-ls));
  }
}
#company .container .company-wrap .infos .info-item .value {
  font-size: var(--company-item-value-sp-fs);
  font-weight: var(--company-item-value-sp-fw);
  line-height: var(--company-item-value-sp-lh);
  letter-spacing: var(--company-item-value-sp-ls);
}
@media (min-width: 768px) {
  #company .container .company-wrap .infos .info-item .value {
    font-size: var(--company-item-value-pc-fs, var(--company-item-value-sp-fs));
    font-weight: var(--company-item-value-pc-fw, var(--company-item-value-sp-fw));
    line-height: var(--company-item-value-pc-lh, var(--company-item-value-sp-lh));
    letter-spacing: var(--company-item-value-pc-ls, var(--company-item-value-sp-ls));
  }
}

#company {
  width: 100%;
  background: var(--pcol-company-bg-color, var(--col-blue));
  color: var(--pcol-company-text-color, var(--col-white));
  position: relative;
  z-index: 2;
}
#company .bg-title {
  display: block;
  position: absolute;  /* T4: Figma通りabsolute配置、フロー外に出す */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  color: var(--pcol-company-bg-title-color, var(--pcol-base-color-3));
  white-space: nowrap;
  line-height: 1;
  margin-top: 0;
}
#company .container {
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin-inline: auto;
  padding: 64px 20px;  /* SP: Figma company container py=64px px=20px (vw→px) */
}
@media (min-width: 768px) {
  #company .container {
    padding: 120px 40px;  /* Figma PC: py=120px px=40px */
  }
}
#company .container h2 {
  text-align: center;
  padding-bottom: 0;  /* T3: h2自体のpadding不要。gap制御はintro/company-wrapのmargin-topで */
  position: relative;
}
#company .container h2 .subtitle {
  display: block;
  padding-bottom: 0;
  color: var(--pcol-company-section-title-en-color, var(--pcol-base-color-2, #0c396c));  /* T6: Figma subtitle色 */
}
@media (max-width: 767px) {
  #company .container h2 .subtitle {
    padding-bottom: 0;
  }
}
/* T5: section_lead 表示対応（Figma h2_wrap gap=40px） */
#company .container .company-wrap {
  margin-top: 56px;  /* SP: Figma h2→content gap=56px (vw→px) */
}
@media (min-width: 768px) {
  #company .container .company-wrap {
    margin-top: 80px;  /* Figma PC: h2_wrap→contents gap=80px */
  }
}
#company .container .company-wrap .infos {
  display: grid;
  row-gap: 16px;  /* SP: Figma info_wrap gap=16px */
}
@media (min-width: 768px) {
  #company .container .company-wrap .infos {
    row-gap: 16px;  /* Figma PC: company_info_wrap gap=16px */
  }
}
#company .container .company-wrap .infos .info-item {
  display: flex;
  flex-direction: column;  /* SP: Figma info_item layout=flex-col */
  align-items: flex-start;  /* SP: 縦並び時は左揃え */
  justify-content: flex-start;
  padding: 16px;  /* SP: Figma info_item padding=16px (vw→px) */
  gap: 4px;  /* SP: Figma info_item gap=4px */
  min-height: 3em;
  background: var(--pcol-company-item-bg-color, var(--col-white));
  border-radius: 8px;  /* SP: Figma info_item radius=8px (vw→px) */
}
@media (min-width: 768px) {
  #company .container .company-wrap .infos .info-item {
    flex-direction: row;  /* PC: 横並びに戻す */
    align-items: flex-start;  /* Figma PC: items-start */
    padding: 24px;  /* Figma PC: p-[24px] */
    border-radius: 12px;
    gap: 48px;  /* Figma PC: gap-[48px] */
  }
}
#company .container .company-wrap .infos .info-item .title {
  flex: 0 0 auto;  /* SP: 縦並びのため幅指定不要 */
  display: block;
}
@media (min-width: 768px) {
  #company .container .company-wrap .infos .info-item .title {
    flex: 0 0 160px;  /* Figma PC: w-[160px] */
  }
}
#company .container .company-wrap .infos .info-item .separator {
  width: 2px;
  height: 100%;
  display: none;
}
#company .container .company-wrap .infos .info-item .value {
  flex: 1 1 auto;
  display: block;
  padding-left: 0;  /* SP: 縦並びのためpadding不要 (vw→px) */
  white-space: pre-line;  /* \n や改行コードで改行表示 */
}
@media (min-width: 768px) {
  #company .container .company-wrap .infos .info-item .value {
    padding-left: 0;  /* gap=48pxで間隔制御 */
  }
}
#company .googlemap-wrap {
  margin-top: 16px;  /* SP: Figma company_contents gap=16px (vw→px) */
  width: 100%;
  border-radius: 8px;  /* SP: vw→px (2vw@375px≈7.5px→8px) */
  overflow: hidden;
}
@media (min-width: 768px) {
  #company .googlemap-wrap {
    margin-top: 40px;  /* Figma PC: company_contents gap=40px */
    border-radius: 12px;
  }
}
#company .googlemap-wrap iframe {
  width: 100%;
  max-width: 100%;
  display: block;
}


/* ============================================
   [COMPANY] Figma差分修正
   Figma node: 1722:18109
   ============================================ */

/* --- container パディング: Figma PC=120px 40px --- */
@media (min-width: 768px) {
  #company .container {
    padding: 120px 40px;
  }
}

/* --- h2→content gap: Figma PC=80px --- */
@media (min-width: 768px) {
  #company .container .company-wrap {
    margin-top: 80px;
  }
}

/* --- h2_wrap gap: T3で0に統一（gap制御はintro/company-wrapのmargin-topで） --- */
#company .container h2 {
  padding-bottom: 0;
}

/* --- info_wrap gap: Figma PC=16px --- */
@media (min-width: 768px) {
  #company .container .company-wrap .infos {
    row-gap: 16px;
  }
}
/* --- company_contents gap: Figma PC=40px (infos→map) --- */
@media (min-width: 768px) {
  #company .googlemap-wrap {
    margin-top: 40px;
  }
}

/* --- info-item: Figma PC padding=24px, gap=48px --- */
@media (min-width: 768px) {
  #company .container .company-wrap .infos .info-item {
    padding: 24px;
    border-radius: 12px;
    gap: 48px;
  }
}

#contact .container .card-body h2 {
  font-size: var(--contact-h2-sp-fs);
  font-weight: var(--contact-h2-sp-fw);
  line-height: var(--contact-h2-sp-lh);
  letter-spacing: var(--contact-h2-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body h2 {
    font-size: var(--contact-h2-pc-fs, var(--contact-h2-sp-fs));
    font-weight: var(--contact-h2-pc-fw, var(--contact-h2-sp-fw));
    line-height: var(--contact-h2-pc-lh, var(--contact-h2-sp-lh));
    letter-spacing: var(--contact-h2-pc-ls, var(--contact-h2-sp-ls));
  }
}
#contact .container .card-body .description {
  font-size: var(--contact-lead-sp-fs);
  font-weight: var(--contact-lead-sp-fw);
  line-height: var(--contact-lead-sp-lh);
  letter-spacing: var(--contact-lead-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body .description {
    font-size: var(--contact-lead-pc-fs, var(--contact-lead-sp-fs));
    font-weight: var(--contact-lead-pc-fw, var(--contact-lead-sp-fw));
    line-height: var(--contact-lead-pc-lh, var(--contact-lead-sp-lh));
    letter-spacing: var(--contact-lead-pc-ls, var(--contact-lead-sp-ls));
  }
}
#contact .container .card-body .tel-box .tel-number {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--contact-cta-txt-sp-fs);
  font-weight: var(--contact-cta-txt-sp-fw);
  line-height: var(--contact-cta-txt-sp-lh);
  letter-spacing: var(--contact-cta-txt-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body .tel-box .tel-number {
    font-size: var(--contact-cta-txt-pc-fs, var(--contact-cta-txt-sp-fs));
    font-weight: var(--contact-cta-txt-pc-fw, var(--contact-cta-txt-sp-fw));
    line-height: var(--contact-cta-txt-pc-lh, var(--contact-cta-txt-sp-lh));
    letter-spacing: var(--contact-cta-txt-pc-ls, var(--contact-cta-txt-sp-ls));
  }
}
#contact .container .card-body .tel-box .tel-message {
  font-size: var(--contact-cta-note-sp-fs);
  font-weight: var(--contact-cta-note-sp-fw);
  line-height: var(--contact-cta-note-sp-lh);
  letter-spacing: var(--contact-cta-note-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body .tel-box .tel-message {
    font-size: var(--contact-cta-note-pc-fs, var(--contact-cta-note-sp-fs));
    font-weight: var(--contact-cta-note-pc-fw, var(--contact-cta-note-sp-fw));
    line-height: var(--contact-cta-note-pc-lh, var(--contact-cta-note-sp-lh));
    letter-spacing: var(--contact-cta-note-pc-ls, var(--contact-cta-note-sp-ls));
  }
}
#contact .container .card-body .upper-item a {
  font-size: var(--contact-cta-txt-sp-fs);
  font-weight: var(--contact-cta-txt-sp-fw);
  line-height: var(--contact-cta-txt-sp-lh);
  letter-spacing: var(--contact-cta-txt-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body .upper-item a {
    font-size: var(--contact-cta-txt-pc-fs, var(--contact-cta-txt-sp-fs));
    font-weight: var(--contact-cta-txt-pc-fw, var(--contact-cta-txt-sp-fw));
    line-height: var(--contact-cta-txt-pc-lh, var(--contact-cta-txt-sp-lh));
    letter-spacing: var(--contact-cta-txt-pc-ls, var(--contact-cta-txt-sp-ls));
  }
}
#contact .container .card-body .upper-item .item-body .sub {
  font-size: var(--contact-cta-note-sp-fs);
  font-weight: var(--contact-cta-note-sp-fw);
  line-height: var(--contact-cta-note-sp-lh);
  letter-spacing: var(--contact-cta-note-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body .upper-item .item-body .sub {
    font-size: var(--contact-cta-note-pc-fs, var(--contact-cta-note-sp-fs));
    font-weight: var(--contact-cta-note-pc-fw, var(--contact-cta-note-sp-fw));
    line-height: var(--contact-cta-note-pc-lh, var(--contact-cta-note-sp-lh));
    letter-spacing: var(--contact-cta-note-pc-ls, var(--contact-cta-note-sp-ls));
  }
}
#contact .container .card-body .items-list .item a {
  font-size: var(--contact-btn-txt-sp-fs);
  font-weight: var(--contact-btn-txt-sp-fw);
  line-height: var(--contact-btn-txt-sp-lh);
  letter-spacing: var(--contact-btn-txt-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body .items-list .item a {
    font-size: var(--contact-btn-txt-pc-fs, var(--contact-btn-txt-sp-fs));
    font-weight: var(--contact-btn-txt-pc-fw, var(--contact-btn-txt-sp-fw));
    line-height: var(--contact-btn-txt-pc-lh, var(--contact-btn-txt-sp-lh));
    letter-spacing: var(--contact-btn-txt-pc-ls, var(--contact-btn-txt-sp-ls));
  }
}
#contact .container .card-body .items-list .item .item-body .sub {
  font-size: var(--contact-btn-note-sp-fs);
  font-weight: var(--contact-btn-note-sp-fw);
  line-height: var(--contact-btn-note-sp-lh);
  letter-spacing: var(--contact-btn-note-sp-ls);
}
@media (min-width: 768px) {
  #contact .container .card-body .items-list .item .item-body .sub {
    font-size: var(--contact-btn-note-pc-fs, var(--contact-btn-note-sp-fs));
    font-weight: var(--contact-btn-note-pc-fw, var(--contact-btn-note-sp-fw));
    line-height: var(--contact-btn-note-pc-lh, var(--contact-btn-note-sp-lh));
    letter-spacing: var(--contact-btn-note-pc-ls, var(--contact-btn-note-sp-ls));
  }
}
#contact {
  position: relative;
  z-index: 2;
  background: var(--pcol-contact-bg-color, var(--pcol-base-white, var(--col-white)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#contact .container {
  width: 100%;
  padding: 24px 20px;
}
@media (min-width: 768px) {
  #contact .container {
    padding: 48px 40px;
  }
}
#contact .container .card-body {
  padding: 40px 20px;
  backdrop-filter: blur(5px);
  background: var(--pcol-contact-card-bg-color, var(--pcol-base-color-2, var(--col-blue)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--pcol-contact-card-text-color, var(--pcol-base-white, var(--col-white)));
  border-radius: 20px;
  max-width: 800px;
  margin: auto;
}
@media (min-width: 768px) {
  #contact .container .card-body {
    padding: 60px 40px;
  }
}
#contact .container .card-body h2 {
  text-align: center;
  position: relative;
}
#contact .container .card-body .description {
  margin-top: 32px;
  text-align: center;
  color: var(--pcol-contact-section-intro-color, var(--pcol-contact-card-text-color, #fff));
}
@media (min-width: 768px) {
  #contact .container .card-body .description {
    margin-top: 40px;
  }
}
#contact .container .card-body .contact-wrap {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  #contact .container .card-body .contact-wrap {
    margin-top: 56px;
  }
}
#contact .container .card-body .tel-box {
  text-align: center;
}
#contact .container .card-body .tel-box .tel-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#contact .container .card-body .tel-box .tel-message {
  margin-top: 4px;
}
@media (min-width: 768px) {
  #contact .container .card-body .tel-box .tel-number {
    gap: 4px;
  }
  #contact .container .card-body .tel-box .tel-message {
    margin-top: 4px;
  }
}
#contact .container .card-body .items-list {
  margin-top: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  #contact .container .card-body .items-list {
    margin-top: 0;
    gap: 32px;
    grid-template-columns: 1fr 1fr;
  }
}
#contact .container .card-body .items-list .item {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media (min-width: 768px) {
  #contact .container .card-body .items-list .item {
    max-width: 340px;
  }
}
#contact .container .card-body .items-list .item a {
  flex-grow: 1;
  display: flex;
  height: 64px;
  border-radius: 8px;
  position: relative;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  padding: 8px 20px;
}
#contact .container .card-body .items-list .item a .item-body {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: 4px;
}
@media (min-width: 768px) {
  #contact .container .card-body .items-list .item a .item-body {
    gap: 0;
  }
}
/* contact icon 共通 */
#contact .container .card-body .items-list .item a > i,
#contact .container .card-body .upper-item a > i {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  font-size: 24px;
  height: 24px;
  line-height: 1;
}
/* tel-box icon sizing */
#contact .container .card-body .tel-box .tel-number i {
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 1;
}
@media (min-width: 768px) {
  #contact .container .card-body .tel-box .tel-number i {
    font-size: 26px;
    width: 26px;
    height: 26px;
  }
}
#contact .container .card-body .items-list .item a .sub {
  display: block;
  line-height: 1;
}
#contact .container .card-body .items-list .item a::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 16px;
  line-height: 1;
  background: currentColor;
  -webkit-mask-image: url("../app-img/ic_right_arrow.svg");
  mask-image: url("../app-img/ic_right_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
}
@media (min-width: 768px) {
  #contact .container .card-body .items-list .item a::after {
    right: 20px;
  }
}
/* T7: items-list type:tel → PC tel-box / SP ボタン切替 */
/* PC: tel-box表示、ボタン非表示 */
#contact .container .card-body .items-list .tel-btn-sp {
  display: none;
}
@media (max-width: 767px) {
  /* SP: ボタン表示、tel-box非表示 */
  #contact .container .card-body .items-list .tel-box-pc {
    display: none;
  }
  #contact .container .card-body .items-list .tel-btn-sp {
    display: block;
  }
}
/* PC: items-list type:tel → upper と同じプレーンテキスト表示 */
#contact .container .card-body .items-list .tel-box-pc .tel-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#contact .container .card-body .items-list .tel-box-pc .tel-number {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.72px;
}
#contact .container .card-body .items-list .tel-box-pc .tel-number a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none !important;
  box-shadow: none;
  border-radius: 0;
  height: auto;
  min-height: auto;
  padding: 0;
  color: inherit;
  position: static;
  line-height: 1;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.72px;
}
#contact .container .card-body .items-list .tel-box-pc .tel-number a::after {
  display: none;
}
#contact .container .card-body .items-list .tel-box-pc .tel-number a > i {
  position: static;
  left: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  font-size: 26px;
  width: 26px;
  height: 26px;
}
#contact .container .card-body .items-list .tel-box-pc .tel-message {
  font-size: 14px;
  letter-spacing: 0.84px;
  margin-top: 0;
}
/* tel-box: Figma準拠 (node 399:5718, contact-wrap直下) */
#contact .contact-wrap > .tel-box {
  text-align: center;
  padding: 0;
  border-radius: 0;
  background: none;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
#contact .contact-wrap > .tel-box .tel-number {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.72px;
}
#contact .contact-wrap > .tel-box .tel-number a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  background: none !important;
  padding: 0;
  min-height: auto;
  border-radius: 0;
  line-height: 1;
}
#contact .contact-wrap > .tel-box .tel-number a::after {
  display: none;
}
#contact .contact-wrap > .tel-box .tel-message {
  font-size: 14px;
  margin-top: 0;
  opacity: 1;
  letter-spacing: 0.84px;
}
/* upper tel-box SP調整 (Figma node 399:4930) */
@media (max-width: 767px) {
  #contact .contact-wrap > .tel-box {
    min-height: 56px;
  }
  #contact .contact-wrap > .tel-box .tel-number {
    font-size: 28px;
    letter-spacing: 0.84px;
  }
  #contact .contact-wrap > .tel-box .tel-message {
    font-size: 12px;
    letter-spacing: 0.6px;
  }
}
#faq {
  width: 100%;
}
#faq h2 .subtitle {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--faq-h2-sub-sp-fs);
  font-weight: var(--faq-h2-sub-sp-fw);
  line-height: var(--faq-h2-sub-sp-lh);
  letter-spacing: var(--faq-h2-sub-sp-ls);
}
@media (min-width: 768px) {
  #faq h2 .subtitle {
    font-size: var(--faq-h2-sub-pc-fs, var(--faq-h2-sub-sp-fs));
    font-weight: var(--faq-h2-sub-pc-fw, var(--faq-h2-sub-sp-fw));
    line-height: var(--faq-h2-sub-pc-lh, var(--faq-h2-sub-sp-lh));
    letter-spacing: var(--faq-h2-sub-pc-ls, var(--faq-h2-sub-sp-ls));
  }
}
#faq h2 {
  font-size: var(--faq-h2-sp-fs);
  font-weight: var(--faq-h2-sp-fw);
  line-height: var(--faq-h2-sp-lh);
  letter-spacing: var(--faq-h2-sp-ls);
}
@media (min-width: 768px) {
  #faq h2 {
    font-size: var(--faq-h2-pc-fs, var(--faq-h2-sp-fs));
    font-weight: var(--faq-h2-pc-fw, var(--faq-h2-sp-fw));
    line-height: var(--faq-h2-pc-lh, var(--faq-h2-sp-lh));
    letter-spacing: var(--faq-h2-pc-ls, var(--faq-h2-sp-ls));
  }
}
#faq .intro {
  font-size: var(--faq-section-lead-sp-fs);
  font-weight: var(--faq-section-lead-sp-fw);
  line-height: var(--faq-section-lead-sp-lh);
  letter-spacing: var(--faq-section-lead-sp-ls);
}
@media (min-width: 768px) {
  #faq .intro {
    font-size: var(--faq-section-lead-pc-fs, var(--faq-section-lead-sp-fs));
    font-weight: var(--faq-section-lead-pc-fw, var(--faq-section-lead-sp-fw));
    line-height: var(--faq-section-lead-pc-lh, var(--faq-section-lead-sp-lh));
    letter-spacing: var(--faq-section-lead-pc-ls, var(--faq-section-lead-sp-ls));
  }
}
#faq .faq-item .q {
  font-size: var(--faq-q-sp-fs);
  font-weight: var(--faq-q-sp-fw);
  line-height: var(--faq-q-sp-lh);
  letter-spacing: var(--faq-q-sp-ls);
}
@media (min-width: 768px) {
  #faq .faq-item .q {
    font-size: var(--faq-q-pc-fs, var(--faq-q-sp-fs));
    font-weight: var(--faq-q-pc-fw, var(--faq-q-sp-fw));
    line-height: var(--faq-q-pc-lh, var(--faq-q-sp-lh));
    letter-spacing: var(--faq-q-pc-ls, var(--faq-q-sp-ls));
  }
}
#faq .faq-item .q::before {
  font-size: var(--faq-q-label-sp-fs);
  font-weight: var(--faq-q-label-sp-fw);
  line-height: var(--faq-q-label-sp-lh);
  letter-spacing: var(--faq-q-label-sp-ls);
}
@media (min-width: 768px) {
  #faq .faq-item .q::before {
    font-size: var(--faq-q-label-pc-fs, var(--faq-q-label-sp-fs));
    font-weight: var(--faq-q-label-pc-fw, var(--faq-q-label-sp-fw));
    line-height: var(--faq-q-label-pc-lh, var(--faq-q-label-sp-lh));
    letter-spacing: var(--faq-q-label-pc-ls, var(--faq-q-label-sp-ls));
  }
}
#faq .faq-item .a-block .a {
  font-size: var(--faq-a-sp-fs);
  font-weight: var(--faq-a-sp-fw);
  line-height: var(--faq-a-sp-lh);
  letter-spacing: var(--faq-a-sp-ls);
}
@media (min-width: 768px) {
  #faq .faq-item .a-block .a {
    font-size: var(--faq-a-pc-fs, var(--faq-a-sp-fs));
    font-weight: var(--faq-a-pc-fw, var(--faq-a-sp-fw));
    line-height: var(--faq-a-pc-lh, var(--faq-a-sp-lh));
    letter-spacing: var(--faq-a-pc-ls, var(--faq-a-sp-ls));
  }
}
#faq .faq-item .a-block .a::before {
  font-size: var(--faq-q-label-sp-fs);
  font-weight: var(--faq-q-label-sp-fw);
  line-height: var(--faq-q-label-sp-lh);
  letter-spacing: var(--faq-q-label-sp-ls);
}
@media (min-width: 768px) {
  #faq .faq-item .a-block .a::before {
    font-size: var(--faq-q-label-pc-fs, var(--faq-q-label-sp-fs));
    font-weight: var(--faq-q-label-pc-fw, var(--faq-q-label-sp-fw));
    line-height: var(--faq-q-label-pc-lh, var(--faq-q-label-sp-lh));
    letter-spacing: var(--faq-q-label-pc-ls, var(--faq-q-label-sp-ls));
  }
}


/* ============================================
   [CONTACT] Figma差分修正
   Figma node: 13:1971
   ============================================ */

/* --- container パディング: Figma PC=48px 40px --- */
#contact .container {
  padding: 48px 40px;
}
/* --- contact_contents gap: Figma PC=40px --- */
#contact .container .card-body .contact-wrap {
  margin-top: 40px;
}
/* --- contact_txt_wrap gap: Figma PC=24px --- */
#contact .container .card-body .description {
  margin-top: 24px;
}

/* --- card-body: border-radius 20px, padding 60px 40px, max-width 800px ---
   Figma: rounded-[20px], px-[40px] py-[60px], max-w-[800px], centered --- */
#contact .container .card-body {
  border-radius: 20px;
  padding: 60px 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- items-list: gap 24px / template=2vw --- */
/* --- items-list: margin-top 56px / template=4vw ---
   Figma: contact_contents の gap-[56px] に相当 --- */
#contact .container .card-body .items-list {
  row-gap: 16px;
  column-gap: 32px;
  margin-top: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* --- PC: item 横幅制約解除（grid 1fr 1fr で幅いっぱいに） --- */
@media (min-width: 768px) {
  #contact .container .card-body .items-list .item {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- item a ボタン高さ: Figma=64px / template=5rem(80px) --- */
#contact .container .card-body .items-list .item a {
  min-height: 64px;
}

/* SP */
@media (max-width: 767px) {
  #contact .container {
    padding: 40px 20px;
  }
  #contact .container .card-body {
    padding: 40px 20px;
    border-radius: 16px;
  }
  /* SP: contact_txt_wrap gap: Figma 16px */
  #contact .container .card-body .description {
    margin-top: 16px;
  }
  /* SP: contact_contents gap: items-list margin-topで制御 */
  #contact .container .card-body .contact-wrap {
    margin-top: 32px;
  }
  #contact .container .card-body .items-list {
    margin-top: 16px;
    row-gap: 16px;
  }
  #contact .container .card-body .items-list .item a {
    height: auto;
    min-height: 63px;
    padding: 16px 16px 16px 20px;
  }
  /* T10: SP背景画像のレスポンシブ最適化 */
  #contact {
    background-position: center top;
    min-height: 400px;
  }
}

#faq {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--pcol-faq-bg-color, #f7f8fa);
  color: var(--pcol-faq-text-color, var(--pcol-base-black, var(--col-black)));
}
#faq .container {
  max-width: 1080px; /* コンテンツ1000px + padding 40px×2 */
  margin-inline: auto;
  padding: 120px 40px; /* PC: 上下120px 左右40px */
}
#faq h2 {
  text-align: center;
}
#faq h2 .subtitle {
  display: block;
  padding-bottom: 0;
  color: var(--pcol-faq-section-title-en-color, var(--pcol-base-color-2, #0c396c));
}
#faq .intro {
  text-align: center;
}
@media (max-width: 767px) {
  #faq .intro {
    text-align: left;
  }
}
#faq .faq-wrap {
  margin-top: 80px;
  display: grid;
  gap: 16px;
}
#faq .faq-item {
  padding: 24px;
  background: var(--pcol-faq-item-bg-color, var(--pcol-base-white, var(--col-white)));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  #faq .faq-item {
    border-radius: 12px;
  }
}
#faq .faq-item > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Q行: Q.ラベル + 質問テキスト + ＋/−アイコン（横並び）
   align-items: flex-start で Q. が質問テキスト1行目に揃う */
#faq .faq-q-wrap {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
#faq .faq-q-icon {
  flex-shrink: 0;
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-weight: 700;
  font-size: var(--faq-q-label-sp-fs);
  line-height: var(--faq-q-label-sp-lh);
  letter-spacing: var(--faq-q-label-sp-ls);
  color: var(--pcol-faq-q-label-color, #0c396c);
}
@media (min-width: 768px) {
  #faq .faq-q-icon {
    font-size: var(--faq-q-label-pc-fs, var(--faq-q-label-sp-fs));
    line-height: var(--faq-q-label-pc-lh, var(--faq-q-label-sp-lh));
    letter-spacing: var(--faq-q-label-pc-ls, var(--faq-q-label-sp-ls));
  }
}
#faq .faq-item .q {
  flex: 1;
  color: var(--pcol-faq-q-text-color);
  margin: 0;
}
/* ＋/−トグルアイコン（CSS疑似要素で描画） */
#faq .faq-toggle-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  margin-top: 0;
}
#faq .faq-toggle-icon::before,
#faq .faq-toggle-icon::after {
  content: '';
  position: absolute;
  background: var(--pcol-faq-q-label-color, #0c396c);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}
/* 横線（常時表示） */
#faq .faq-toggle-icon::before {
  width: 16px;
  height: 2px;
}
/* 縦線（＋時のみ表示、−時は非表示） */
#faq .faq-toggle-icon::after {
  width: 2px;
  height: 16px;
}
#faq .faq-toggle-icon.is-open::after {
  opacity: 0;
}

/* A行 */
#faq .faq-item .a-block .a {
  color: var(--pcol-faq-a-text-color);
}

#faq .intro {
  margin-top: 32px;
}

@media (max-width: 767px) {
  #faq .container {
    padding: 64px 20px; /* T12: SP上下64pxに統一 */
  }
  #faq h2 .subtitle {
    padding-bottom: 0;
  }
  #faq .faq-wrap {
    margin-top: 56px;
    gap: 16px;
  }
  #faq .faq-item {
    padding: 16px;
    border-radius: 8px;
    gap: 16px;
  }
  #faq .faq-toggle-icon {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }
  #faq .faq-toggle-icon::before {
    width: 14px;
  }
  #faq .faq-toggle-icon::after {
    height: 14px;
  }
}

/* ===== Footer Image Slider ===== */
.footer-area {
  position: relative;
}
.footer-area .bg-img-slider {
  overflow: hidden;
  margin-bottom: -24px;
  position: relative;
  z-index: 0;
}
.sitepat-round .footer-area .bg-img-slider {
  margin-bottom: -32px;
}
@media (min-width: 768px) {
  .footer-area .bg-img-slider {
    margin-bottom: -32px;
  }
  .sitepat-round .footer-area .bg-img-slider {
    margin-bottom: -64px;
  }
}
.footer-area .bg-img-slider .slider-wrapper {
  gap: 0;
}
.footer-area .bg-img-slider .slide-item {
  flex-shrink: 0;
}
.footer-area .bg-img-slider .slide-item img {
  display: block;
  width: 280px;
  height: 350px;
  object-fit: cover;
}
@media (min-width: 768px) {
  .footer-area .bg-img-slider .slide-item img {
    width: 750px;
    height: 600px;
  }
}
.footer-area .bg-img-slider.is-hidden {
  display: none;
}
/* スライダー表示時は footer の margin-top を打ち消し、角丸分だけ重ねる */
.footer-area .bg-img-slider:not(.is-hidden) + footer {
  margin-top: 0;
}
/* マーキー非表示時もfooterのmargin-topを0にする */
.footer-area .bg-img-slider.is-hidden + footer {
  margin-top: 0;
}
/* マーキー非表示時: 直前セクションとの余白を詰める */
.footer-area:has(.bg-img-slider.is-hidden) {
  margin-top: -24px;
}
@media (min-width: 768px) {
  .footer-area:has(.bg-img-slider.is-hidden) {
    margin-top: -32px;
  }
}

footer {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 16px;
  border-radius: 24px 24px 0 0;
  background: var(--pcol-footer-bg-color, var(--pcol-base-color-2, var(--col-blue)));
}
@media (min-width: 768px) {
  footer {
    border-radius: 32px 32px 0 0;
  }
}
footer .container {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  color: var(--pcol-footer-text-color, var(--pcol-base-white, var(--col-white)));
  padding: 40px 20px;
}
@media (min-width: 768px) {
  footer .container {
    padding: 48px 40px;
  }
}
footer .upper-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
footer .upper-block img {
  width: 30vw;
  height: auto;
}
@media (min-width: 768px) {
  footer .upper-block img {
    width: 150px;
  }
}
footer .upper-block a {
  color: inherit;
  text-decoration: none;
}
footer .upper-block h4 {
  margin-top: 0;
  font-size: var(--footer-company-name-sp-fs);
  font-weight: var(--footer-company-name-sp-fw);
  line-height: var(--footer-company-name-sp-lh);
  letter-spacing: var(--footer-company-name-sp-ls);
}
@media (min-width: 768px) {
  footer .upper-block h4 {
    font-size: var(--footer-company-name-pc-fs, var(--footer-company-name-sp-fs));
    font-weight: var(--footer-company-name-pc-fw, var(--footer-company-name-sp-fw));
    line-height: var(--footer-company-name-pc-lh, var(--footer-company-name-sp-lh));
    letter-spacing: var(--footer-company-name-pc-ls, var(--footer-company-name-sp-ls));
  }
}
footer .upper-block p {
  margin: 4px 0 0;
  font-size: var(--footer-address-sp-fs);
  font-weight: var(--footer-address-sp-fw);
  line-height: var(--footer-address-sp-lh);
  letter-spacing: var(--footer-address-sp-ls);
}
@media (min-width: 768px) {
  footer .upper-block p {
    font-size: var(--footer-address-pc-fs, var(--footer-address-sp-fs));
    font-weight: var(--footer-address-pc-fw, var(--footer-address-sp-fw));
    line-height: var(--footer-address-pc-lh, var(--footer-address-sp-lh));
    letter-spacing: var(--footer-address-pc-ls, var(--footer-address-sp-ls));
  }
}
footer .info-wrap {
  display: flex;
  margin-top: 16px;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 768px) {
  footer .info-wrap {
    margin-top: 32px;
    flex-direction: row;
    justify-content: space-between;
    gap: 32px;
  }
}
footer .lower-block {
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 23px;
}
footer .lower-block .footer-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
footer .lower-block .footer-nav li {
  line-height: 1;
}
@media (min-width: 768px) {
  footer .lower-block {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  footer .lower-block .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 24px 40px;
  }
  footer .lower-block .footer-nav li {
    display: inline-block;
  }
}
footer .lower-block a {
  color: var(--pcol-footer-text-color, var(--pcol-base-white, var(--col-white)));
  font-size: var(--footer-nav-item-sp-fs);
  font-weight: var(--footer-nav-item-sp-fw);
  line-height: var(--footer-nav-item-sp-lh);
  letter-spacing: var(--footer-nav-item-sp-ls);
}
@media (min-width: 768px) {
  footer .lower-block a {
    font-size: var(--footer-nav-item-pc-fs, var(--footer-nav-item-sp-fs));
    font-weight: var(--footer-nav-item-pc-fw, var(--footer-nav-item-sp-fw));
    line-height: var(--footer-nav-item-pc-lh, var(--footer-nav-item-sp-lh));
    letter-spacing: var(--footer-nav-item-pc-ls, var(--footer-nav-item-sp-ls));
  }
}
footer .sns-links {
  padding: 40px 0 0;
  display: flex;
  justify-content: center;
  gap: 24px;
}
@media (min-width: 768px) {
  footer .sns-links {
    justify-content: flex-end;
  }
}
footer .sns-links a {
  display: inline-block;
  color: var(--pcol-footer-text-color, var(--pcol-base-white, var(--col-white)));
  font-size: 2.4rem;
}
@media (min-width: 768px) {
  footer .sns-links a {
    font-size: 30px;
  }
}
footer .sns-links a::after {
  display: inline-block;
  font-family: "Font Awesome 7 Brands";
  font-weight: 400;
}
footer .sns-links a.sns-x::after {
  content: "\e61b";
}
footer .sns-links a.sns-instagram::after {
  content: "\f16d";
}
footer .sns-links a.sns-facebook::after {
  content: "\f09a";
}
footer .copyrights {
  margin: 40px 0 0;
  padding: 0 8px 0;
  border-top: none;
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--footer-copyright-sp-fs);
  font-weight: var(--footer-copyright-sp-fw);
  line-height: var(--footer-copyright-sp-lh);
  letter-spacing: var(--footer-copyright-sp-ls);
  text-align: center;
  color: var(--pcol-footer-text-color, var(--pcol-base-white, var(--col-white)));
}
@media (min-width: 768px) {
  footer .copyrights {
    margin-top: 56px;
    padding: 0 16px 0;
    font-size: var(--footer-copyright-pc-fs, var(--footer-copyright-sp-fs));
    font-weight: var(--footer-copyright-pc-fw, var(--footer-copyright-sp-fw));
    line-height: var(--footer-copyright-pc-lh, var(--footer-copyright-sp-lh));
    letter-spacing: var(--footer-copyright-pc-ls, var(--footer-copyright-sp-ls));
  }
}

/* ===== Subpage (Privacy / Terms) ===== */

.subpage-title {
  padding: 120px 20px 64px;
  text-align: center;
}
.subpage-title .inner {
  max-width: 1000px;
  margin: 0 auto;
}
.subpage-title h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--basecol-text-primary, var(--pcol-base-black, var(--col-black)));
  letter-spacing: 1px;
}

.subpage-body {
  padding: 0 20px 120px;
}
.subpage-body .inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.subpage-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--basecol-text-primary, var(--pcol-base-black, var(--col-black)));
}
.subpage-section .section-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.subpage-section .section-header h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.4px;
}
.subpage-section .section-header p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.96px;
}

.subpage-section .section-items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.subpage-section .item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subpage-section .item h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.12px;
}
.subpage-section .item p,
.subpage-section .item div {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.96px;
}

.subpage-section ol,
.subpage-section ul {
  margin-left: 24px;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.96px;
}
.subpage-section ul { list-style: disc; }
.subpage-section ol { list-style: decimal; }
.subpage-section li { margin-bottom: 0; }

.subpage-section a {
  text-decoration: underline;
  color: inherit;
  word-break: break-all;
}

.subpage-section .section-signature {
  text-align: right;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.96px;
}

.subpage-body.terms-body .inner {
  gap: 0;
}
.subpage-body.terms-body .subpage-section .section-header {
  gap: 24px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .subpage-title {
    padding: 176px 20px 80px;
  }
  .subpage-title h1 {
    font-size: 36px;
  }
  .subpage-body .inner {
    gap: 80px;
  }
  .subpage-section .section-header {
    gap: 32px;
  }
  .subpage-section .section-header h2 {
    font-size: 32px;
    letter-spacing: 1.92px;
  }
  .subpage-section .item {
    gap: 12px;
  }
  .subpage-section .item h3 {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.9px;
  }
  .subpage-body.terms-body .subpage-section .section-header {
    gap: 32px;
  }
}

/*# sourceMappingURL=styles.css.map */

/* === patch: message個別色指定 === */
#message .container .upper-block h2 {
  color: var(--pcol-message-section-title-color, var(--col-white));
}
#message .container .upper-block h2 span {
  color: var(--pcol-message-section-title-en-color, var(--col-white));
}
#message .container .upper-block .section-lead {
  color: var(--pcol-message-section-lead-color, var(--col-white));
}
#message .message-slider .slide-item figure figcaption {
  color: var(--pcol-message-slide-caption-color, var(--col-white));
}

/* === patch: service非繰り返しテキスト色 === */
#service h2 {
  color: var(--pcol-service-section-title-color, inherit);
}
#service h2 .subtitle {
  color: var(--pcol-service-section-title-en-color, inherit);
}
#service .intro {
  color: var(--pcol-service-section-lead-color, inherit);
}

/* === patch: service繰り返しアイテム色 === */
#service .service-card .service-body .service-title .ja {
  color: var(--pcol-service-item-title-color, inherit);
}
#service .service-card .service-body .service-title .en {
  color: var(--pcol-service-item-subtitle-color, var(--pcol-base-color-2, var(--col-blue)));
}
#service .service-card .service-body .service-desc {
  color: var(--pcol-service-item-description-color, inherit);
}

/* === patch: serviceボタン色 === */
#service .service-card .service-body .service-more .button {
  color: var(--pcol-service-btn-text-color, var(--pcol-base-white, var(--col-white)));
  background: var(--pcol-service-btn-bg-color, var(--pcol-base-color-2, var(--col-blue)));
}

/* === patch: service注釈色 === */
#service .notice-area .notice {
  color: var(--pcol-service-notice-color, inherit);
}

/* === patch: phase2 section-title colors (v2 2026-03-10) === */

/* Works: セクションタイトル (base/reverse) */
.works-common h2 {
  color: var(--pcol-works-base-section-title-color, inherit);
}
.works-common.reverse h2 {
  color: var(--pcol-works-acc-section-title-color, var(--pcol-works-base-section-title-color, inherit));
}

/* FAQ: セクションタイトル */
#faq h2 {
  color: var(--pcol-faq-section-title-color, inherit);
}
/* FAQ: リード文 */
#faq .intro {
  color: var(--pcol-faq-section-lead-color, inherit);
}

/* Company: セクションタイトル */
#company .container h2 {
  color: var(--pcol-company-section-title-color, inherit);
}

/* Flow: セクションタイトル */
#flow h2 {
  color: var(--pcol-flow-section-title-color, inherit);
}

/* Flow: リード文 */
#flow .intro {
  color: var(--pcol-flow-section-lead-color, inherit);
}

/* Flow: カード番号 */
#flow .step-head .num {
  color: var(--pcol-flow-card-num-color, inherit);
}

/* Contact: タイトル */
#contact .card-body h2 {
  color: var(--pcol-contact-title-color, inherit);
}

/* === patch: phase3 works card colors === */

/* Works Base state: card elements */
.works-common .work-title {
  color: var(--pcol-works-base-title-color, var(--pcol-base-color-2, #326ff9));
}
.works-common .work-subtitle {
  color: var(--pcol-works-base-subtitle-color, inherit);
}
.works-common .work-desc {
  color: var(--pcol-works-base-desc-color, inherit);
}
.works-common .work-more .btn-more {
  background-color: var(--pcol-works-base-btn-bg, var(--pcol-base-color-2, #326ff9));
  color: var(--pcol-works-base-btn-text, #fff);
}

/* Works Reverse state: section + card elements (acc → base fallback) */
.works-common.reverse .work-title {
  color: var(--pcol-works-acc-title-color, var(--pcol-works-base-title-color, var(--pcol-base-color-2, #326ff9)));
}
.works-common.reverse .work-subtitle {
  color: var(--pcol-works-acc-subtitle-color, var(--pcol-works-base-subtitle-color, inherit));
}
.works-common.reverse .work-desc {
  color: var(--pcol-works-acc-desc-color, var(--pcol-works-base-desc-color, inherit));
}
.works-common.reverse .work-more .btn-more {
  background-color: var(--pcol-works-acc-btn-bg, var(--pcol-works-base-btn-bg, var(--pcol-base-color-2, #326ff9)));
  color: var(--pcol-works-acc-btn-text, var(--pcol-works-base-btn-text, #fff));
}

/* === patch: phase4 works section heading/notice colors (v2 2026-03-10) === */
.works-common h2 .subtitle {
  color: var(--pcol-works-base-section-title-en-color, inherit);
}
.works-common .intro {
  color: var(--pcol-works-base-section-lead-color, inherit);
}
.works-common .notice-area .notice {
  color: var(--pcol-works-base-notice-color, inherit);
}
.works-common.reverse h2 .subtitle {
  color: var(--pcol-works-acc-section-title-en-color, var(--pcol-works-base-section-title-en-color, inherit));
}
.works-common.reverse .intro {
  color: var(--pcol-works-acc-section-lead-color, var(--pcol-works-base-section-lead-color, inherit));
}
.works-common.reverse .notice-area .notice {
  color: var(--pcol-works-acc-notice-color, var(--pcol-works-base-notice-color, inherit));
}

/* === patch: phase5 works card title/btn specificity fix === */
.works-common .works-swiper .swiper-slide .work-title {
  color: var(--pcol-works-base-title-color, var(--pcol-base-color-2, #326ff9));
}
.works-common .works-swiper .swiper-slide .work-more .btn-more {
  color: var(--pcol-works-base-btn-text, #fff);
  background-color: var(--pcol-works-base-btn-bg, var(--pcol-base-color-2, #326ff9));
}
.works-common.reverse .works-swiper .swiper-slide .work-title {
  color: var(--pcol-works-acc-title-color, var(--pcol-works-base-title-color, var(--pcol-base-color-2, #326ff9)));
}
.works-common.reverse .works-swiper .swiper-slide .work-more .btn-more {
  color: var(--pcol-works-acc-btn-text, var(--pcol-works-base-btn-text, #fff));
  background-color: var(--pcol-works-acc-btn-bg, var(--pcol-works-base-btn-bg, var(--pcol-base-color-2, #326ff9)));
}

/* =============================================
   SQUARE TEMPLATE
   body.sitepat-square で全要素の角丸を 0 に上書き
   + MV を全幅画像 + テキストオーバーレイに変更
   ============================================= */

/* --- A. 角丸の一括 0 化 --- */
.sitepat-square #mv .mv-bg-image,
.sitepat-square #mv .mv-bg-image .img-wrap,
.sitepat-square #message .message-slider .slide-item figure,
.sitepat-square #message .message-slider .slide-item figure img,
.sitepat-square #message .image-block .image-block-item img,
.sitepat-square #service,
.sitepat-square #service .service-card figure img,
.sitepat-square #service .service-tags.pill-style .tag,
.sitepat-square #service .service-more .btn-more,
.sitepat-square .works-common .works-swiper .swiper-slide .work-thumb,
.sitepat-square .works-common .works-swiper .swiper-slide .work-tags .tag,
.sitepat-square .works-common .works-swiper .swiper-slide .work-more .btn-more,
.sitepat-square .card-list-common .card-list-swiper .swiper-slide .card-list-thumb,
.sitepat-square .card-list-common .card-list-swiper .swiper-slide .card-list-tags .tag,
.sitepat-square .card-list-common .card-list-swiper .swiper-slide .card-list-more .btn-more,
.sitepat-square #flow .flow-swiper .flow-card .flow-card-wrap,
.sitepat-square #flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image,
.sitepat-square #faq .faq-item,
.sitepat-square #company .info-item,
.sitepat-square #company .googlemap-wrap,
.sitepat-square #contact .card-body,
.sitepat-square #contact .items-list .item a,
.sitepat-square .button,
.sitepat-square #mv .cta .btn,
.sitepat-square header .header-wrap,
.sitepat-square header .header-wrap .button-wrap a,
.sitepat-square header .header-drawer-menu .button-wrap,
.sitepat-square header .header-drawer-menu .drawer-wrap,
.sitepat-square header .header-drawer-menu .drawer-cta-btn,
.sitepat-square footer {
  border-radius: 0 !important;
}

/* --- B-1. ヘッダー: 浮遊カード → 全幅フラットバー --- */
.sitepat-square header {
  padding: 0 !important;
}
.sitepat-square header .header-wrap {
  box-shadow: none;
  max-width: none;
  height: 60px; /* SP: 60px */
}
@media (min-width: 768px) {
  .sitepat-square header .header-wrap {
    height: 72px; /* PC: 72px */
  }
}


/* --- B-2. MV レイアウト: 全幅画像 + テキストオーバーレイ --- */

/* MV コンテナ: padding を全方向 0 に（画像が上端に密着） */
.sitepat-square #mv {
  padding: 0 !important;
}

/* MV 画像: 全幅・パディングなし */
.sitepat-square #mv .mv-bg-image {
  margin: 0;
  padding: 0 !important;
  width: 100%;
  max-width: none;
}

/* MV: 画像とテキストを同じ空間に重ねる */
.sitepat-square #mv {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* MV テキストを画像上に配置 */
/* Figma: mv_ttl_wrap w=1200px, 外側に padding 80px → 合計 1360px */
.sitepat-square #mv .mv-base-contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 80px 20px 40px; /* SP: top 80px, sides 20px, bottom 40px */
  display: flex;
  flex-direction: column;
  justify-content: end; /* SP: 下端揃え */
}
@media (min-width: 768px) {
  .sitepat-square #mv .mv-base-contents {
    padding: 128px 80px 80px; /* PC: top 128px, sides 80px, bottom 80px */
    max-width: 1360px; /* 1200px content + 80px padding × 2 */
    justify-content: center; /* PC: 垂直中央 */
  }
}

/* テキスト色を白に */
.sitepat-square #mv .mv-base-contents h1 {
  color: var(--pcol-mv-catchphrase-color, #fff);
}
.sitepat-square #mv .mv-base-contents .sub-catchphrase {
  color: var(--pcol-mv-sub-catchphrase-color, #fff);
}

/* グラデーションオーバーレイ（画像の上にかぶせてテキスト可読性を確保） */
.sitepat-square #mv .mv-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.03) 35%,
    var(--pcol-mv-overlay-color, rgba(12, 57, 108, 0.3)) 77%);
  pointer-events: none;
}

/* MV 画像高さ: SP auto(max 800px, ベース継承) / PC 760px */
@media (min-width: 768px) {
  .sitepat-square #mv .mv-bg-image {
    height: 760px;
    aspect-ratio: unset;
    overflow: hidden;
  }
  .sitepat-square #mv .mv-bg-image .img-wrap {
    position: relative;
    height: 100%;
  }
  .sitepat-square #mv .mv-bg-image .img-wrap picture {
    display: block;
    height: 100%;
  }
  .sitepat-square #mv .mv-bg-image .img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
  }
}

/* --- C. Service ボタン: pill → アイコン + テキスト形式 --- */
/* Figma (408:186): 40x40 角型背景（矢印アイコン）左 + テキスト右、全体背景なし */
.sitepat-square #service .service-card .service-body .service-more .btn-more {
  background: transparent !important;
  color: var(--pcol-service-btn-text-color, var(--pcol-base-color-1, #2a2f4e));
  min-width: auto;
  max-width: none;
  height: 40px;
  padding: 0 0 0 58px; /* 40px icon + 18px gap */
  justify-content: flex-start;
  font-weight: 700;
}
/* ::before = 40x40 角型背景 */
.sitepat-square #service .service-card .service-body .service-more .btn-more::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: var(--pcol-service-btn-bg-color, var(--pcol-base-color-1, #0c396c));
}
/* ::after = シェブロンアイコン（白、角型背景の内側に配置） */
.sitepat-square #service .service-card .service-body .service-more .btn-more::after {
  content: "" !important;
  position: absolute;
  left: 8px;
  top: 8px;
  right: auto;
  width: 24px;
  height: 24px;
  background: #fff; /* 矢印は常にダーク背景(::before)上なので白固定 */
  -webkit-mask-image: url("../app-img/ic_chevron_right.svg");
  mask-image: url("../app-img/ic_chevron_right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* SP: テキスト左・矢印右 + .service-more 右揃え */
@media (max-width: 767px) {
  .sitepat-square #service .service-card .service-body .service-more {
    justify-content: flex-end !important; /* 右揃え */
  }
  .sitepat-square #service .service-card .service-body .service-more .btn-more {
    padding: 0 52px 0 0; /* 右側にアイコンスペース */
    justify-content: flex-end;
  }
  .sitepat-square #service .service-card .service-body .service-more .btn-more::before {
    left: auto;
    right: 0;
  }
  .sitepat-square #service .service-card .service-body .service-more .btn-more::after {
    left: auto;
    right: 8px;
  }
}

/* --- D. Contact ボタン矢印: →矢印 → シェブロンアイコン --- */
.sitepat-square #contact .container .card-body .items-list .item a::after {
  -webkit-mask-image: url("../app-img/ic_chevron_right.svg");
  mask-image: url("../app-img/ic_chevron_right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* =============================================
   ROUND TEMPLATE
   body.sitepat-round で角丸を大きめに上書き
   + MV に円形 mask-image でブロブ風クロップ
   ============================================= */

/* --- A. 角丸の個別上書き --- */

/* Message スライド画像: 24px(SP) / 48px(PC) */
.sitepat-round #message .message-slider .slide-item figure,
.sitepat-round #message .message-slider .slide-item figure img {
  border-radius: 24px;
}
@media (min-width: 768px) {
  .sitepat-round #message .message-slider .slide-item figure,
  .sitepat-round #message .message-slider .slide-item figure img {
    border-radius: 48px;
  }
}

/* Service セクション: 32px(SP) / 64px(PC) */
.sitepat-round #service {
  border-radius: 32px;
}
@media (min-width: 768px) {
  .sitepat-round #service {
    border-radius: 64px;
  }
}

/* Service 画像: 24px(SP) / 48px(PC) */
.sitepat-round #service .service-card figure img {
  border-radius: 24px;
}
@media (min-width: 768px) {
  .sitepat-round #service .service-card figure img {
    border-radius: 48px;
  }
}

/* Service タグ(pill): 8px → 999px */
.sitepat-round #service .service-tags.pill-style .tag {
  border-radius: 999px;
}

/* Service ボタン: pill → 円形アイコン + テキスト形式 */
/* PC: 40x40 円形背景（矢印アイコン）左 + テキスト右 */
.sitepat-round #service .service-card .service-body .service-more .btn-more {
  background: transparent !important;
  color: var(--pcol-service-btn-text-color, var(--pcol-base-color-1, #2a2f4e));
  min-width: auto;
  max-width: none;
  height: 40px;
  padding: 0 0 0 58px;
  justify-content: flex-start;
  align-items: center;
  font-weight: 700;
  border-radius: 0;
}
/* ::before = 40x40 円形背景 */
.sitepat-round #service .service-card .service-body .service-more .btn-more::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: var(--pcol-service-btn-bg-color, var(--pcol-base-color-1, #0c396c));
  border-radius: 999px;
}
/* ::after = シェブロンアイコン（白、円形背景の内側） */
.sitepat-round #service .service-card .service-body .service-more .btn-more::after {
  content: "" !important;
  position: absolute;
  left: 8px;
  top: 8px;
  right: auto;
  width: 24px;
  height: 24px;
  background: #fff;
  -webkit-mask-image: url("../app-img/ic_chevron_right.svg");
  mask-image: url("../app-img/ic_chevron_right.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* SP: テキスト左・40x40円形アイコン右 + 右揃え */
@media (max-width: 767px) {
  .sitepat-round #service .service-card .service-body .service-more {
    justify-content: flex-end !important;
  }
  .sitepat-round #service .service-card .service-body .service-more .btn-more {
    height: 40px;
    padding: 0 52px 0 0;
    justify-content: flex-end;
  }
  .sitepat-round #service .service-card .service-body .service-more .btn-more::before {
    left: auto;
    right: 0;
  }
  .sitepat-round #service .service-card .service-body .service-more .btn-more::after {
    left: auto;
    right: 8px;
  }
}

/* Works サムネイル: 24px(SP) / 48px(PC) */
.sitepat-round .works-common .works-swiper .swiper-slide .work-thumb {
  border-radius: 24px;
}
@media (min-width: 768px) {
  .sitepat-round .works-common .works-swiper .swiper-slide .work-thumb {
    border-radius: 48px;
  }
}

/* Works タグ: 8px/4px → 999px */
.sitepat-round .works-common .works-swiper .swiper-slide .work-tags .tag {
  border-radius: 999px;
}

/* Works ボタン: → 999px */
.sitepat-round .works-common .works-swiper .swiper-slide .work-more .btn-more {
  border-radius: 999px;
}

/* Flow ステップ画像: 24px(SP) / 48px(PC) */
.sitepat-round #flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image {
  border-radius: 24px;
}
@media (min-width: 768px) {
  .sitepat-round #flow .flow-swiper .flow-card .flow-card-wrap .image-wrap .step-image {
    border-radius: 48px;
  }
}

/* FAQ アイテム: 24px */
.sitepat-round #faq .faq-item {
  border-radius: 24px;
}

/* Company info: 8px/16px → 24px */
.sitepat-round #company .info-item {
  border-radius: 24px;
}

/* Company map: 24px */
.sitepat-round #company .googlemap-wrap {
  border-radius: 24px;
}

/* Contact card-body: 32px(SP) / 48px(PC) */
.sitepat-round #contact .card-body {
  border-radius: 32px;
}
@media (min-width: 768px) {
  .sitepat-round #contact .card-body {
    border-radius: 48px;
  }
}

/* Contact ボタン/リンク: → 999px */
.sitepat-round #contact .items-list .item a {
  border-radius: 999px;
}

/* 共通ボタン: 9999px → 999px（統一） */
.sitepat-round .button {
  border-radius: 999px;
}

/* Header CTA: 9999px → 999px */
.sitepat-round header .header-wrap .button-wrap a {
  border-radius: 999px;
}

/* Header hamburger: → 999px（円形） */
.sitepat-round header .header-drawer-menu .button-wrap {
  border-radius: 999px;
}

/* Header ドロワー背景: 32px 0 0 32px */
.sitepat-round header .header-drawer-menu .drawer-wrap {
  border-radius: 32px 0 0 32px;
}

/* Header ドロワーCTAボタン: → 999px */
.sitepat-round header .header-drawer-menu .drawer-cta-btn {
  border-radius: 999px;
}

/* ヘッダー: 浮遊カード → 全幅フラットバー */
.sitepat-round header {
  padding: 0 !important;
}
.sitepat-round header .header-wrap {
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

/* MV CTA ボタン: → 999px */
.sitepat-round #mv .cta .btn {
  border-radius: 999px;
}

/* Footer 上部: 32px(SP) / 64px(PC) */
.sitepat-round footer {
  border-radius: 32px 32px 0 0;
}
@media (min-width: 768px) {
  .sitepat-round footer {
    border-radius: 64px 64px 0 0;
  }
}

/* --- B. MV mask-image: 円形マスクでブロブ風クロップ --- */
/* Figma: 大きな円を位置調整し、MV下部に緩やかなカーブを作る */

/* 円形マスクでMV下部に緩やかなカーブ（水平中央配置） */
.sitepat-round #mv .mv-bg-image .img-wrap {
  border-radius: 0 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 1500px 1500px;
  mask-size: 1500px 1500px;
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* PC: より大きな円で緩やかなカーブ */
@media (min-width: 768px) {
  .sitepat-round #mv .mv-bg-image .img-wrap {
    -webkit-mask-size: 4000px 4000px;
    mask-size: 4000px 4000px;
    -webkit-mask-position: center -3215px;
    mask-position: center -3215px;
  }
}

/* MV 画像コンテナの角丸を無効化（マスクが形状を制御） */
.sitepat-round #mv .mv-bg-image {
  border-radius: 0 !important;
  overflow: visible;
}

/* テキスト色を白に */
.sitepat-round #mv .mv-base-contents h1 {
  color: var(--pcol-mv-catchphrase-color, #fff);
}
.sitepat-round #mv .mv-base-contents .sub-catchphrase {
  color: var(--pcol-mv-sub-catchphrase-color, #fff);
}

/* MV テキストを画像上にオーバーレイ */
.sitepat-round #mv .mv-base-contents {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 64px 20px;
  text-align: center;
}
@media (min-width: 768px) {
  .sitepat-round #mv .mv-base-contents {
    padding: 40px 80px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: auto;
  }
}

/* グラデーションオーバーレイ（img-wrap に適用し円形マスク内に収める） */
.sitepat-round #mv .mv-bg-image .img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.04) 22%,
    var(--pcol-mv-overlay-color, rgba(12, 57, 108, 0.4)) 69%);
  pointer-events: none;
}

/* MV padding を全方向 0 に（画像が全幅・上端密着） */
.sitepat-round #mv {
  padding: 0 !important;
  overflow: visible;
  background: transparent !important;
}

/* MV 画像高さ: SP auto(max 800px, ベース継承) / PC 792px */
/* 全画面共通: レイアウトリセット */
.sitepat-round #mv .mv-bg-image {
  margin: 0;
  padding: 0 !important;
  max-width: none;
}
/* SP: img-wrap に position: relative を維持（::after overlay + mask 用） */
/* height: calc(100% + 40px) でマスク曲線が見切れないよう下方に拡張 */
.sitepat-round #mv .mv-bg-image .img-wrap {
  position: relative;
  height: calc(100% + 40px);
  display: block;
}
/* PC: 固定高さ + object-fit cover */
@media (min-width: 768px) {
  .sitepat-round #mv .mv-bg-image {
    height: 792px;
    aspect-ratio: unset;
    padding: 0 !important;
    overflow: hidden;
  }
  .sitepat-round #mv .mv-bg-image .img-wrap {
    height: 100%;
  }
  .sitepat-round #mv .mv-bg-image .img-wrap picture {
    display: block;
    height: 100%;
  }
  .sitepat-round #mv .mv-bg-image .img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
  }
}

/* ============================================================
   [CARD_LIST] 汎用カードリストセクション
   works と同構造（Swiper カルーセル）。色反転(reverse)なし。
   フォント変数は --works-* を共有。色変数は --pcol-card-list-* 独自。
   ============================================================ */

/* --- フォント: h2 .subtitle --- */
.card-list-common h2 .subtitle {
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--works-h2-sub-sp-fs);
  font-weight: var(--works-h2-sub-sp-fw);
  line-height: var(--works-h2-sub-sp-lh);
  letter-spacing: var(--works-h2-sub-sp-ls);
}
@media (min-width: 768px) {
  .card-list-common h2 .subtitle {
    font-size: var(--works-h2-sub-pc-fs, var(--works-h2-sub-sp-fs));
    font-weight: var(--works-h2-sub-pc-fw, var(--works-h2-sub-sp-fw));
    line-height: var(--works-h2-sub-pc-lh, var(--works-h2-sub-sp-lh));
    letter-spacing: var(--works-h2-sub-pc-ls, var(--works-h2-sub-sp-ls));
  }
}
/* --- フォント: h2 --- */
.card-list-common h2 {
  font-size: var(--works-h2-sp-fs);
  font-weight: var(--works-h2-sp-fw);
  line-height: var(--works-h2-sp-lh);
  letter-spacing: var(--works-h2-sp-ls);
}
@media (min-width: 768px) {
  .card-list-common h2 {
    font-size: var(--works-h2-pc-fs, var(--works-h2-sp-fs));
    font-weight: var(--works-h2-pc-fw, var(--works-h2-sp-fw));
    line-height: var(--works-h2-pc-lh, var(--works-h2-sp-lh));
    letter-spacing: var(--works-h2-pc-ls, var(--works-h2-sp-ls));
  }
}
/* --- フォント: .intro --- */
.card-list-common .intro {
  font-size: var(--works-section-lead-sp-fs);
  font-weight: var(--works-section-lead-sp-fw);
  line-height: var(--works-section-lead-sp-lh);
  letter-spacing: var(--works-section-lead-sp-ls);
}
@media (min-width: 768px) {
  .card-list-common .intro {
    font-size: var(--works-section-lead-pc-fs, var(--works-section-lead-sp-fs));
    font-weight: var(--works-section-lead-pc-fw, var(--works-section-lead-sp-fw));
    line-height: var(--works-section-lead-pc-lh, var(--works-section-lead-sp-lh));
    letter-spacing: var(--works-section-lead-pc-ls, var(--works-section-lead-sp-ls));
  }
}
/* --- フォント: card title --- */
.card-list-common .card-list-swiper .swiper-slide .card-list-title {
  font-size: var(--works-slider-title-sp-fs);
  font-weight: var(--works-slider-title-sp-fw);
  line-height: var(--works-slider-title-sp-lh);
  letter-spacing: var(--works-slider-title-sp-ls);
}
@media (min-width: 768px) {
  .card-list-common .card-list-swiper .swiper-slide .card-list-title {
    font-size: var(--works-slider-title-pc-fs, var(--works-slider-title-sp-fs));
    font-weight: var(--works-slider-title-pc-fw, var(--works-slider-title-sp-fw));
    line-height: var(--works-slider-title-pc-lh, var(--works-slider-title-sp-lh));
    letter-spacing: var(--works-slider-title-pc-ls, var(--works-slider-title-sp-ls));
  }
}
/* --- フォント: card subtitle --- */
.card-list-common .card-list-swiper .swiper-slide .card-list-subtitle {
  font-size: var(--works-slider-title-sub-sp-fs);
  font-weight: var(--works-slider-title-sub-sp-fw);
  line-height: var(--works-slider-title-sub-sp-lh);
  letter-spacing: var(--works-slider-title-sub-sp-ls);
}
@media (min-width: 768px) {
  .card-list-common .card-list-swiper .swiper-slide .card-list-subtitle {
    font-size: var(--works-slider-title-sub-pc-fs, var(--works-slider-title-sub-sp-fs));
    font-weight: var(--works-slider-title-sub-pc-fw, var(--works-slider-title-sub-sp-fw));
    line-height: var(--works-slider-title-sub-pc-lh, var(--works-slider-title-sub-sp-lh));
    letter-spacing: var(--works-slider-title-sub-pc-ls, var(--works-slider-title-sub-sp-ls));
  }
}

/* --- セクション基本レイアウト --- */
.card-list-common {
  position: relative;
  z-index: 2;
  width: 100%;
  color: var(--pcol-card-list-text-color, var(--pcol-base-black, var(--col-black)));
  background: var(--pcol-card-list-bg-color, var(--pcol-base-white, var(--col-white)));
}
.card-list-common h2 {
  text-align: center;
  padding-bottom: 40px;
  position: relative;
  color: var(--pcol-card-list-section-title-color, inherit);
}
.card-list-common h2 .subtitle {
  display: block;
  padding-bottom: 0;
  color: var(--pcol-card-list-section-title-en-color, inherit);
}
.card-list-common .intro {
  display: block;
  text-align: center;
  color: var(--pcol-card-list-section-lead-color, inherit);
}
@media (max-width: 767px) {
  .card-list-common .intro {
    text-align: left;
    margin-bottom: 24px;
    padding: 0 20px;
  }
}
@media (min-width: 768px) {
  .card-list-common .intro {
    margin-bottom: 0;
    padding: 0;
  }
}

/* --- container --- */
.card-list-common .container {
  max-width: 1200px;
  margin: auto;
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 767px) {
  .card-list-common .container {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* --- Swiper ラッパー: container外に拡張 --- */
.card-list-common .card-list-swiper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: clip;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .card-list-common .card-list-swiper {
    margin-top: 80px;
    padding-bottom: 0;
  }
}
@media (max-width: 767px) {
  .card-list-common .card-list-swiper {
    margin-top: 56px;
    padding-bottom: 0;
  }
}

/* --- swiper-slide height --- */
.card-list-common .card-list-swiper .swiper-slide {
  height: auto;
}

/* --- カードレイアウト --- */
.card-list-common .card-list-swiper .swiper-slide .card-list-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- 画像サムネイル --- */
.card-list-common .card-list-swiper .swiper-slide .card-list-thumb {
  margin: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.card-list-common .card-list-swiper .swiper-slide .card-list-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 768px) {
  .card-list-common .card-list-swiper .swiper-slide .card-list-thumb {
    border-radius: 16px;
  }
}

/* --- SP: スライド幅・カード gap --- */
@media (max-width: 767px) {
  .card-list-common .card-list-swiper .swiper-slide {
    width: 260px;
  }
  .card-list-common .card-list-swiper .swiper-slide .card-list-card {
    gap: 16px;
  }
  .card-list-common .card-list-swiper .swiper-slide .card-list-thumb {
    width: 100%;
    border-radius: 12px;
  }
  .card-list-common .card-list-swiper .swiper-slide .card-list-thumb img {
    display: block;
    width: 100%;
    height: auto;
  }
  .card-list-common .card-list-swiper .swiper-slide .card-list-tags .tag {
    height: auto;
    padding: 4px 8px;
    border-radius: 4px;
  }
  .card-list-common .card-list-swiper .swiper-slide .card-list-tags {
    gap: 6px;
  }
}

/* --- PC: スライド幅（layout別） --- */
@media (min-width: 768px) {
  .card-list-common .card-list-swiper .swiper-slide { width: 450px; }
  .card-list-common .card-list-swiper .swiper-slide.layout-0 { width: 450px; }
  .card-list-common .card-list-swiper .swiper-slide.layout-1 { width: 360px; }
  .card-list-common .card-list-swiper .swiper-slide.layout-2 { width: 360px; }
  .card-list-common .card-list-swiper .swiper-slide .card-list-card {
    gap: 24px;
  }
}

/* --- カードタイトル --- */
.card-list-common .card-list-swiper .swiper-slide .card-list-title {
  color: var(--pcol-card-list-title-color, var(--pcol-base-color-2, #326ff9));
  margin-top: 8px;
}

/* --- card-list-body: flex レイアウト + 個別余白 --- */
.card-list-common .card-list-swiper .swiper-slide .card-list-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
}
.card-list-common .card-list-swiper .swiper-slide .card-list-body > * {
  margin-top: 0;
}
.card-list-common .card-list-swiper .swiper-slide .card-list-subtitle {
  margin-top: 4px;
  color: var(--pcol-card-list-subtitle-color, inherit);
}
.card-list-common .card-list-swiper .swiper-slide .card-list-tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card-list-common .card-list-swiper .swiper-slide .card-list-tags .tag {
  color: var(--pcol-card-list-tag-text, var(--pcol-base-black, var(--col-black)));
  background: var(--pcol-card-list-tag-bg, var(--pcol-base-white, var(--col-white)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 4px 8px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
}
.card-list-common .card-list-swiper .swiper-slide .card-list-desc {
  margin-top: 16px;
  color: var(--pcol-card-list-desc-color, inherit);
}
.card-list-common .card-list-swiper .swiper-slide .card-list-more {
  margin-top: 16px;
}
.card-list-common .card-list-swiper .swiper-slide .card-list-more .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--pcol-card-list-btn-bg, var(--pcol-base-color-2, #326ff9));
  color: var(--pcol-card-list-btn-text, #fff);
  border-radius: 8px;
  padding: 10px 16px;
}
.card-list-common .card-list-swiper .swiper-slide .card-list-more .btn-more:hover {
  filter: brightness(0.95);
}

/* --- ページネーション --- */
.card-list-common .card-list-swiper .swiper-pagination {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  line-height: 0;
  font-size: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .card-list-common .card-list-swiper .swiper-pagination {
    position: relative;
    margin-top: 80px;
    padding: 0 40px;
  }
}
@media (max-width: 767px) {
  .card-list-common .card-list-swiper .swiper-pagination {
    position: relative;
    margin-top: 48px;
  }
}
.card-list-common .card-list-swiper .swiper-pagination-bullet {
  flex: 1;
  height: 2px;
  width: auto;
  margin: 0 !important;
  border-radius: 0;
  background: var(--pcol-card-list-pagination-bar, rgba(0,0,0,0.15));
  opacity: 1;
  transition: background 0.3s;
}
.card-list-common .card-list-swiper .swiper-pagination-bullet-active {
  background: var(--pcol-card-list-pagination-active, var(--pcol-base-color-2, #326ff9));
}
.card-list-common .card-list-swiper .swiper-button-prev,
.card-list-common .card-list-swiper .swiper-button-next {
  height: 100%;
  width: 40px;
  top: 0;
  opacity: 0;
}
.card-list-common .card-list-swiper .swiper-button-prev::after,
.card-list-common .card-list-swiper .swiper-button-next::after {
  display: none;
}
.card-list-common .card-list-swiper .swiper-button-prev { left: 0; }
.card-list-common .card-list-swiper .swiper-button-next { right: 0; }

/* --- 注釈エリア --- */
.card-list-common .notice-area {
  margin-top: 48px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .card-list-common .notice-area {
    margin-top: 80px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
.card-list-common .notice {
  color: var(--pcol-card-list-notice-color, inherit);
}
.card-list-common .notice::before {
  content: "※ ";
}

/* =============================================
   CMS Sections (MicroCMS: news / articles)
   ============================================= */

/* --- CMS共通: セクションタイトル（他セクションと統一） --- */
#news .outer {
  background: var(--pcol-news-bg-color-1, var(--col-white));
}
#articles .outer {
  background: var(--pcol-articles-bg-color-1, var(--col-white));
}
#news h2,
#articles h2 {
  text-align: center;
  font-size: var(--service-h2-sp-fs);
  font-weight: var(--service-h2-sp-fw);
  line-height: var(--service-h2-sp-lh);
  letter-spacing: var(--service-h2-sp-ls);
}
@media (min-width: 768px) {
  #news h2,
  #articles h2 {
    font-size: var(--service-h2-pc-fs, var(--service-h2-sp-fs));
    font-weight: var(--service-h2-pc-fw, var(--service-h2-sp-fw));
    line-height: var(--service-h2-pc-lh, var(--service-h2-sp-lh));
    letter-spacing: var(--service-h2-pc-ls, var(--service-h2-sp-ls));
  }
}
#news h2 .subtitle,
#articles h2 .subtitle {
  display: block;
  font-family: var(--base-en-fontfamily, var(--font-jost));
  font-size: var(--service-h2-sub-sp-fs);
  font-weight: var(--service-h2-sub-sp-fw);
  line-height: var(--service-h2-sub-sp-lh);
  letter-spacing: var(--service-h2-sub-sp-ls);
  padding-bottom: 0;
}
@media (min-width: 768px) {
  #news h2 .subtitle,
  #articles h2 .subtitle {
    font-size: var(--service-h2-sub-pc-fs, var(--service-h2-sub-sp-fs));
    font-weight: var(--service-h2-sub-pc-fw, var(--service-h2-sub-sp-fw));
    line-height: var(--service-h2-sub-pc-lh, var(--service-h2-sub-sp-lh));
    letter-spacing: var(--service-h2-sub-pc-ls, var(--service-h2-sub-sp-ls));
  }
}
#news .intro,
#articles .intro {
  text-align: center;
  font-size: var(--service-section-lead-sp-fs);
  font-weight: var(--service-section-lead-sp-fw);
  line-height: var(--service-section-lead-sp-lh);
  letter-spacing: var(--service-section-lead-sp-ls);
  margin-bottom: 2em;
}
@media (min-width: 768px) {
  #news .intro,
  #articles .intro {
    font-size: var(--service-section-lead-pc-fs, var(--service-section-lead-sp-fs));
    font-weight: var(--service-section-lead-pc-fw, var(--service-section-lead-sp-fw));
    line-height: var(--service-section-lead-pc-lh, var(--service-section-lead-sp-lh));
    letter-spacing: var(--service-section-lead-pc-ls, var(--service-section-lead-sp-ls));
  }
}
/* CMS: セクションタイトル色 */
#news h2 {
  color: var(--pcol-news-section-title-color, inherit);
}
#news h2 .subtitle {
  color: var(--pcol-news-section-title-en-color, var(--pcol-base-color-2, #0c396c));
}
#news .intro {
  color: var(--pcol-news-section-lead-color, inherit);
}
#articles h2 {
  color: var(--pcol-articles-section-title-color, inherit);
}
#articles h2 .subtitle {
  color: var(--pcol-articles-section-title-en-color, var(--pcol-base-color-2, #0c396c));
}
#articles .intro {
  color: var(--pcol-articles-section-lead-color, inherit);
}

.cms-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--col-border, #e0e0e0);
}
.cms-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
  padding: 1em 0;
  border-bottom: 1px solid var(--col-border, #e0e0e0);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.cms-list-item:hover {
  background: var(--col-bg-hover, rgba(0,0,0,0.02));
}
.cms-list-date {
  font-size: 0.85em;
  color: var(--pcol-news-date-color, var(--pcol-articles-date-color, var(--font-color-sub, #888)));
  white-space: nowrap;
}
.cms-list-category {
  display: inline-block;
  font-size: 0.75em;
  padding: 0.15em 0.6em;
  border-radius: var(--base-radius-m, 4px);
  background: var(--pcol-news-category-bg-color, var(--pcol-articles-category-bg-color, var(--basecol-theme-color, #333)));
  color: var(--pcol-news-category-text-color, var(--pcol-articles-category-text-color, #fff));
  white-space: nowrap;
}
.cms-list-title {
  flex: 1;
  font-size: 0.95em;
  color: var(--pcol-news-title-color, var(--pcol-articles-title-color, inherit));
}
.cms-more {
  text-align: center;
  margin-top: 2em;
}

@media (max-width: 767px) {
  .cms-list-item {
    padding: 0.8em 0;
  }
  .cms-list-title {
    flex-basis: 100%;
  }
}

/* --- トップページ: 記事カードリスト --- */
.cms-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5em;
}
.cms-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--base-radius-m, 8px);
  overflow: hidden;
  background: var(--col-white, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cms-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.cms-card-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: 0;
}
.cms-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cms-card-body {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.cms-card-date {
  font-size: 0.8em;
  color: var(--font-color-sub, #888);
}
.cms-card-category {
  display: inline-block;
  font-size: 0.7em;
  padding: 0.1em 0.5em;
  border-radius: var(--base-radius-m, 4px);
  background: var(--pcol-articles-category-bg-color, var(--basecol-theme-color, #333));
  color: var(--pcol-articles-category-text-color, #fff);
  align-self: flex-start;
}
.cms-card-title {
  font-size: 1em;
  font-weight: var(--bold, 700);
  line-height: 1.4;
  margin: 0;
}
.cms-card-excerpt {
  font-size: 0.85em;
  color: var(--font-color-sub, #666);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .cms-card-list {
    grid-template-columns: 1fr;
  }
}

/* --- 一覧ページ（フル） --- */
.cms-list-full {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--col-border, #e0e0e0);
}
.cms-list-full-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
  padding: 1.2em 0;
  border-bottom: 1px solid var(--col-border, #e0e0e0);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.cms-list-full-item:hover {
  background: var(--col-bg-hover, rgba(0,0,0,0.02));
}

.cms-card-list-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5em;
}

@media (max-width: 767px) {
  .cms-card-list-full {
    grid-template-columns: 1fr;
  }
}

/* --- 詳細ページ --- */
.cms-detail {
  max-width: 800px;
  margin: 0 auto;
}
.cms-detail-header {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}
.cms-detail-date {
  font-size: 0.9em;
  color: var(--font-color-sub, #888);
}
.cms-detail-category {
  display: inline-block;
  font-size: 0.75em;
  padding: 0.15em 0.6em;
  border-radius: var(--base-radius-m, 4px);
  background: var(--basecol-theme-color, #333);
  color: #fff;
}
.cms-detail-title {
  font-size: 1.5em;
  font-weight: var(--bold, 700);
  line-height: 1.4;
  margin: 0 0 1.5em;
}
.cms-detail-thumb {
  margin: 0 0 2em;
  border-radius: var(--base-radius-m, 8px);
  overflow: hidden;
}
.cms-detail-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.cms-detail-back {
  margin-top: 3em;
  text-align: center;
}
.cms-detail-author {
  font-size: 0.85em;
  color: var(--font-color-sub, #888);
}
.cms-detail-back a {
  color: var(--font-color-link, var(--basecol-theme-color, #333));
}

/* MicroCMS リッチエディタ出力のスタイルリセット */
.cms-richtext {
  line-height: 1.8;
}
.cms-richtext h1,
.cms-richtext h2,
.cms-richtext h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-weight: var(--bold, 700);
}
.cms-richtext h2 {
  font-size: 1.3em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--col-border, #e0e0e0);
}
.cms-richtext h3 {
  font-size: 1.1em;
}
.cms-richtext p {
  margin: 1em 0;
}
.cms-richtext img {
  max-width: 100%;
  height: auto;
  border-radius: var(--base-radius-m, 8px);
}
.cms-richtext ul,
.cms-richtext ol {
  padding-left: 1.5em;
  margin: 1em 0;
}
.cms-richtext blockquote {
  border-left: 4px solid var(--col-border, #e0e0e0);
  margin: 1em 0;
  padding: 0.5em 1em;
  color: var(--font-color-sub, #666);
}
.cms-richtext pre {
  background: var(--col-bg-code, #f5f5f5);
  padding: 1em;
  border-radius: var(--base-radius-m, 8px);
  overflow-x: auto;
}
.cms-richtext table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.cms-richtext th,
.cms-richtext td {
  border: 1px solid var(--col-border, #e0e0e0);
  padding: 0.5em 0.8em;
  text-align: left;
}
.cms-richtext th {
  background: var(--col-bg-th, #f5f5f5);
  font-weight: var(--bold, 700);
}

.cms-empty {
  text-align: center;
  color: var(--font-color-sub, #888);
  padding: 2em 0;
}

/* CMS page wrapper */
.cms-page .subpage-body .inner {
  max-width: 960px;
  margin: 0 auto;
}

/* works-variants */
/* works */
#works {
  --pcol-works-base-bg-color: #f2f5f8;
  --pcol-works-base-tag-bg: #FFFFFF;
  --pcol-works-base-tag-text: #67727e;
  --pcol-works-base-title-color: #243242;
  --pcol-works-base-subtitle-color: #67727e;
  --pcol-works-base-desc-color: #243242;
  --pcol-works-base-btn-bg: #004EA2;
  --pcol-works-base-btn-text: #FFFFFF;
  --pcol-works-base-section-title-color: #243242;
  --pcol-works-base-section-title-en-color: #004EA2;
  --pcol-works-base-section-lead-color: #243242;
  --pcol-works-base-notice-color: #67727e;
  --pcol-works-base-pagination-bar: #C0C0C0;
  --pcol-works-base-pagination-active: #004EA2;
}

#works.reverse {
  --pcol-works-acc-bg-color: linear-gradient(111deg, #1731C6, #69E9F1);
  --pcol-works-acc-tag-bg: #FFFFFF;
  --pcol-works-acc-tag-text: #004EA2;
  --pcol-works-acc-title-color: #FFFFFF;
  --pcol-works-acc-subtitle-color: #FFFFFF;
  --pcol-works-acc-desc-color: #FFFFFF;
  --pcol-works-acc-btn-bg: #FFFFFF;
  --pcol-works-acc-btn-text: #004EA2;
  --pcol-works-acc-section-title-color: #FFFFFF;
  --pcol-works-acc-section-title-en-color: #FFFFFF;
  --pcol-works-acc-section-lead-color: #FFFFFF;
  --pcol-works-acc-notice-color: #FFFFFF;
  --pcol-works-acc-pagination-bar: rgba(255,255,255,0.3);
  --pcol-works-acc-pagination-active: #FFFFFF;
}

/* card-list-variants */
/* card_list1 */
#card_list1 {
  --pcol-card-list-bg-color: #f2f5f8;
  --pcol-card-list-tag-bg: #FFFFFF;
  --pcol-card-list-tag-text: #67727e;
  --pcol-card-list-title-color: #243242;
  --pcol-card-list-subtitle-color: #67727e;
  --pcol-card-list-desc-color: #243242;
  --pcol-card-list-btn-bg: #004EA2;
  --pcol-card-list-btn-text: #FFFFFF;
  --pcol-card-list-section-title-color: #243242;
  --pcol-card-list-section-title-en-color: #004EA2;
  --pcol-card-list-section-lead-color: #243242;
  --pcol-card-list-notice-color: #67727e;
  --pcol-card-list-pagination-bar: #FFFFFF;
  --pcol-card-list-pagination-active: #004EA2;
}

/* swiper */
/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}