/*
Theme Name: Nsync Theme (Block Edition)
Author: Nayutanet
Description: 固定ページ+ブロックエディタ方式で再構築したNsyncサイト用テーマ。各セクションは独自ブロックとして編集画面から直接編集できます。
Version: 1.13.8
*/

html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
}

.page-content {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* header */
.header {
    transition: all .3s ease;
}
.header.scrolled {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
}
.head-logo img {
    transition: all .3s ease;
}
.header.scrolled .head-logo img {
    transform: scale(0.92);
}
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg,#0ea5e9,#38bdf8);
    z-index: 9999;
}

/* nsync custom blocks: minimal layout helpers (Tailwind utility classes handle most styling) */
.nsync-icon-card-grid {
    display: grid;
    gap: 2rem;
}
.nsync-icon-card-grid[data-columns="2"] { grid-template-columns: repeat(1, minmax(0,1fr)); }
.nsync-icon-card-grid[data-columns="3"] { grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 768px) {
    .nsync-icon-card-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .nsync-icon-card-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.nsync-pricing-cards-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 1024px) {
    .nsync-pricing-cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* block editor admin: simple visual separation for InnerBlocks children when editing */
.nsync-editor-card {
    border: 1px dashed #94a3b8;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* カスタムロゴのサイズ制御
   ヘッダー内ではh-20(80px)に合わせて高さを制限、幅は自動でアスペクト比を維持 */
.head-logo .custom-logo-link,
.head-logo a {
    display: flex;
    align-items: center;
}
.head-logo .custom-logo {
    height: 48px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* フッターのロゴも同様に制御 */
footer .custom-logo {
    height: 56px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

/* ロゴサイズ制御(v1.3: head-logoをdiv化したことに合わせてセレクタを修正)
   the_custom_logo()が出力する.custom-logo-link > .custom-logo を直接指定 */
.head-logo .custom-logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
}
.head-logo .custom-logo-link img.custom-logo {
    height: 48px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain;
    display: block;
}

/* ================================================
   以下: 旧テーマより移植したスタイル
================================================ */

/* 元のHTMLの<style>タグ内にあったCSSをここに記述します */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
/* 	font-family: "Zen Maru Gothic", sans-serif; */
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.page-content {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.nav-link.active {
    color: #0ea5e9; /* sky-500 */
    font-weight: 700;
}
.nav-link.bg-sky-500.active {
    color: white;
}
.testimonial-slider .swiper-button-next,
.testimonial-slider .swiper-button-prev {
    color: #0ea5e9; /* sky-500 */
    top: 45%;
}
.testimonial-slider .swiper-pagination-bullet-active {
    background-color: #0ea5e9; /* sky-500 */
}
.security-nav a.active {
    color: #0ea5e9;
    font-weight: 700;
}
.prose {
     color: #334155; /* slate-700 */
}
.prose h2 {
    color: #1e293b; /* slate-800 */
    border-bottom: 2px solid #f1f5f9; /* slate-100 */
    padding-bottom: 0.5rem;
}
.prose h3 {
    color: #1e293b; /* slate-800 */
}
.prose a {
    color: #0ea5e9; /* sky-500 */
}
.prose ul > li::before {
    background-color: #38bdf8; /* sky-400 */
}

/* Contact Form 7のテキストエリアのスタイル調整 */
.wpcf7-form textarea {
    border: 1px solid #cbd5e1; /* slate-300の色 */
}

/* === Contact Form 7 送信ボタン スタイル決定版 === */

/* ボタンの基本スタイル（有効時） */
.wpcf7-form .wpcf7-submit {
    width: 100%;
    background-color: #0ea5e9; /* sky-500: 青色 */
    color: white;
    font-weight: bold;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* マウスを乗せた時のスタイル */
.wpcf7-form .wpcf7-submit:hover {
    background-color: #0284c7; /* sky-600: 少し濃い青 */
}

/* 無効な時のスタイル（最重要） */
.wpcf7-form .wpcf7-submit:disabled {
    background-color: #94a3b8 !important; /* slate-400: グレーを強制適用 */
    color: #e2e8f0 !important; /* slate-200: 文字を薄く */
    cursor: not-allowed !important;
}

/* .profile-image {
    width: 150px; /* 横幅を150pxに指定 */
    height: 150px; /* 高さを150pxに指定 */
    object-fit: cover; /* 画像が歪まないように、はみ出た部分をトリミング */
} */

/* テキスト入力欄 (input) と選択メニュー (select) のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select {
    width: 100%;
    border: 1px solid #cbd5e1; /* slate-300 (textareaと統一) */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.5rem 0.75rem; /* p-2相当 */
    background-color: #fff;
    color: #334155; /* text-slate-700 */
}

/* selectメニューの矢印をデフォルトに戻す（ブラウザ標準） */
.wpcf7-form select {
    appearance: menulist;
}

/* フォームのラベル（項目名）のスタイル */
.wpcf7-form label {
    font-weight: 700; /* font-bold */
    color: #334155; /* text-slate-700 */
}



/* === トップページの埋め込み動画スタイル === */
.front-page .aspect-video iframe {
    border-radius: 0.75rem; /* 元のデザインのrounded-xl（角丸） */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* 元のデザインのshadow-lg（影） */
}

/* === サイドバーウィジェットのスタイル調整 === */

/* カテゴリ一覧とアーカイブ一覧のリスト全体 */
.widget_categories ul,
.widget_archive ul {
    list-style: none; /* 先頭の点を削除 */
    padding: 0;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 と同じ効果 */
}

/* 各リスト項目 */
.widget_categories li,
.widget_archive li {
    font-size: 0.875rem; /* text-sm と同じ効果 */
}

/* リンクの文字色 */
.widget_categories li a,
.widget_archive li a {
    color: #475569; /* text-slate-600 */
    transition: color 0.2s;
}

/* リンクにマウスを乗せた時の色 */
.widget_categories li a:hover,
.widget_archive li a:hover {
    color: #0ea5e9; /* text-sky-500 */
}

/* === Features Slider (Center Emphasis) Styles === */
.features-slider {
/*     padding-left: 1rem;
    padding-right: 1rem; */
	overflow: hidden;
}
.features-slider .swiper-slide {
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: scale(1); /* この値を小さくします (例: 0.85 → 0.8) */
    opacity: 0.6;          /* 必要であれば透明度もさらに下げます */
    height: auto;
	overflow: hidden;
}
.features-slider .swiper-slide-active {
    transform: scale(1.2); /* この値を大きくします (例: 1 → 1.1 や 1.15) */
    opacity: 1;
}
.features-slider .swiper-slide > div {
    height: 100%;
}
.features-swiper-pagination .swiper-pagination-bullet {
    background-color: #cbd5e1;
    opacity: 1;
    transition: background-color 0.3s ease;
}
.features-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #0ea5e9;
}

/* === 料金ページ (カード + 表) スタイル === */

/* --- テーブルラッパー --- */
.pricing-table-sticky-wrapper {
    overflow-x: auto;
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    background-color: #fff;
    /* max-height と overflow-y は削除 */
    /* padding-top と margin-top は削除 (JSで制御) */
}

.pricing-table-sticky {
    width: 100%;
    min-width: 768px;
    font-size: 0.875rem; /* text-sm */
    color: #334155; /* slate-700 */
    border-collapse: separate;
    border-spacing: 0;
}

/* --- テーブルヘッダー (thead) --- */
.pricing-table-sticky thead.sticky-table-header th {
    /* position: sticky は削除 (JSで制御) */
    /* top は削除 (JSで制御) */
    background-color: #f1f5f9; /* bg-slate-100 */
    /* z-index は削除 (JSで制御) */
    padding: 1rem 1.5rem; /* py-4 px-6 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #334155; /* text-slate-700 */
    border-bottom: 2px solid #e2e8f0; /* slate-200 */
    white-space: nowrap;
    text-align: center;
}
/* ヘッダー左上 */
.pricing-table-sticky thead th.feature-header {
    /* left は削除 */
    /* z-index は削除 */
    background-color: #fff; /* 左列背景 */
}
/* スタンダードプランヘッダー */
.pricing-table-sticky thead th.standard-plan {
    background-color: #f0f9ff; /* bg-sky-50 */
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* --- テーブルボディ (tbody) --- */
/* (tbodyのCSSは変更なし) */
/* ... */

/* === JS Sticky Header Styles === */
.sticky-table-header.is-sticky {
    position: fixed;
    /* top, left, width は JS で設定 */
    z-index: 40; /* サイトヘッダー(50)より下 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border-collapse: collapse; /* 固定表示時にボーダーを正しく表示 */
}
/* スティッキーヘッダー表示時にラッパーに高さを追加 */
.pricing-table-sticky-wrapper.has-sticky-header {
    padding-top: 60px; /* theadの高さに合わせてJSで動的に調整 */
}
/* 固定時のセルスタイル調整 */
.sticky-table-header.is-sticky th {
    border-bottom: 1px solid #e2e8f0;
}
.sticky-table-header.is-sticky th.standard-plan {
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* 注釈 */
.pricing-notes { margin-top: 2rem; font-size: 0.75rem; color: #64748b; line-height: 1.6; }
.pricing-notes p { margin-bottom: 0.5rem; }


/*イメージセンター*/
.image-center{
	margin:0 auto !important;
}


/* ===================================
   ニュース一覧 ページネーション
=================================== */

/* ページ送り全体 */
.news-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 4rem auto 0;
}

/* ボタンが存在しない側を非表示にしてレイアウト維持 */
.news-pagination > div:empty {
    visibility: hidden;
}

/* ボタン */
.news-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    background-color: #0ea5e9;
    color: #ffffff !important;

    border-radius: 9999px;

    font-weight: 700;
    text-decoration: none;

    transition: background-color 0.2s ease;
}

/* ホバー */
.news-pagination a:hover {
    background-color: #0284c7;
}

/* スマホ対応 */
@media (max-width: 640px) {
    .news-pagination {
        flex-direction: column;
        gap: 1rem;
    }

    .news-pagination a {
        width: 100%;
        justify-content: center;
    }
}
/* ================================
   Scroll Animation Base
================================ */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    will-change: transform, opacity;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* 遅延 */
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }

/* カード浮き */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* ================================
   Swiper 強化（Features Slider）
================================ */
.features-slider {
    overflow: hidden;
}

.features-slider .swiper-slide {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(0.85);
    opacity: 0.5;
}

.features-slider .swiper-slide-active {
    transform: scale(1.15);
    opacity: 1;
    z-index: 2;
}

.features-slider .swiper-slide-prev,
.features-slider .swiper-slide-next {
    transform: scale(0.95);
    opacity: 0.7;
}

/* pagination */
.features-swiper-pagination .swiper-pagination-bullet {
    background-color: #cbd5e1;
    opacity: 1;
}

.features-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #0ea5e9;
}

/* ================================
   Hero Animation
================================ */
.hero-animate {
    opacity: 0;
    transform: translateY(20px);
    animation: heroIn 1s ease forwards;
}

@keyframes heroIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   Reduce motion対応（良いサイト感）
================================ */
@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .features-slider .swiper-slide,
    .hero-animate {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
/* ================================================
   フッターナビ (wp_nav_menu出力のul>liを装飾)
================================================ */
.footer-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-nav-list li a {
    font-size: 0.875rem;
    color: #475569;
    transition: color 0.2s;
}
.footer-nav-list li a:hover {
    color: #0ea5e9;
}

/* ヘッダーナビのwp_nav_menu出力: li等を非表示にしてウォーカーの出力だけ使う */
.hidden.md\:flex.items-center.space-x-6 > li,
nav.hidden.md\:flex > li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}

/* ================================================
   グラデーション・見出し・ラインの定義
   ブロックエディタの「追加CSSクラス」欄に入力して使用
================================================ */

/* --- 大見出し: グラデーションテキスト ---
   使い方: 見出しブロックの「追加CSSクラス」に nsync-h2 を入力 */
.nsync-h2 {
    background: linear-gradient(to right, #0ea5e9, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 1.875rem;
    font-weight: 700;
    display: inline-block; /* background-clipにはinline-blockが必要 */
}
@media (min-width: 768px) {
    .nsync-h2 { font-size: 2.25rem; }
}

/* --- 小見出しラベル(eyebrow): 水色背景バッジ ---
   使い方: 段落ブロックの「追加CSSクラス」に nsync-label を入力 */
.nsync-label {
    display: inline-block;
    background-color: rgba(14, 165, 233, 0.1); /* sky-500/10 */
    color: #0ea5e9;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* --- セクション区切りライン: グラデーション ---
   使い方: 区切りブロックの「追加CSSクラス」に nsync-divider を入力 */
.nsync-divider {
    height: 2px;
    border: none;
    background: linear-gradient(to right, #0ea5e9, #22d3ee);
    margin: 0 auto;
    border-radius: 9999px;
}
.nsync-divider-short {
    height: 3px;
    width: 3rem;
    border: none;
    background: linear-gradient(to right, #0ea5e9, #22d3ee);
    margin: 0.5rem 0;
    border-radius: 9999px;
}
/* 中央寄せにしたい場合 */
.nsync-divider-short.is-center {
    margin-left: auto;
    margin-right: auto;
}

/* --- セクション背景: 上部がsky-50のグラデーション ---
   使い方: グループブロックの「追加CSSクラス」に nsync-section-sky を入力 */
.nsync-section-sky {
    background: linear-gradient(to bottom, #f0f9ff, #ffffff);
    position: relative;
}

/* --- セクション背景: 濃色(slate-900)グラデーション ---
   使い方: グループブロックの「追加CSSクラス」に nsync-section-dark を入力 */
.nsync-section-dark {
    background-color: #0f172a;
    background-image:
        linear-gradient(to right, rgba(128,128,128,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128,128,128,0.04) 1px, transparent 1px);
    background-size: 14px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* 濃色背景の光彩エフェクト */
.nsync-section-dark::before {
    content: '';
    position: absolute;
    left: 25%;
    top: 50%;
    width: 450px;
    height: 450px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(14,165,233,0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* --- ボーダー左ライン: 引用・強調テキスト用 ---
   使い方: 段落ブロックの「追加CSSクラス」に nsync-border-left を入力 */
.nsync-border-left {
    border-left: 2px solid #0ea5e9;
    padding-left: 0.75rem;
    font-weight: 800;
    color: #1e293b;
}

/* --- カードホバー(nsync-h2との組み合わせ用) ---
   使い方: グループブロックに nsync-card を入力 */
.nsync-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nsync-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* ================================================
   見出し・フッター グラデーション定義 (v1.8)
   旧テーマで未定義だったfeature-h3/h4等を実装
================================================ */

/* --- h1: ページ・ヒーロータイトル用グラデーション
   濃色背景(slate-900)での使用を想定。白→sky-200の軽やかなグラデーション。
   使い方: .nsync-h1 クラスを追加CSSクラスに入力、
   またはヒーローブロック内のh1タグに自動適用 */
.nsync-h1,
.nsync-section-dark h1 {
    background: linear-gradient(135deg, #ffffff 0%, #bae6fd 60%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* --- h2: セクション見出しグラデーション(確定: sky-500→cyan-400)
   使い方: .nsync-h2 クラスを追加CSSクラスに入力 */
.nsync-h2,
.feature-h2 {
    background: linear-gradient(to right, #0ea5e9, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
}

/* --- feature-h3: 特徴・CTAの大見出し
   黒字・大きめ・太字。グラデーションなし、重厚感を優先。
   旧テーマのfront-page.phpで <h3 class="feature-h3"> として使用 */
.feature-h3 {
    color: #0f172a; /* slate-950: ほぼ黒 */
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

/* --- feature-h4: 特徴の番号ラベル(例:「01 コンテンツ一元管理」)
   ネイビー・やや大きめ・太字。sky-950でブランドカラーの深い版。
   旧テーマのfront-page.phpで <h4 class="feature-h4"> として使用 */
.feature-h4 {
    color: #082f49; /* sky-950: 深いネイビー */
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    background: linear-gradient(to right, #0369a1, #0e7490); /* sky-700→cyan-700 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* --- footer-catch: フッターロゴ下のキャッチコピー
   「カオスな管理、もう止めよう！」
   slate→skyのグラデーション。落ち着いた力強さを表現。 */
.footer-catch {
    background: linear-gradient(to right, #334155, #0369a1); /* slate-700→sky-700 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 1rem;
}

/* --- footer_line01: コピーライト行の上のボーダーラインをグラデーションに
   borderはgradientに直接対応していないためbackground-imageで実現 */
.footer_line01 {
    position: relative;
}
.footer_line01::before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, #0ea5e9, #22d3ee, transparent);
    position: absolute;
    top: 0;
    left: 0;
}

/* --- 汎用グラデーションライン(v1.7からの改善版) */
.nsync-divider {
    height: 1px;
    border: none;
    background: linear-gradient(to right, transparent, #0ea5e9, #22d3ee, transparent);
    margin: 0;
    width: 100%;
}
.nsync-divider-short {
    height: 3px;
    width: 3rem;
    border: none;
    background: linear-gradient(to right, #0ea5e9, #22d3ee);
    margin: 0.5rem 0;
    border-radius: 9999px;
}
.nsync-divider-short.is-center {
    margin-left: auto;
    margin-right: auto;
}

/* ================================================
   WordPress ブロックエディタ出力への自動適用 (v1.9)
   .page-content 内の h2/h3/h4 に自動でスタイルを適用
   （ブロックエディタは class="wp-block-heading" を出力するため）
================================================ */

/* --- .page-content 内の h2 → sky-500→cyan-400 グラデーション */
.page-content h2,
.page-content h2.wp-block-heading {
    background: linear-gradient(to right, #0ea5e9, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: block;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* --- post-card タイトル: .page-content h2 のグラデーションをリセット */
.page-content .post-card-title {
    background: none;
    -webkit-text-fill-color: #0f172a;   /* slate-900: unsetは親のtransparentを継承するためNG */
    background-clip: unset;
    color: #0f172a;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.page-content .post-card-title a {
    -webkit-text-fill-color: #0f172a;
    color: #0f172a;
}
.page-content .post-card-title a:hover {
    -webkit-text-fill-color: #0ea5e9;   /* sky-500 */
    color: #0ea5e9;
}

/* --- .page-content 内の h3 → slate-950（ほぼ黒）大きめ太字 */
.page-content h3,
.page-content h3.wp-block-heading {
    color: #0f172a;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    /* グラデーションのリセット（h2からの継承防止） */
    background: none;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
}

/* --- .page-content 内の h4 → sky-950（ネイビー）やや大きめ */
.page-content h4,
.page-content h4.wp-block-heading {
    color: #082f49;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
    /* グラデーションのリセット */
    background: none;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
}

/* --- .page-content 内の h1（ページタイトル用）
   明色(白)背景用: sky-500→cyan-400 で濃く出す。
   濃色背景の場合は .nsync-h1 または .nsync-section-dark h1 を明示指定すること。 */
.page-content h1,
.page-content h1.wp-block-heading {
    background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
}

/* --- .page-content 内の .nsync-section-dark h1 は白グラデーションを優先 */
.page-content .nsync-section-dark h1 {
    background: linear-gradient(135deg, #ffffff 0%, #bae6fd 60%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* --- .nsync-h2 / .feature-h2 との統合（ utility class 指定の場合も同じスタイル） */
.nsync-h2,
.feature-h2 {
    background: linear-gradient(to right, #0ea5e9, #22d3ee) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
}

/* =========================================================
   CTAセクション (nsync/cta-section ブロック / footer CTA)
   参照実装: nsync.jp
   ========================================================= */

/* --- 背景: 薄いシアン→薄い青紫の斜めグラデーション (97deg) */
.nsync-cta-section {
    background: linear-gradient(97deg, rgba(114, 225, 233, 0.15) 0%, rgba(156, 168, 230, 0.25) 100%);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
    .nsync-cta-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* --- ベネフィットリスト: 2列2行 チェックマーク付きグリッド */
.cta-benefit-check ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
}
.cta-benefit-check li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    color: rgb(100, 116, 139); /* slate-500 */
    font-weight: 400;
    line-height: 1.5;
}
.cta-benefit-check li::before {
    content: "✓";
    color: rgb(14, 165, 233); /* sky-500 */
    font-size: 15px;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    line-height: 1.5;
}

/* モバイル: 1列表示に */
@media (max-width: 640px) {
    .cta-benefit-check ul {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   v1.12.0 追加: feature-carousel / step-flow 用スタイル
   ========================================================= */

/* --- feature-carousel: Swiperのナビ・ページネーション調整 */
.nsync-feature-carousel {
    padding-bottom: 3rem; /* pagination が下に来るためのスペース */
}
/* すべてのスライド・カードの縦を揃える */
.nsync-feature-carousel .swiper-wrapper {
    align-items: stretch;
}
.nsync-feature-carousel .swiper-slide {
    height: auto; /* stretch to align-items */
    display: flex;
}
.nsync-feature-carousel .swiper-slide > div {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.nsync-feature-carousel .swiper-pagination {
    bottom: 0;
}
/* ページネーションを横長の四角に */
.nsync-feature-carousel .swiper-pagination-bullet {
    width: 24px;
    height: 6px;
    border-radius: 2px;
    background: #cbd5e1; /* slate-300 */
    opacity: 1;
    transition: background 0.2s ease;
}
.nsync-feature-carousel .swiper-pagination-bullet-active {
    background: #0ea5e9; /* sky-500 */
    width: 32px;
}
.nsync-feature-carousel .swiper-button-prev,
.nsync-feature-carousel .swiper-button-next {
    color: #0ea5e9;
    background: rgba(255, 255, 255, 0.9);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.nsync-feature-carousel .swiper-button-prev::after,
.nsync-feature-carousel .swiper-button-next::after {
    font-size: 18px;
    font-weight: 700;
}
@media (max-width: 640px) {
    .nsync-feature-carousel .swiper-button-prev,
    .nsync-feature-carousel .swiper-button-next {
        display: none; /* モバイルではスワイプで操作 */
    }
}

/* --- step-flow: 円形見出し + 横のつなぎ線 */
.nsync-step-flow-circle {
    width: 128px;   /* 8rem */
    height: 128px;
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}
/* 円内 h3 のグローバルスタイル(.page-content h3)を上書き */
.page-content .nsync-step-flow-circle h3,
.nsync-step-flow-circle h3 {
    font-size: 0.85rem;
    line-height: 1.35;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    background-clip: initial;
    text-align: center;
}
.nsync-step-flow-circle-title {
    color: #0f172a;
    line-height: 1.35;
}
/* 描画されている <br> がなくても Adaptive に短くする */
.nsync-step-flow-item p {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
/* PC時のつなぎ線を円の中心にオーバーレイ */
@media (min-width: 1024px) {
    .nsync-step-flow-line {
        top: 64px; /* 円の縦中央 (128/2) */
        left: 12.5%;
        right: 12.5%;
    }
}
/* タブレット時: 上下2行のとき線は非表示 */
@media (min-width: 640px) and (max-width: 1023px) {
    .nsync-step-flow-line { display: none; }
}

/* =========================================================
   v1.13.3: 全体背景を薄い放射グラデーションに
   ========================================================= */
body {
    background: radial-gradient(circle, rgba(235, 247, 255, 1) 0%, rgba(247, 252, 250, 1) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* --- feature-section eyebrow (01 コンテンツ一元管理 など) の文字サイズUP */
.nsync-feature-eyebrow {
    color: #0284c7; /* sky-600 */
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    display: block;
}
@media (min-width: 768px) {
    .nsync-feature-eyebrow {
        font-size: 1.125rem;
    }
}

/* =========================================================
   v1.13.4: WordPress core embed のレスポンシブ対応を強制
   ========================================================= */
/* wp-embed の 16:9 レスポンシブ表示を確保 (WPコアCSSが効いていない場合の保険) */
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    height: 0;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =========================================================
   v1.13.5: フルワイド対応
   page.phpから固定containerを撤去したので、
   ・セクション系ブロック (section, .nsync-*-section) → 全幅
   ・テキスト系ブロック (paragraph, heading, list など) → 中央寄せ+幅制限
   ========================================================= */
.page-content {
    width: 100%;
}

/* テキスト系のブロックのみ中央寄せの通常のコンテンツ幅に制限
   セクション/nsync系ブロック/wp-block-groupのalignfull/alignwideなどはこの規則の対象外 */
.page-content > .wp-block-paragraph,
.page-content > p,
.page-content > .wp-block-heading:not(.alignfull):not(.alignwide),
.page-content > h1:not(.alignfull):not(.alignwide),
.page-content > h2:not(.alignfull):not(.alignwide),
.page-content > h3:not(.alignfull):not(.alignwide),
.page-content > h4:not(.alignfull):not(.alignwide),
.page-content > .wp-block-list,
.page-content > .wp-block-image:not(.alignfull):not(.alignwide),
.page-content > .wp-block-quote,
.page-content > .wp-block-table {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* =========================================================
   v1.13.7: Hero eyebrow を白背景・グラデ枠・角丸に
   (padding-box + border-box のトリックで角丸グラデ枠を実現)
   ========================================================= */
.nsync-hero-eyebrow {
    display: inline-block;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #0ea5e9 0%, #06b6d4 100%) border-box;
    border: 2px solid transparent;
    border-radius: 9999px;
    padding: 0.4rem 1.1rem;
    color: #0f172a; /* slate-900 */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .nsync-hero-eyebrow {
        font-size: 0.95rem;
        padding: 0.45rem 1.25rem;
    }
}

/* =========================================================
   v1.13.8: Nsyncの特長ブロック - 01〜03を囲む角丸フレーム
   ========================================================= */
.nsync-feature-frame {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.8); /* slate-200 */
}
/* 内部の feature-section セクションの縦padding を控えめに */
.nsync-feature-frame > .wp-block-nsync-feature-section > section,
.nsync-feature-frame section {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}


/* ===== トップページ Hero H1修正 (2026-07-28): .page-content h1 の clamp(2rem,4vw,3rem) がホームのヒーロー見出しにも適用されてしまい、60pxのはずが48pxに縮小していたのを修正 ===== */
.home .page-content > section:first-of-type h1 {
  font-size: 2.25rem !important;
}
@media (min-width: 768px) {
  .home .page-content > section:first-of-type h1 {
    font-size: 3.75rem !important;
  }
}


/* ===== トップページ Hero 画像・グリッド比率修正 (2026-07-28): 本番はimage 42%/text 58%の非均等グリッドで、画像はmin-width:150%で意図的にはみ出すレイアウト ===== */
.home .page-content > section:first-of-type .grid.lg\:grid-cols-2 {
  grid-template-columns: 3fr 2.2fr !important;
}
.home .page-content > section:first-of-type img.w-full {
  min-width: 150% !important;
  border-radius: 8px !important;
}


/* ===== トップページ Nsyncとは？ 動画埋め込みサイズ修正 (2026-07-28): 本番768pxに合わせて縮小 ===== */
.home .page-content .wp-block-embed__wrapper {
  max-width: 768px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== トップページ Nsyncの特長: ブロック幅・見出しサイズ修正 (2026-07-28) ===== */
.home .nsync-feature-frame {
  max-width: 1536px !important;
}
.home .nsync-feature-frame h3.text-2xl {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}


/* ===== トップページ 便利機能スライダー見出しサイズ修正 (2026-07-28) ===== */
.home .swiper-slide h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
}
/* ===== トップページ ご利用開始までの流れ 円ブロックサイズ修正 (2026-07-28) ===== */
.home .nsync-step-flow-circle {
  width: 160px !important;
  height: 160px !important;
}


/* ===== トップページ 追加修正 (2026-07-28 二回目) ===== */

/* Hero: バッジを本番と同じプレーンな白ピルに (グラデーション枠を削除) */
.home .page-content > section:first-of-type .nsync-hero-eyebrow {
  background: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Hero: 資料請求ボタンを本番と同じグレー半透明・白文字に */
.home .page-content > section:first-of-type a.bg-white.text-slate-800 {
  background-color: rgba(51,65,85,0.5) !important;
  color: #fff !important;
}
.home .page-content > section:first-of-type a.bg-white.text-slate-800:hover {
  background-color: #334155 !important;
}

/* Nsyncの特長: フレームの内側パディングを縮小し重複を減らす */
.home .nsync-feature-frame {
  padding: 24px !important;
}

/* 便利機能スライダー: 概要テキストサイズ修正 */
.home section p.text-slate-600.max-w-xxl {
  font-size: 14px !important;
}

/* ご利用開始までの流れ: 概要テキストサイズ修正 */
.home .nsync-step-flow-circle-title ~ p,
.home section:has(.nsync-step-flow-circle) p {
  font-size: 14px !important;
}


/* ===== Nsyncとは？ 動画のアスペクト比修正 (768x432に) - iframeのwidth属性は768になったがheight属性が630のままで比率が崩れていたのを修正 (2026-07-28 3回目) ===== */
.home .page-content .wp-block-embed__wrapper iframe {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}


/* ===== 便利機能スライダー: カード内パディングを本番と同じ 40px に (2026-07-28 4回目) ===== */
.home .nsync-feature-carousel .swiper-slide > div {
  padding: 48px !important;
}


/* ===== 便利機能スライダー: カードの高さを固定化し、本番と同じ縦長を解消 (2026-07-28 5回目) ===== */
.home .nsync-feature-carousel .swiper-slide img {
  width: 150px !important;
  height: 150px !important;
}


/* ===== 便利機能スライダー: 概要テキストのフォントサイズ修正 (2026-07-28 6回目) ===== */
.home .nsync-feature-carousel .swiper-slide p {
  font-size: 14px !important;
  line-height: 20px !important;
}


/* ===== 便利機能スライダー: 本文フォントサイズ15px (2026-07-28 7回目) ===== */
.home .nsync-feature-carousel .swiper-slide p {
  font-size: 15px !important;
}


/* ===== ご利用開始までの流れ: 円内テキストカラーを本番と同じ青に、接続ラインを中心に揃える (2026-07-28 8回目) ===== */
.home .nsync-step-flow-circle-title {
  color: #0ea5e9 !important;
}
.home .nsync-step-flow-line {
  top: 80px !important;
}


/* ===== 円ブロック内テキストを少し大きく (2026-07-28 9回目) ===== */
.home .nsync-step-flow-circle-title {
  font-size: 16px !important;
}


/* ===== Hero: H1グラデーションを本番と同じに、バッジにボーダーを追加 (2026-07-28 10回目) ===== */
.home .page-content > section:first-of-type h1 {
  background-image: linear-gradient(97deg, rgb(112,255,250) 0%, rgb(0,85,255) 100%) !important;
}
.home .page-content > section:first-of-type .nsync-hero-eyebrow {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(97deg, rgba(112,255,250,1) 0%, rgba(0,85,255,1) 100%) border-box !important;
  border: 3px solid transparent !important;
  border-radius: 3em !important;
  color: #000 !important;
}


/* ===== 料金ページ(page-id-91) 修正: グローバルな .page-content p/li ルールがユーティリティクラスを上書きしていたのを修正 (2026-07-28) ===== */
.page-id-91 .price-b {
  font-size: 72px !important;
}
.page-id-91 .price-n {
  font-size: 64.8px !important;
}
.page-id-91 p.absolute.bg-sky-500 {
  font-size: 14px !important;
  color: #fff !important;
}
.page-id-91 li.flex.items-center {
  font-size: 14px !important;
}
.page-id-91 h3.text-2xl {
  margin: 0 !important;
}


/* ===== 料金ページ(page-id-91) 追加修正: 上部余白・価格位置ズレ・背景グレーブロック (2026-07-28 2回目) ===== */
.page-id-91 .page-content {
  padding-top: 0 !important;
}
.page-id-91 .features-top-container {
  background-color: #f1f5f9 !important;
  padding: 56px 0 !important;
  border-radius: 24px !important;
}
@media (max-width: 1023px) {
  .page-id-91 p.mt-2.text-4xl.font-extrabold.tx-cntr {
    margin-top: 24px !important;
  }
}


/* ===== 料金ページ(page-id-91) 追加修正: 見出しカラー・申し込みボタン位置揃え (2026-07-28 3回目) ===== */
.page-id-91 h3.text-sky-600 {
  color: #0284c7 !important;
}



/* ===== 特徴ページ(01/02/03) バッジを本番と同じ水色背景・青テキストに (2026-07-29) ===== */
.page-id-76 .nsync-hero-eyebrow,
.page-id-85 .nsync-hero-eyebrow,
.page-id-89 .nsync-hero-eyebrow {
  background-color: rgba(14,165,233,0.1) !important;
  color: #0ea5e9 !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  border: none !important;
  letter-spacing: 1.2px !important;
}


/* ===== 特徴ページ(01/02/03) H1グラデーションを本番と同じに (2026-07-29) ===== */
.page-id-76 .page-content h1,
.page-id-85 .page-content h1,
.page-id-89 .page-content h1 {
  background-image: linear-gradient(97deg, rgb(112,255,250) 0%, rgb(0,85,255) 100%) !important;
}


/* ===== 特徴ページ(01/02/03) 吹き出しブロックの左ラインを本番と同じに (2026-07-29) ===== */
.page-id-76 .wp-block-group[style*="border-left-color:#0ea5e9"],
.page-id-85 .wp-block-group[style*="border-left-color:#0ea5e9"],
.page-id-89 .wp-block-group[style*="border-left-color:#0ea5e9"] {
  border-left-width: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px !important;
}


/* ===== 01ページ: 「あなたの現場は」 BEFORE/AFTERブロックの背景を本番と同じに (2026-07-29) ===== */
.page-id-76 [style*="background:#fef2f2"] {
  background: #fff !important;
  border-color: #e2e8f0 !important;
  border-width: 1px !important;
}
.page-id-76 [style*="background:#f0f9ff"] {
  background: rgba(239,246,255,0.3) !important;
  border-color: rgba(14,165,233,0.3) !important;
  border-width: 1px !important;
}


/* ===== 特徴ページ(01/02/03) 本文中見出しのグラデーションを黒に、下線削除 (2026-07-29) ===== */
.page-id-76 [style*="linear-gradient(90deg,#0ea5e9,#06b6d4)"],
.page-id-85 [style*="linear-gradient(90deg,#0ea5e9,#06b6d4)"],
.page-id-89 [style*="linear-gradient(90deg,#0ea5e9,#06b6d4)"] {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}



/* ===== 01ページ: 「導入後」ブロックは別の透明度なので上書き修正 (2026-07-29) ===== */
.page-id-76 [style*="border:2px solid rgba(14,165,233,0.2)"] {
  background: rgba(239,246,255,0.5) !important;
  border-color: rgba(14,165,233,0.2) !important;
}


/* ===== 01ページ: 「アセット管理」ブロックを本番と同じ角丸カードに (2026-07-29) ===== */
.page-id-76 [style*="background-color:#f1f5f9"] {
  border-radius: 24px !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* test-marker-1785317676003 */


/* ===== 特徴ページ(01/02/03) ヒーロー上余白・グラデーション・画像・タブパネル (2026-07-29 最終) ===== */
.page-id-76 .page-content, .page-id-85 .page-content, .page-id-89 .page-content { padding-top: 0 !important; }
.page-id-76 .wp-block-group:has(h1), .page-id-85 .wp-block-group:has(h1), .page-id-89 .wp-block-group:has(h1) { background: linear-gradient(rgb(240,249,255), rgb(255,255,255)) !important; }
.page-id-76 .wp-block-columns:has(h1) img, .page-id-85 .wp-block-columns:has(h1) img, .page-id-89 .wp-block-columns:has(h1) img { max-width: 85% !important; margin: 0 auto !important; display: block !important; }
.nsync-tabs__panel { padding: 48px !important; }


/* ===== 特徴ページ(01/02/03) 注入した生 HTML 内の Tailwind テキストクラスをグローバル p ルールから保護 (2026-07-29) ===== */
.page-id-76 section p[class*="text-"], .page-id-85 section p[class*="text-"], .page-id-89 section p[class*="text-"],
.page-id-76 section span[class*="text-"], .page-id-85 section span[class*="text-"], .page-id-89 section span[class*="text-"] {
  font-size: unset;
  color: unset;
}
.page-id-76 section .text-xs, .page-id-85 section .text-xs, .page-id-89 section .text-xs { font-size: 12px !important; }
.page-id-76 section .text-sm, .page-id-85 section .text-sm, .page-id-89 section .text-sm { font-size: 14px !important; }
.page-id-76 section .text-base, .page-id-85 section .text-base, .page-id-89 section .text-base { font-size: 16px !important; }
.page-id-76 section .text-xl, .page-id-85 section .text-xl, .page-id-89 section .text-xl { font-size: 20px !important; }
.page-id-76 section .text-2xl, .page-id-85 section .text-2xl, .page-id-89 section .text-2xl { font-size: 24px !important; }
.page-id-76 section .text-3xl, .page-id-85 section .text-3xl, .page-id-89 section .text-3xl { font-size: 30px !important; }
.page-id-76 section .text-slate-400, .page-id-85 section .text-slate-400, .page-id-89 section .text-slate-400 { color: #94a3b8 !important; }
.page-id-76 section .text-slate-500, .page-id-85 section .text-slate-500, .page-id-89 section .text-slate-500 { color: #64748b !important; }
.page-id-76 section .text-slate-600, .page-id-85 section .text-slate-600, .page-id-89 section .text-slate-600 { color: #475569 !important; }
.page-id-76 section .text-slate-700, .page-id-85 section .text-slate-700, .page-id-89 section .text-slate-700 { color: #334155 !important; }
.page-id-76 section .text-slate-800, .page-id-85 section .text-slate-800, .page-id-89 section .text-slate-800 { color: #1e293b !important; }
.page-id-76 section .text-slate-900, .page-id-85 section .text-slate-900, .page-id-89 section .text-slate-900 { color: #0f172a !important; }
.page-id-76 section .text-sky-500, .page-id-85 section .text-sky-500, .page-id-89 section .text-sky-500 { color: #0ea5e9 !important; }
.page-id-76 section .text-sky-600, .page-id-85 section .text-sky-600, .page-id-89 section .text-sky-600 { color: #0284c7 !important; }
.page-id-76 section .text-sky-950, .page-id-85 section .text-sky-950, .page-id-89 section .text-sky-950 { color: #082f49 !important; }


/* ===== 特徴ページ(01) ヒーロー列の余白・幅を本番と同じに (2026-07-29) ===== */
.page-id-76 .wp-block-columns:has(h1) { gap: 64px !important; }
.page-id-76 .wp-block-columns:has(h1) > .wp-block-column:first-child { flex-basis: 58% !important; }


/* ===== 便利機能タブの幅を本番と同じに (2026-07-29) ===== */
.nsync-tabs { max-width: 1024px !important; }


/* ===== 特徴ページ(01/02/03) 任意値Tailwindクラス・アセット管理パディング・便利機能下線 (2026-07-29) ===== */
.page-id-76 section .text-[9px], .page-id-85 section .text-[9px], .page-id-89 section .text-[9px] { font-size: 9px !important; }
.page-id-76 section .text-[10px], .page-id-85 section .text-[10px], .page-id-89 section .text-[10px] { font-size: 10px !important; }
.page-id-76 section .text-[11px], .page-id-85 section .text-[11px], .page-id-89 section .text-[11px] { font-size: 11px !important; }
.page-id-76 section .text-white, .page-id-85 section .text-white, .page-id-89 section .text-white { color: #fff !important; }
.page-id-76 section ul[class*="text-"], .page-id-85 section ul[class*="text-"], .page-id-89 section ul[class*="text-"] { font-size: unset; }
.page-id-76 .features-top-container { background-color: rgb(241, 245, 249) !important; border-radius: 24px !important; padding-top: 32px !important; padding-bottom: 32px !important; }
.page-id-76 .features-inner img { max-width: 80% !important; margin: 0 auto !important; display: block !important; }
.page-id-76 h2.feature-h2, .page-id-85 h2.feature-h2, .page-id-89 h2.feature-h2 { border-bottom: none !important; }

.page-id-76 .wp-block-columns:has(h1) p.wp-block-paragraph:not(.nsync-hero-eyebrow) { font-size: 15.4px !important; }


/* ===== 特徴ページ 任意値クラス 属性セレクタ方式で再定義 (2026-07-29) ===== */
.page-id-76 section [class~="text-[9px]"] { font-size: 9px !important; }
.page-id-76 section [class~="text-[10px]"] { font-size: 10px !important; }
.page-id-76 section [class~="text-[11px]"] { font-size: 11px !important; }
.page-id-85 section [class~="text-[9px]"] { font-size: 9px !important; }
.page-id-85 section [class~="text-[10px]"] { font-size: 10px !important; }
.page-id-85 section [class~="text-[11px]"] { font-size: 11px !important; }
.page-id-89 section [class~="text-[9px]"] { font-size: 9px !important; }
.page-id-89 section [class~="text-[10px]"] { font-size: 10px !important; }
.page-id-89 section [class~="text-[11px]"] { font-size: 11px !important; }


/* ===== 特徴ページ 見出しサイズ・マージン修正 (2026-07-29 2回目) ===== */
.page-id-76 .nsync-hero-eyebrow, .page-id-85 .nsync-hero-eyebrow, .page-id-89 .nsync-hero-eyebrow { background-color: rgba(14,165,233,0.1) !important; }
.page-id-76 h3.text-sm, .page-id-85 h3.text-sm, .page-id-89 h3.text-sm { font-size: 16px !important; margin-bottom: 24px !important; }
.page-id-76 section h3.text-xl, .page-id-85 section h3.text-xl, .page-id-89 section h3.text-xl { font-size: 24px !important; }
.page-id-76 h2.feature-h2, .page-id-85 h2.feature-h2, .page-id-89 h2.feature-h2 { font-size: 36px !important; }
.page-id-76 .prose h2.text-3xl, .page-id-85 .prose h2.text-3xl, .page-id-89 .prose h2.text-3xl { font-size: 30px !important; }


/* ===== 特徴ページ liタグのグローバル上書きを親 ul のサイズに強制継承 (2026-07-29 3回目) ===== */
.page-id-76 section ul[class~="text-[11px]"] li, .page-id-85 section ul[class~="text-[11px]"] li, .page-id-89 section ul[class~="text-[11px]"] li { font-size: 11px !important; }
.page-id-76 section ul[class~="text-[9px]"] li, .page-id-85 section ul[class~="text-[9px]"] li, .page-id-89 section ul[class~="text-[9px]"] li { font-size: 9px !important; }
.page-id-76 section ul[class~="text-[10px]"] li, .page-id-85 section ul[class~="text-[10px]"] li, .page-id-89 section ul[class~="text-[10px]"] li { font-size: 10px !important; }
.page-id-76 h2.feature-h2, .page-id-85 h2.feature-h2, .page-id-89 h2.feature-h2 { font-size: 36px !important; }


/* ===== 便利機能見出しサイズ さらに具体的なセレクタで上書き (2026-07-29 4回目) ===== */
.page-template-default .page-content h2.feature-h2 { font-size: 36px !important; }


/* ===== liタグ全般のグローバル上書きを親 ul のサイズに強制継承 (2026-07-29) ===== */
.page-id-76 section ul.text-xs li, .page-id-85 section ul.text-xs li, .page-id-89 section ul.text-xs li { font-size: 12px !important; }
.page-id-76 section ul.text-sm li, .page-id-85 section ul.text-sm li, .page-id-89 section ul.text-sm li { font-size: 14px !important; }
/* 見出しサイズ統一・カラー確認 */
.page-id-76 h3.text-sm, .page-id-85 h3.text-sm, .page-id-89 h3.text-sm { font-size: 24px !important; }


/* ===== アセット見出しのグラデーションテキストを黒に (2026-07-29) ===== */
.page-id-76 .prose h2.text-3xl, .page-id-85 .prose h2.text-3xl, .page-id-89 .prose h2.text-3xl {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1e293b !important;
  color: #1e293b !important;
}


/* ===== バッジの背景画像レイヤー（白グラデーション）を削除して背景色を見えるように (2026-07-29) ===== */
.page-id-76 .nsync-hero-eyebrow, .page-id-85 .nsync-hero-eyebrow, .page-id-89 .nsync-hero-eyebrow {
  background-image: none !important;
}


/* ===== ページ02 見出しグラデーション・下線一括修正（ヒーロー以外全見出し） (2026-07-29) ===== */
.page-id-85 section h2:not(.feature-h2) {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1e293b !important;
  color: #1e293b !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.page-id-85 section p[class*="text-"], .page-id-85 section span[class*="text-"] { font-size: unset; }
.page-id-85 section .text-xs { font-size: 12px !important; }
.page-id-85 section .text-sm { font-size: 14px !important; }
.page-id-85 section .text-base { font-size: 16px !important; }
.page-id-85 section .text-xl { font-size: 20px !important; }
.page-id-85 section .text-2xl { font-size: 24px !important; }
.page-id-85 section .text-3xl { font-size: 30px !important; }
.page-id-85 section .text-slate-400 { color: #94a3b8 !important; }
.page-id-85 section .text-slate-500 { color: #64748b !important; }
.page-id-85 section .text-slate-600 { color: #475569 !important; }
.page-id-85 section .text-slate-700 { color: #334155 !important; }
.page-id-85 section .text-slate-800 { color: #1e293b !important; }
.page-id-85 section .text-slate-900 { color: #0f172a !important; }
.page-id-85 section .text-sky-500 { color: #0ea5e9 !important; }
.page-id-85 section .text-sky-600 { color: #0284c7 !important; }
.page-id-85 section [class~="text-[9px]"] { font-size: 9px !important; }
.page-id-85 section [class~="text-[10px]"] { font-size: 10px !important; }
.page-id-85 section [class~="text-[11px]"] { font-size: 11px !important; }
.page-id-85 section ul.text-xs li, .page-id-85 section ul.text-sm li, .page-id-85 section ul[class~="text-[11px]"] li, .page-id-85 section ul[class~="text-[10px]"] li, .page-id-85 section ul[class~="text-[9px]"] li { font-size: inherit !important; }
.page-id-85 .wp-block-columns:has(h1) p.wp-block-paragraph { font-size: 15.4px !important; }


/* ===== ページ02 タブコンテンツ見出しを本番と同じに (2026-07-29) ===== */
.page-id-85 .nsync-role-tabs h3 { font-size: 16px !important; font-weight: 700 !important; color: #475569 !important; }


/* ===== 絵文字画像(img.emoji)がブロック化してしまう問題を修正 (2026-07-29) ===== */
img.emoji {
  display: inline !important;
  margin: 0 0.1em !important;
  border: none !important;
  box-shadow: none !important;
  height: 1em !important;
  width: 1em !important;
  vertical-align: -0.1em !important;
}


/* ===== ヒーロー内の絵文字imgを除外 (2026-07-29) ===== */
.page-id-76 .wp-block-columns:has(h1) img.emoji, .page-id-85 .wp-block-columns:has(h1) img.emoji, .page-id-89 .wp-block-columns:has(h1) img.emoji {
  display: inline !important;
  max-width: none !important;
  margin: 0 0.1em !important;
  height: 1em !important;
  width: 1em !important;
}


/* ===== ページ02 features-top-container に背景グレーを付与 (2026-07-29) ===== */
.page-id-85 section.py-12.bg-slate-50 .features-top-container {
  background-color: rgb(241,245,249) !important;
  border-radius: 24px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}


/* ===== タブ説明ブロックの画像をセンタリング (2026-07-29) ===== */
.nsync-tabs__image { display: flex; justify-content: center; }


/* ===== 「今、どうなってる」ブロックも同じグレー背景に (2026-07-29) ===== */
.page-id-85 section.py-4.bg-slate-50 .features-top-container {
  background-color: rgb(241,245,249) !important;
  border-radius: 24px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}


/* ===== 「今、どうなってる」グレーボックスの左右に余白を確保 (2026-07-29) ===== */
.page-id-85 section.py-4.bg-slate-50 .grid.features-inner {
  padding-left: 32px !important;
  padding-right: 32px !important;
}


/* ===== ページ03 見出しグラデーション・下線一括修正 (2026-07-29) ===== */
.page-id-89 section h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1e293b !important;
  color: #1e293b !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.page-id-89 section p[class*="text-"], .page-id-89 section span[class*="text-"] { font-size: unset; }
.page-id-89 section .text-xs { font-size: 12px !important; }
.page-id-89 section .text-sm { font-size: 14px !important; }
.page-id-89 section .text-base { font-size: 16px !important; }
.page-id-89 section .text-xl { font-size: 20px !important; }
.page-id-89 section .text-2xl { font-size: 24px !important; }
.page-id-89 section .text-3xl { font-size: 30px !important; }
.page-id-89 section .text-slate-400 { color: #94a3b8 !important; }
.page-id-89 section .text-slate-500 { color: #64748b !important; }
.page-id-89 section .text-slate-600 { color: #475569 !important; }
.page-id-89 section .text-slate-700 { color: #334155 !important; }
.page-id-89 section .text-slate-800 { color: #1e293b !important; }
.page-id-89 section .text-slate-900 { color: #0f172a !important; }
.page-id-89 section .text-sky-500 { color: #0ea5e9 !important; }
.page-id-89 section .text-sky-600 { color: #0284c7 !important; }
.page-id-89 section .text-white { color: #fff !important; }
.page-id-89 section [class~="text-[9px]"] { font-size: 9px !important; }
.page-id-89 section [class~="text-[10px]"] { font-size: 10px !important; }
.page-id-89 section [class~="text-[11px]"] { font-size: 11px !important; }
.page-id-89 section ul.text-xs li, .page-id-89 section ul.text-sm li, .page-id-89 section ul[class~="text-[11px]"] li, .page-id-89 section ul[class~="text-[10px]"] li, .page-id-89 section ul[class~="text-[9px]"] li { font-size: inherit !important; }
.page-id-89 .wp-block-columns:has(h1) p.wp-block-paragraph { font-size: 15.4px !important; }


/* ===== ページ03 ヒーローバッジとH1の重なりを修正 (2026-07-29) ===== */
.page-id-89 .wp-block-columns:has(h1) .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}


/* ===== ページ03 ヒーローフォントサイズど01~02と統一（バッジ以外） (2026-07-29) ===== */
.page-id-89 .top-grid-main h1 { font-size: 48px !important; }
.page-id-89 .top-grid-main .border-l-2 { font-size: 17px !important; }
.page-id-89 .top-grid-main p.leading-relaxed.text-slate-500 { font-size: 17px !important; }


/* ===== ページ03 「クラウド連携で、効率を最大化」グレー背景 (2026-07-29) ===== */
.page-id-89 .features-top-container {
  background-color: rgb(241,245,249) !important;
  border-radius: 24px !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}


/* ===== ページ03 フッター上の余分な余白を削除 (2026-07-29) ===== */
.page-id-89 .page-content { padding-bottom: 0 !important; }

.page-id-76 .page-content, .page-id-85 .page-content { padding-bottom: 0 !important; }


/* ===== 全ページ: .page-content の不要な下余白を削除（ソースルールの上書き）(2026-07-29) ===== */
.page-content { padding-bottom: 0 !important; }


/* ===== コラム記事 SNSシェアアイコンサイズを本番と同じに (2026-07-29) ===== */
.wp-block-themeisle-blocks-sharing-icons .social-icon svg {
  width: 15px !important;
  height: 15px !important;
}
.wp-block-themeisle-blocks-sharing-icons a.social-icon {
  width: 39px !important;
  height: 39px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ===== コラム記事本文内 h2 にグレー下線を付与（本番と同じ）(2026-07-29) ===== */
.prose h2 {
  border-bottom: 2px solid #f1f5f9 !important;
  padding-bottom: 0.5rem !important;
}


/* ===== コラム記事 h2 下線をさらに具体的なセレクタで上書き (2026-07-29 2回目) ===== */
.single .page-content .prose h2 {
  border-bottom: 2px solid #f1f5f9 !important;
  padding-bottom: 0.5rem !important;
}


/* ===== 全ページ共通: フッターロゴ・キャッチコピーを本番と同じに (2026-07-29) ===== */
footer img[style*="height:56px"] {
  height: 96px !important;
}
.footer-catch {
  background: linear-gradient(90deg, rgb(112,255,250) 0%, rgb(0,115,255) 100%) text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 24px !important;
}

footer p.footer-catch { font-size: 24px !important; }

footer .flex.justify-center.md\:justify-start p.footer-catch { font-size: 24px !important; }

footer .flex.justify-center.md\:justify-start p.footer-catch { line-height: 1.4 !important; padding-bottom: 4px !important; }


/* ===== 全ページ共通: フッターコピーライト上のグラデーションラインを本番と同じに (2026-07-29) ===== */
.footer_line01 {
  border-top: 2px solid !important;
  border-image: linear-gradient(to right, rgb(112,255,250), rgb(0,85,255)) 1 !important;
}


/* ===== 全ページ共通: フッター上 CTAセクションのレイアウト調整（右イメージを小さく・右寄せ、左テキストを大きく）(2026-07-29) ===== */
.nsync-cta-section .grid.lg\:grid-cols-2 {
  grid-template-columns: 3fr 1.5fr !important;
}
.nsync-cta-section .grid.lg\:grid-cols-2 .max-w-md {
  max-width: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}


/* ===== 全ページ共通: フッター上CTA見出しの太さを本番と同じに (2026-07-29) ===== */
.nsync-cta-section h3 {
  font-weight: 400 !important;
}


/* ===== ニュースページ .container の最大幅を本番と同じに (2026-07-29) ===== */
body.blog .container, body.archive .container, body.category .container {
  max-width: 1280px !important;
}


/* ===== 他の記事カードタイトルを本番と同じに (2026-07-29) ===== */
.post-card-title {
  font-size: 18px !important;
}

.single .page-content .post-card-title { font-size: 18px !important; }


/* ===== 全ページ共通: ヘッダーナビの太さ・背景・ロゴサイズを本番と同じに (2026-07-29) ===== */
header nav a {
  font-weight: 400 !important;
}
header {
  background-color: rgba(255,255,255,0.92) !important;
}
.head-logo .custom-logo-link img.custom-logo {
  height: 60px !important;
  width: auto !important;
}
header nav button {
  font-weight: 400 !important;
}

header nav button, header .nsync-dropdown-trigger { font-weight: 400 !important; }

header nav button.nsync-dropdown-trigger { font-weight: 400 !important; }


/* ===== フッターCTAボタンをグレー→ホバーで紺に (2026-07-29) ===== */
.nsync-cta-section a.bg-slate-700 {
  background-color: rgba(51,65,85,0.5) !important;
  color: #fff !important;
}
.nsync-cta-section a.bg-slate-700:hover {
  background-color: #334155 !important;
  color: #fff !important;
}


/* ===== 記事内「この記事でわかること」見出し背景を本番と同じ（タイトル幅だけ）に (2026-07-29) ===== */
.vk_borderBox_title_container {
  display: inline-block !important;
}

div.vk_borderBox_title_container.has-background { display: inline-block !important; }


/* ===== スクロール・ヒーローアニメーション CSS (2026-07-30) ===== */
.nsync-fade-target {
  opacity: 0;
  transform: translateY(32px);
}
.nsync-fade-target.nsync-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.15s cubic-bezier(0.22,1,0.36,1) 0.15s, transform 1.15s cubic-bezier(0.22,1,0.36,1) 0.15s;
}
.nsync-hero-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.nsync-hero-fade.nsync-visible {
  opacity: 1;
  transform: translateY(0);
}
/* キャッチコピーワイプ発進 */
.footer-catch {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: nsyncTextWipe 1.1s cubic-bezier(0.65,0,0.35,1) forwards;
  animation-delay: 0.2s;
}
@keyframes nsyncTextWipe {
  to { clip-path: inset(0 0 0 0); }
}
/* 背景フロー（ヒーロー背景が横にーっと流れ続ける） */
.bg-gradient-to-b.from-sky-50,
.top-grid-main,
.wp-block-columns:has(h1) {
  position: relative;
  overflow: hidden;
}
.bg-gradient-to-b.from-sky-50::before,
section:has(> .top-grid-main)::before,
.wp-block-group:has(> .wp-block-columns > .wp-block-column > h1)::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 220%;
  height: 120%;
  background-image:
    radial-gradient(circle, rgba(112,255,250,0.18) 0%, transparent 60%),
    radial-gradient(circle, rgba(0,115,255,0.14) 0%, transparent 60%);
  background-repeat: repeat-x;
  background-size: 50% 100%, 40% 100%;
  background-position: 0% 0%, 30% 100%;
  animation: nsyncBgFlow 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes nsyncBgFlow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* テキストの左→右ワイプ表示（スクロール連動） */
.nsync-text-target {
  clip-path: inset(0 100% 0 0);
}
.nsync-text-target.nsync-visible {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.65,0,0.35,1);
}
.nsync-hero-text {
  clip-path: inset(0 100% 0 0);
}
.nsync-hero-text.nsync-visible {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.65,0,0.35,1);
}
@media (prefers-reduced-motion: reduce) {
  .nsync-fade-target, .nsync-hero-fade, .footer-catch { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .bg-gradient-to-b.from-sky-50::before, section:has(> .top-grid-main)::before, .wp-block-group:has(> .wp-block-columns > .wp-block-column > h1)::before { animation: none !important; }
}


/* ===== トップページヒーロー画像：画面外から左にスライドイン (2026-07-30) ===== */
/* body.home h1 を含むセクション内の画像（ヒーローメイン画像）は初期状態をCSSで持たせてFOUCを防ぐ、すーっと大きく動く */
body.home section:has(> div > .grid > div > h1) .grid > div:not(:has(h1)) img {
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1), transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
body.home section:has(> div > .grid > div > h1) .grid > div:not(:has(h1)) img.nsync-visible {
  opacity: 1;
  transform: translateX(0);
}
/* トップページヒーローの実際の背景画像（top_hero_bg01）を横にユックリ流す（JSで付与される nsync-hero-bg-flow クラスを使用） */
body.home section:has(> div > .grid > div > h1) {
  position: relative;
  overflow: hidden;
}
.nsync-hero-bg-flow {
  width: 200% !important;
  left: 0 !important;
  right: auto !important;
  background-image: url('https://dev.nsync.jp/wp-content/uploads/2026/07/top_hero_bg01_loop-scaled.png') !important;
  background-size: 50% 100% !important;
  background-repeat: repeat-x !important;
  animation: nsyncHeroBgSlide 45s linear infinite;
  will-change: transform;
}
@keyframes nsyncHeroBgSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.home section:has(> div > .grid > div > h1) .grid > div:not(:has(h1)) img { transition: none !important; opacity: 1 !important; transform: none !important; }
  .nsync-hero-bg-flow { animation: none !important; }
}


/* ===== 「Nsyncの特長」3アイコン：拡大+フェードイン (2026-07-30) ===== */
.nsync-feature-pop {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.nsync-feature-pop.nsync-visible {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .nsync-feature-pop { transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ===== 料金プランカード：上下移動なし、フェードのみ (2026-07-30) ===== */
.grid:has(.price-b) > div {
  opacity: 0;
}
.nsync-fade-only {
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1);
}
.nsync-fade-only.nsync-visible {
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  .nsync-fade-only, .grid:has(.price-b) > div { transition: none !important; opacity: 1 !important; }
}


/* ===== トップページヒーローテキストの左寄せ（lg:ブレークポイント未適用の修正） (2026-07-30) ===== */
@media (min-width: 1024px) {
  body.page-id-60 .text-center.lg\:text-left {
    text-align: left !important;
  }
}


/* ===== トップページ CTAセクションのパディング・画像サイズを本番と同じに (2026-07-30) ===== */
body.home .nsync-cta-section {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
body.home .nsync-cta-section img {
  max-width: 435px !important;
  width: 100% !important;
}


/* ===== 埋め込み動画（YouTube）の下の余白を削除（ラッパーの高さが実際の動画より大きくなっていた修正） (2026-07-30) ===== */
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  padding-top: 0 !important;
}
body.home .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  /*height: 432px !important;*/
  max-width: 768px !important;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}


/* ===== 01ページ BEFORE/AFTERカードの高さを揃える (2026-07-30) ===== */
.page-id-76 .grid.items-center:has(> div span:is(.uppercase)) {
  align-items: stretch !important;
}


/* ===== 現状の課題／Nsyncならカードの高さを確実に揃える (2026-07-30) ===== */
.page-content .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
  align-items: stretch !important;
  display: grid !important;
  grid-template-rows: 1fr;
}
.page-content .grid.grid-cols-1.md\:grid-cols-2.gap-6 > div {
  height: 100% !important;
  box-sizing: border-box !important;
}


/* ===== 02ページ 現状の課題/Nsyncならカード内 h4 の margin-top を削除 (2026-07-30) ===== */
.page-content .grid.grid-cols-1.md\:grid-cols-2.gap-6 h4 {
  margin-top: 0 !important;
}


/* ===== 02ページ バッジ（現状の課題/Nsyncなら）を少し下に (2026-07-30) ===== */
.page-content .grid.grid-cols-1.md\:grid-cols-2.gap-6 span.absolute.top-4.right-4 {
  top: 20px !important;
}


/* ===== 01ページ BEFORE/AFTERバッジを少し下に (2026-07-30) ===== */
.page-id-76 span.absolute.top-3.right-3 {
  top: 20px !important;
}


/* ===== 03ページのヒーロー背景アニメを削除（01/02と静的なヒーローで統一）(2026-07-30) ===== */
.page-id-89 .bg-gradient-to-b.from-sky-50::before {
  display: none !important;
}


/* ===== フッター上 CTAテキストサイズを1ptアップ (2026-07-30) ===== */
.nsync-cta-section h3 {
  font-size: 25.33px !important;
}
.nsync-cta-section p {
  font-size: 17.33px !important;
}

.page-id-76 section .nsync-cta-section h3.text-2xl, .page-id-85 section .nsync-cta-section h3.text-2xl, .page-id-89 section .nsync-cta-section h3.text-2xl { font-size: 25.33px !important; }

.page-id-76 .nsync-cta-section h3.text-2xl.md\:text-3xl, .page-id-85 .nsync-cta-section h3.text-2xl.md\:text-3xl, .page-id-89 .nsync-cta-section h3.text-2xl.md\:text-3xl { font-size: 25.33px !important; }


/* ===== 全ページ共通: CTAセクションの画像最大幅を本番と同じに (2026-07-30) ===== */
.nsync-cta-section img {
  max-width: 435px !important;
  width: 100% !important;
}


/* ===== 全ページ共通: CTAセクションの上下パディングをPCで約1/3に (2026-07-30) ===== */
@media (min-width: 1024px) {
  .nsync-cta-section {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}


/* ===== CTAセクションの見出し下マージンを少し広げる (2026-07-30) ===== */
.nsync-cta-section h3.mb-4 {
  margin-bottom: 28px !important;
}

.nsync-cta-section p.mb-4 {
  margin-bottom: 28px !important;
}


/* ===== フッターCTAのグリッド幅を本番と同じに制限（画像位置を近づける） (2026-07-30) ===== */
.nsync-cta-section .grid.lg\:grid-cols-2 {
  max-width: 1354px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== 利用規約ページの背景を本番と同じに (2026-07-30) ===== */
body.page-id-110 {
  background: #ffffff !important;
  background-image: none !important;
  background-attachment: initial !important;
}
body.page-id-110 h1.feature-h2 {
  background: linear-gradient(97deg, rgba(112, 255, 250, 1) 0%, rgba(0, 85, 255, 1) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.page-id-110 h3 {
  font-size: 16px !important;
  margin-bottom: 1rem !important;
}
body.page-id-110 h3 + ul {
  margin-bottom: 3rem !important;
}


/* ===== 利用規約ページの h2 を黒に（グラデーション解除） (2026-07-30) ===== */
body.page-id-110 .page-content h2 {
  background-image: none !important;
  -webkit-text-fill-color: initial !important;
  color: #1e293b !important;
}


/* ===== トップページ「Nsyncの特長」を本番に寄せる (2026-07-30) ===== */
body.home .nsync-feature-frame {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
body.home .nsync-feature-frame .wp-block-group__inner-container {
  max-width: 942px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home .nsync-feature-pop {
  max-width: 267px !important;
}
/* トップページヒーローの縦幅を少し増やす */
body.home section:has(> div > .grid > div > h1) {
  padding-top: 124px !important;
  padding-bottom: 124px !important;
}


/* ===== .nsync-feature-frame を Tailwind の container と同じレスポンシブな段階に (2026-07-30) ===== */
.home .nsync-feature-frame {
  max-width: 100% !important;
}
@media (min-width: 640px) {
  .home .nsync-feature-frame { max-width: 640px !important; }
}
@media (min-width: 768px) {
  .home .nsync-feature-frame { max-width: 768px !important; }
}
@media (min-width: 1024px) {
  .home .nsync-feature-frame { max-width: 1024px !important; }
}
@media (min-width: 1280px) {
  .home .nsync-feature-frame { max-width: 1280px !important; }
}
@media (min-width: 1536px) {
  .home .nsync-feature-frame { max-width: 1536px !important; }
}


/* ===== フッターの「特徴」「サポート」ナビを左寄せに (2026-07-30) ===== */
footer .menu-item-has-children,
footer .menu-item-has-children * {
  text-align: left !important;
}


/* ===== お問い合わせページ: 見出し余白・入力枚枚の枚線を修正 (2026-07-30) ===== */
body.page-id-100 h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.page-id-100 .nsync-cta-section {
  display: none !important;
}
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgb(203, 213, 225) !important;
}


/* ===== 料金ページ: 金額テキストのサイズを text-4xl 本来の値にし、高さの余白を削減 (2026-07-30) ===== */
.page-content p.text-4xl {
  font-size: 2.25rem !important;
  line-height: 1.3 !important;
}
@media (max-width: 1023px) {
  .page-content p.text-4xl {
    padding-top: 4px !important;
  }
}


/* ===== 料金ページ: トライアル・スタンダードの金額位置を統一 (2026-07-30) ===== */
.page-id-91 p.text-4xl.font-extrabold.tx-cntr {
  margin-top: 24px !important;
}


/* ===== 料金ページ: price-b と price-n のフォントサイズを統一（ボタン位置のズレを解消） (2026-07-30) ===== */
.page-id-91 .price-b {
  font-size: 64.8px !important;
}


/* ===== 03ページ: ヒーロー左寄せ・上部余白・背景色修正 (2026-07-30) ===== */
body.page-id-89 h1.text-2xl,
body.page-id-89 .top-h1-sub {
  text-align: left !important;
}
body.page-id-89 section:has(> div > .top-grid-main) + section {
  padding-top: 48px !important;
}
body.page-id-89 .page-content > .wp-block-group.alignwide {
  background-color: rgb(248, 250, 252) !important;
}


/* ===== 03ページ: h1の親コンテナの text-center lg:text-left が未適用なのを直接修正 (2026-07-30) ===== */
@media (min-width: 1024px) {
  body.page-id-89 .top-grid-main [class*="lg:text-left"] {
    text-align: left !important;
  }
}


/* ===== 料金ページ: ネイティブブロック化後のチェックマークリスト (2026-07-30) ===== */
ul.nsync-check-list {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
ul.nsync-check-list li {
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
}
ul.nsync-check-list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
  background-color: #0ea5e9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* ===== 比較表見出しのグラデーション（ネイティブブロック化後） (2026-07-30) ===== */
h2.nsync-gradient-heading {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  text-align: center !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #0f172a !important;
  margin-bottom: 0.75rem !important;
}
h2.nsync-gradient-heading + p {
  margin-bottom: 2.5rem !important;
}
.nsync-compare-table table thead {
  border-bottom: 1px solid #e2e8f0 !important;
}


/* ===== 01ページ 比較表（ネイティブブロック化後） (2026-07-30) ===== */
.nsync-compare-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.75rem !important;
}
.nsync-compare-table th, .nsync-compare-table td {
  padding: 1rem !important;
  text-align: left !important;
  border: none !important;
}
.nsync-compare-table thead th {
  font-weight: 600 !important;
  color: #1e293b !important;
  background: #f8fafc !important;
}
.nsync-compare-table thead th:first-child {
  font-weight: 700 !important;
  color: #334155 !important;
  width: 15%;
}
.nsync-compare-table thead th:last-child {
  font-weight: 700 !important;
  color: #0ea5e9 !important;
  background: rgba(240,249,255,0.5) !important;
  width: 35%;
}
.nsync-compare-table tbody th {
  font-weight: 700 !important;
  color: #1e293b !important;
  background: rgba(248,250,252,0.3) !important;
}
.nsync-compare-table tbody td {
  color: #475569 !important;
  background: rgba(248,250,252,0.3) !important;
}
.nsync-compare-table tbody td:last-child {
  font-weight: 600 !important;
  background: rgba(240,249,255,0.5) !important;
}
.nsync-compare-table tbody tr:nth-child(1) td:last-child,
.nsync-compare-table tbody tr:nth-child(2) td:last-child {
  color: #0f172a !important;
}
.nsync-compare-table tbody tr:nth-child(3) td:last-child,
.nsync-compare-table tbody tr:nth-child(4) td:last-child {
  color: #0ea5e9 !important;
}


/* ===== 01ページ: ネイティブブロック化後の見出し修正 (2026-07-30) ===== */
body.page-id-76 h3.wp-block-heading {
  text-align: center !important;
}
h2.nsync-gradient-heading {
  border-bottom: none !important;
}


/* ===== タブ内テキストをアニメ対象外に（レイアウトバガー回避）・見出し左寄せ・比率2:1 (2026-07-30) ===== */
.nsync-tabs .nsync-text-target, .nsync-tabs .nsync-fade-target {
  clip-path: none !important;
  opacity: 1 !important;
  transform: none !important;
}
body.page-id-76 .nsync-tabs__text h3.wp-block-heading {
  text-align: left !important;
}
.nsync-tabs__panel-inner {
  grid-template-columns: 2fr 1fr !important;
}


/* ===== 01ページ: 便利機能タブの元スタイル（元はブロック内<style>タグに埋め込まれていた） (2026-07-30) ===== */
.nsync-tabs{max-width:900px;margin:0 auto}
.nsync-tabs__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;border-bottom:1px solid #e2e8f0;margin-bottom:2rem}
.nsync-tabs__btn{background:none;border:none;padding:.75rem 1.25rem;font-size:1rem;font-weight:600;color:#64748b;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;transition:all .15s ease;font-family:inherit}
.nsync-tabs__btn:hover{color:#0284c7}
.nsync-tabs__btn.is-active{color:#0ea5e9;border-bottom-color:#0ea5e9}
.nsync-tabs__panel{display:none;padding:2rem;background:#fff;border-radius:16px;border:1px solid #e2e8f0}
.nsync-tabs__panel.is-active{display:block}
.nsync-tabs__panel-inner{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:center}
.nsync-tabs__text h3{font-size:1.25rem;font-weight:700;margin:0 0 .75rem;color:#0f172a;text-align:left}
.nsync-tabs__text p{margin:0;color:#475569;line-height:1.7}
.nsync-tabs__image img{width:120px;height:auto}
@media(max-width:640px){.nsync-tabs__panel-inner{grid-template-columns:1fr;text-align:center}.nsync-tabs__image img{margin:0 auto}}


/* ===== 02ページ: ロールタブ内もアニメ対象外に (2026-07-30) ===== */
.nsync-role-tabs .nsync-text-target, .nsync-role-tabs .nsync-fade-target {
  clip-path: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ===== 02ページ 比較表（ネイティブブロック化後） (2026-07-30) ===== */
.nsync-compare-table2 {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.75rem !important;
}
.nsync-compare-table2 th, .nsync-compare-table2 td {
  padding: 1rem !important;
  text-align: left !important;
  border: none !important;
}
.nsync-compare-table2 thead th {
  font-weight: 700 !important;
  color: #334155 !important;
  background: #f8fafc !important;
}
.nsync-compare-table2 thead th:last-child {
  color: #0ea5e9 !important;
  background: rgba(240,249,255,0.5) !important;
}
.nsync-compare-table2 tbody th {
  font-weight: 700 !important;
  color: #1e293b !important;
  background: rgba(248,250,252,0.3) !important;
}
.nsync-compare-table2 tbody td {
  font-weight: 700 !important;
  background: rgba(240,249,255,0.3) !important;
}
.nsync-compare-table2 tbody tr:nth-child(1) td:last-child,
.nsync-compare-table2 tbody tr:nth-child(2) td:last-child {
  color: #0f172a !important;
}
.nsync-compare-table2 tbody tr:nth-child(3) td:last-child {
  color: #0ea5e9 !important;
}
.nsync-compare-table2 thead {
  border-bottom: 1px solid #e2e8f0 !important;
}


/* ===== .nsync-role-panel: 非アクティブは初期非表示 (2026-07-30) ===== */
.nsync-role-panel:not(.is-active) {
  display: none !important;
}


/* ===== 02ページ 痛みカードのタイトル（ネイティブブロック化後） (2026-07-30) ===== */
p.nsync-card-title {
  color: #0ea5e9 !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}
.nsync-check-list {
  font-size: 0.6875rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
}


/* ===== 02ページ: ネイティブブロック化後の表示修正 (2026-07-30) ===== */
body.page-id-85 .page-content .nsync-check-list li {
  font-size: 0.6875rem !important;
  color: #475569 !important;
}
body.page-id-85 .page-content h4.wp-block-heading {
  text-align: left !important;
}
body.page-id-85 .nsync-role-panel .page-content p,
body.page-id-85 .nsync-role-panel p {
  text-align: left !important;
}
body.page-id-85 .nsync-role-panel h3 {
  text-align: left !important;
}
body.page-id-85 section:has(.nsync-role-tabs) {
  padding-top: clamp(3rem, 6vw, 5rem) !important;
}
.nsync-compare-table2 tbody tr:nth-child(1) td,
.nsync-compare-table2 tbody tr:nth-child(2) td {
  color: #1e293b !important;
}
.nsync-tabs__text p,
.nsync-tabs__text h3 {
  text-align: left !important;
}

body.page-id-85 h2:has(+ .nsync-role-tabs) {
  margin-bottom: 40px !important;
}

body.page-id-85 .page-content .nsync-check-list li {
  text-align: left !important;
}

body.page-id-85 p.text-xs.font-bold.text-slate-800,
body.page-id-85 p.text-xs.text-slate-800 {
  text-align: left !important;
}

body.page-id-85 h3.wp-block-heading:has(+ .nsync-tabs__panels), body.page-id-85 h3.wp-block-heading + .nsync-role-tabs, body.page-id-85 h2.wp-block-heading:has(+ .nsync-role-tabs) {
  margin-top: 0 !important;
}
body.page-id-85 h2.wp-block-heading:has(+ .nsync-role-tabs) + .nsync-role-tabs h3 {
  margin-top: 0 !important;
}
body.page-id-85 .nsync-role-panel h3 {
  margin-top: 0 !important;
}
body.page-id-85 h3.wp-block-heading:first-child {
  margin-top: 0 !important;
}

body.page-id-85 section.py-12 > h3.wp-block-heading,
body.page-id-85 section.py-12 > .wp-block-heading:first-child {
  margin-top: 0 !important;
}


/* ===== 02ページ: 入れ子になった背景セクションを全幅に (2026-07-30) ===== */
body.page-id-85 section.py-4.bg-slate-50,
body.page-id-85 section.py-12.bg-slate-50.px-4 {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
/* 痛みカードグリッドの下に余白を追加 */
body.page-id-85 h3.wp-block-heading:first-child + div.grid.md\:grid-cols-3 {
  margin-bottom: 3rem !important;
}


/* ===== 02ページ: 便利機能セクションの背景を復元・痛みカード見出し下余白・チェック上揃え (2026-07-30) ===== */
body.page-id-85 .wp-block-group.alignwide:has(h2.feature-h2) {
  background-color: rgb(248, 250, 252) !important;
}
body.page-id-85 h3.wp-block-heading:first-child {
  margin-bottom: 1.5rem !important;
}
body.page-id-85 .nsync-check-list li {
  align-items: flex-start !important;
}


/* ===== 02ページ: 便利機能セクションを全幅に・CTAとの間の余白を除去 (2026-07-30) ===== */
body.page-id-85 .wp-block-group.alignwide:has(h2.feature-h2) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-bottom: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 64px !important;
}
body.page-id-85 .wp-block-group.alignwide:has(h2.feature-h2) > .wp-block-group__inner-container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.page-id-85 .wp-block-group.alignwide:has(h2.feature-h2) *:last-child {
  margin-bottom: 0 !important;
}

body.page-id-85 section.py-12.bg-white.border-t.border-b.border-slate-100:has(h2.feature-h2) {
  padding-bottom: 0 !important;
}

body.page-id-85 p.text-xs.text-slate-500.leading-relaxed {
  text-align: left !important;
}


/* ===== 02ページ: 進行PM自動警告バッジ（ネイティブブロック化後） (2026-07-30) ===== */
p.nsync-pm-alert-badge {
  font-size: 10px !important;
  color: #0ea5e9 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  margin: 0 !important;
  display: inline-block !important;
}


/* ===== 02ページ: 期限超過・未紐づけバッジ（ネイティブブロック化後） (2026-07-30) ===== */
p.nsync-alert-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  margin: 0 !important;
  display: table !important;
  text-align: left !important;
}
p.nsync-alert-red {
  color: #0284c7 !important;
  background: #eff6ff !important;
}
p.nsync-alert-yellow {
  color: #475569 !important;
  background: #f1f5f9 !important;
}



body.page-id-85 h2.text-3xl.font-extrabold.text-slate-800 {
  text-align: left !important;
}


/* ===== 03ページ 比較表（ネイティブブロック化後） (2026-07-30) ===== */
.nsync-compare-table3 {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.75rem !important;
}
.nsync-compare-table3 th, .nsync-compare-table3 td {
  padding: 1rem !important;
  text-align: left !important;
  border: none !important;
}
.nsync-compare-table3 thead th {
  font-weight: 700 !important;
  color: #334155 !important;
  background: #f8fafc !important;
}
.nsync-compare-table3 thead th:last-child {
  color: #0ea5e9 !important;
  background: rgba(240,249,255,0.5) !important;
}
.nsync-compare-table3 tbody th {
  font-weight: 700 !important;
  color: #1e293b !important;
  background: rgba(248,250,252,0.3) !important;
}
.nsync-compare-table3 tbody td {
  font-weight: 700 !important;
  background: rgba(240,249,255,0.3) !important;
}
.nsync-compare-table3 tbody tr:nth-child(1) td:last-child,
.nsync-compare-table3 tbody tr:nth-child(2) td:last-child {
  color: #1e293b !important;
}
.nsync-compare-table3 tbody tr:nth-child(3) td:last-child {
  color: #0284c7 !important;
}

body.page-id-89 h4.nsync-waste-title,
body.page-id-89 .nsync-plain-card-title {
  margin-top: 0 !important;
}

.nsync-compare-table3 thead {
  border-bottom: 1px solid #e2e8f0 !important;
}


/* ===== 02/03ページ 比較表 2列目・3列目の文字色で01に合わせる (2026-07-30) ===== */
.nsync-compare-table2 tbody tr td:nth-child(2),
.nsync-compare-table2 tbody tr td:nth-child(3) {
  color: #475569 !important;
}
.nsync-compare-table3 tbody tr td:nth-child(2),
.nsync-compare-table3 tbody tr td:nth-child(3) {
  color: #475569 !important;
}

body .nsync-compare-table2 tbody tr td:nth-child(2),
body .nsync-compare-table2 tbody tr td:nth-child(3),
body .nsync-compare-table3 tbody tr td:nth-child(2),
body .nsync-compare-table3 tbody tr td:nth-child(3) {
  font-weight: 400 !important;
}

body.page-id-89 .nsync-check-list li {
  font-size: 0.88rem !important;
  text-align: left !important;
  align-items: flex-start !important;
}

body.page-id-89 h4.nsync-waste-title + p {
  font-size: 0.88rem !important;
  color: #475569 !important;
  line-height: 1.7 !important;
}


/* ===== フリニト・位素方の特長カードを本番と同じ比率に (2026-07-30) ===== */
body.home .nsync-feature-frame .grid.lg\:grid-cols-2 {
  grid-template-columns: 2fr 1fr !important;
}
body.home .nsync-feature-frame .grid.lg\:grid-cols-2:has(> :first-child img) {
  grid-template-columns: 1fr 2fr !important;
}


/* ===== page-id-76 アセット情報セクション　外側背景・上下余白 (2026-07-30) ===== */
.page-id-76 section.overflow-hidden:has(> div > .features-inner) {
  background-color: rgb(248, 250, 252) !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}


/* ===== 見出し→本文のワイプ表示に時差を付ける (2026-07-30) ===== */
p.nsync-text-target {
  transition-delay: 0.25s !important;
}

h1.nsync-hero-text {
  transition-delay: 0.2s !important;
}


/* ===== 表ブロックの縦スクロールバーを常に非表示に (2026-07-30) ===== */
.wp-block-table.nsync-compare-table,
.wp-block-table.nsync-compare-table2,
.wp-block-table.nsync-compare-table3 {
  overflow-y: hidden !important;
}


/* ===== トップページ「ご利用開始までの流れ」 4ステップを左から順に表示 (2026-07-30) ===== */
.nsync-step-flow-item:nth-child(1) {
  transition-delay: 0s !important;
}
.nsync-step-flow-item:nth-child(2) {
  transition-delay: 0.35s !important;
}
.nsync-step-flow-item:nth-child(3) {
  transition-delay: 0.7s !important;
}
.nsync-step-flow-item:nth-child(4) {
  transition-delay: 1.05s !important;
}


/* ===== セキュリティページ：左サイドナビ・リスト表示修正 (2026-07-30) ===== */
body.page-id-713 .stick_nav {
  position: sticky;
  top: 80px;
}
body.page-id-713 .stick_nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page-id-713 .stick_nav a {
  color: #000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: block;
  padding: 0.5rem 0;
}
body.page-id-713 .stick_nav a:hover,
body.page-id-713 .stick_nav a.active {
  color: #0ea5e9 !important;
}
body.page-id-713 .page-content ul:not(.stick_nav ul) {
  list-style: disc !important;
  padding-left: 1.5rem !important;
  margin: 1rem 0 !important;
}
body.page-id-713 .page-content li {
  margin-bottom: 0.5rem !important;
  line-height: 1.7 !important;
}
body.page-id-713 .page-content h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}
body.page-id-713 .page-content h1 {
  text-align: center !important;
}
body.page-id-713 .page-content > div > p:first-of-type {
  text-align: center !important;
  color: #64748b !important;
  margin-bottom: 4rem !important;
}
body.page-id-713 .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2rem !important;
  align-items: flex-start !important;
}
body.page-id-713 .wp-block-column[style*="flex-basis:20%"] {
  flex: 0 0 20% !important;
  max-width: 20% !important;
}
body.page-id-713 .wp-block-column:not([style*="flex-basis:20%"]) {
  flex: 1 1 0% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.stick_nav .nsync-fade-target,
.stick_nav li {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}


/* ===== セキュリティページ: 見出し・H1中夠・リスト・リンク修正 (2026-07-30) ===== */
body.page-id-713 .page-content h1 {
  display: block !important;
  width: 100% !important;
}
body.page-id-713 .page-content h2 {
  -webkit-text-fill-color: initial !important;
  background-image: none !important;
  color: #0f172a !important;
}
body.page-id-713 .page-content li::marker {
  color: #94a3b8 !important;
}
body.page-id-713 .page-content a:not(.stick_nav a) {
  color: #0ea5e9 !important;
  text-decoration: underline !important;
}

body.page-id-713 h1.wp-block-heading.has-text-align-center + p.has-text-align-center {
  margin-bottom: 4rem !important;
}

body.page-id-713 h1.wp-block-heading.has-text-align-center {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

body.page-id-713 .wp-block-column:not([style*="flex-basis:20%"]) > h2.wp-block-heading:first-child {
  margin-top: 0 !important;
}


/* ===== トライアルページ: フォーム説明テキスト・日付入力修正 (2026-07-30) ===== */
body.page-id-704 .wpcf7-form p.text-xs.text-slate-500 {
  font-size: 0.75rem !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  margin: 0.125rem 0 !important;
}
body.page-id-704 .wpcf7-form p.text-xs.text-slate-500 + p.text-xs.text-slate-500 {
  margin-top: 0 !important;
}
body.page-id-704 .wpcf7-form p.text-xs.text-slate-500:last-of-type {
  margin-bottom: 0.5rem !important;
}
body.page-id-704 .wpcf7-form input[type="date"] {
  padding: 0.5rem 0.75rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.375rem !important;
}
body.page-id-704 section:first-of-type {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
body.page-id-704 .wpcf7-form {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}


/* ===== 問い合わせ系ページ（お問い合わせ・トライアル・資料請求）: フッターCTAを非表示 (2026-07-30) ===== */
body.page-id-100 .nsync-cta-section,
body.page-id-704 .nsync-cta-section,
body.page-id-101 .nsync-cta-section {
  display: none !important;
}


/* ===== 問い合わせ系ページ: 背景色をコンテンツ全体に拡張 (2026-07-30) ===== */
body.page-id-100 .page-content,
body.page-id-704 .page-content {
  background: rgb(248, 250, 252) !important;
}
body.page-id-100 .page-content section,
body.page-id-704 .page-content section {
  background: transparent !important;
}
body.page-id-101 .page-content,
body.page-id-101 .page-content section {
  background: #fff !important;
}


/* ===== 問い合わせ系フォームカード: 全幅白背景をカード幅のみに修正 (2026-07-30) ===== */
body.page-id-704 .nsync-form-card,
body.page-id-100 .nsync-form-card,
body.page-id-1778 .nsync-form-card,
body.page-id-1775 .nsync-form-card,
body.page-id-1776 .nsync-form-card {
  max-width: 700px !important;
  margin: 0 auto !important;
}


/* ===== 資料請求ページ: 内側wpcf7のカードスタイルを打ち消し、外側のみ残す (2026-07-30) ===== */
body.page-id-101 .nsync-doc-form-card .wpcf7 {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}


/* ===== 資料請求ページ: フォームカード内見出し修正 (2026-07-30) ===== */
body.page-id-101 .nsync-doc-form-card h2 {
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: #0f172a !important;
  margin-top: 0 !important;
  border-bottom: none !important;
}
body.page-id-101 .nsync-doc-form-card input:not([type="checkbox"]):not([type="submit"]),
body.page-id-101 .nsync-doc-form-card select,
body.page-id-101 .nsync-doc-form-card textarea {
  background-color: #ffffff !important;
}


/* ===== フォーム送信ボタン: 有効時青、無効時グレーを確実に適用 (2026-07-30) ===== */
.wpcf7 input[type="submit"]:not(:disabled) {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}
.wpcf7 input[type="submit"]:disabled {
  background: #94a3b8 !important;
}


/* ===== センター揃え見出し（セクションタイトル）の下線を除去 (2026-07-30) ===== */
.page-template-default .page-content h2.has-text-align-center {
  border-bottom: none !important;
}


/* ===== .nsync-tabs自体のフェードインを確実に適用 (2026-07-30) ===== */
div.nsync-tabs.nsync-fade-target:not(.nsync-visible) {
  opacity: 0 !important;
  transform: translateY(32px) !important;
}
div.nsync-tabs.nsync-fade-target.nsync-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ===== terms-new (page-id-1777) — match DEV page-id-110 ===== */
body.page-id-1777 {
  background: none #fff !important;
}
body.page-id-1777 h1.feature-h2 {
  background: linear-gradient(97deg, #70fffa 0%, #0055ff 100%) text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: block !important;
  text-align: center !important;
}
body.page-id-1777 h3 {
  font-size: 16px !important;
  margin-bottom: 1rem !important;
}
body.page-id-1777 h3 + ul {
  margin-bottom: 3rem !important;
}
body.page-id-1777 .page-content h2 {
  background-image: none !important;
  -webkit-text-fill-color: initial !important;
  color: rgb(30, 41, 59) !important;
}

/* ===== security-new (page-id-1779) — match DEV page-id-713 ===== */
body.page-id-1779 .stick_nav {
  position: sticky;
  top: 80px;
}
body.page-id-1779 .stick_nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page-id-1779 .stick_nav a {
  display: block;
  padding: 0.5rem 0;
  color: #000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
body.page-id-1779 .stick_nav a:hover,
body.page-id-1779 .stick_nav a.active {
  color: #0ea5e9 !important;
}
body.page-id-1779 .page-content ul:not(.stick_nav ul) {
  list-style: disc !important;
  padding-left: 1.5rem !important;
  margin: 1rem 0 !important;
}
body.page-id-1779 .page-content li {
  margin-bottom: 0.5rem !important;
  line-height: 1.7 !important;
}
body.page-id-1779 .page-content h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.5rem !important;
  -webkit-text-fill-color: initial !important;
  background-image: none !important;
}
body.page-id-1779 .page-content h1 {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
body.page-id-1779 .page-content > div > p:first-of-type {
  text-align: center !important;
  color: #64748b !important;
  margin-bottom: 4rem !important;
}
body.page-id-1779 .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2rem !important;
  align-items: flex-start !important;
}
body.page-id-1779 .wp-block-column[style*="flex-basis:20%"] {
  flex: 0 0 20% !important;
  max-width: 20% !important;
}
body.page-id-1779 .wp-block-column:not([style*="flex-basis:20%"]) {
  flex: 1 1 0% !important;
  max-width: none !important;
  min-width: 0 !important;
}
body.page-id-1779 .wp-block-column:not([style*="flex-basis:20%"]) > h2.wp-block-heading:first-child {
  margin-top: 0 !important;
}
body.page-id-1779 .page-content li::marker {
  color: #94a3b8 !important;
}
body.page-id-1779 .page-content a:not(.stick_nav a) {
  color: #0ea5e9 !important;
  text-decoration: underline !important;
}
body.page-id-1779 h1.wp-block-heading.has-text-align-center + p.has-text-align-center {
  margin-bottom: 4rem !important;
}
body.page-id-1779 h1.wp-block-heading.has-text-align-center {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* price-new (本番) */
.page-id-1774 .price-b {
  font-size: 64.8px !important;
}
.page-id-1774 .price-n {
  font-size: 64.8px !important;
}

/* CF7 form input padding */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  padding: 8px !important;
}
/* contact page background fix */
body.page-id-1775 .page-content {
  background-color: #f8fafc !important;
}
body.page-id-1775 .page-content > section:first-child {
  background: none !important;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem !important;
}

/* form pages: back-to-top above reCAPTCHA */
body.page-id-1775 #page_top,
body.page-id-1776 #page_top,
body.page-id-1778 #page_top {
  bottom: 90px !important;
}

/* -------------------------------------------------------
 * Mobile responsive fixes (v1.15.52)
 * ------------------------------------------------------- */

/* Mobile header: logo left-aligned */
.mob-menu-logo-holder {
  text-align: left !important;
  display: flex !important;
  justify-content: flex-start !important;
}
.mob-menu-logo-holder .headertext {
  margin: 0 !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  /* Hero: prevent overflow */
  .home .page-content > section:first-of-type {
    overflow: hidden !important;
  }
  .home .page-content > section:first-of-type .container {
    overflow: hidden !important;
  }
  .home .page-content > section:first-of-type .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .home .page-content > section:first-of-type .grid > div:last-child {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .home .page-content > section:first-of-type .grid > div:last-child img,
  .home .page-content > section:first-of-type .grid > div:last-child canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Nsyncとは: video max-width */
  .wp-block-embed.is-type-video,
  .wp-block-embed.is-type-video .wp-block-embed__wrapper,
  .wp-block-embed.is-type-video iframe {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Nsyncの特長: stack vertically, full width */
  .nsync-feature-frame .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .nsync-feature-frame .grid > div {
    max-width: 100% !important;
    width: 100% !important;
  }
  .nsync-feature-frame .grid > div img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .nsync-feature-frame section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .nsync-feature-frame section .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}


/* ===== ニュース：サムネイル・テキストのフェード移動を無効化 ===== */
body.blog .post-card-title.nsync-fade-target:not(.nsync-visible),
body.category .post-card-title.nsync-fade-target:not(.nsync-visible),
body.home .post-card-title.nsync-fade-target:not(.nsync-visible) {
  opacity: 1 !important;
  transform: none !important;
}
body.blog .grid > div img.nsync-fade-target:not(.nsync-visible),
body.category .grid > div img.nsync-fade-target:not(.nsync-visible),
body.home .grid > div img.nsync-fade-target:not(.nsync-visible) {
  opacity: 1 !important;
  transform: none !important;
}


@media (max-width: 639px) {
  body.home .mt-10.flex > a {
    width: auto !important;
    text-align: center !important;
  }
}