/*
Theme Name: Nsync Theme
Author: Your Name
Description: A custom theme based on the Nsync service site prototype.
Version: 1.0
*/

/* 元の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; }