/* --- 変数と基本設定 --- */
:root {
    /* 変更開始: プライマリカラーをユーザー指定の色に変更 */
    --primary-color: #ff58ae;
    --primary-hover-color: #ff2796;
    /* 変更終了 */
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --light-gray: #f8f9fa;
    --text-color: #343a40;
    --border-color: #dee2e6;
    --body-bg: #f4f7f6;
    --container-bg: #ffffff;
    --border-radius: 0.25rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    
    /* 変更開始: LP用カラー変数 */
    --lp-bg: #ffffff;
    --lp-hero-text: #212529;
    --lp-feature-bg: #f8f9fa;
    /* 変更終了 */
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0; /* body paddingを0に */
    background-color: var(--body-bg);
    color: var(--text-color);
    line-height: 1.6;
}

/* 変更開始: body paddingの調整 */
body:not(.lp-body) {
    padding: 2rem;
}
/* 変更終了 */

/* --- コンテナ --- */
.container {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.container-wide {
    max-width: 1100px; /* LP用に幅を広げる */
    padding: 0 1rem;
    margin: 0 auto;
    background-color: transparent;
    box-shadow: none;
    border: none;
}
.container-wide:not(.lp-body .container-wide) {
    /* 管理画面コンテナのスタイルを維持 */
    background-color: var(--container-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

/* --- ヘッダー・タイトル --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 {
    margin: 0;
    font-size: 1.75rem;
}
.header-nav a {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.9rem;
}
.header-nav a:hover { color: var(--primary-color); }

/* --- フォーム要素 --- */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-control { width: 100%; padding: 0.75rem; font-size: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); }
.instruction { font-size: 0.9rem; color: #6c757d; margin-top: .25rem; }


/* --- ボタン --- */
.btn { 
    display: inline-block; 
    padding: 0.75rem 1.5rem; 
    font-size: 1rem; 
    font-weight: 600; 
    text-align: center; 
    text-decoration: none; 
    color: #fff; 
    background-color: var(--primary-color); 
    border: 1px solid var(--primary-color); 
    border-radius: var(--border-radius); 
    cursor: pointer; 
    transition: background-color 0.15s ease-in-out, transform 0.15s ease; 
}
.btn:hover { 
    background-color: var(--primary-hover-color);
    transform: translateY(-1px);
}
.btn-secondary { background-color: #0087ff; border-color: #0087ff; }
.btn-secondary:hover { background-color: #006fd1; }
.btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); }
.btn-danger:hover { background-color: #c82333; }
/* 変更開始: Xシェアボタンのスタイルを追加 */
.btn-twitter {
    background-color: #14171A; /* X(Twitter)のブランドカラー */
    border-color: #14171A;
}
.btn-twitter:hover {
    background-color: #272c30; /* ホバー時少し明るく */
    border-color: #272c30;
}
/* 変更終了 */
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
/* 変更開始: LP用ボタンサイズ */
.btn-lg { padding: 1rem 2rem; font-size: 1.25rem; }
/* 変更終了 */


/* --- アラート・メッセージ --- */
.alert { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid transparent; border-radius: var(--border-radius); }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }

/* --- 管理画面レイアウト --- */
.toolbar { margin-bottom: 1.5rem; }
.content-split { display: flex; flex-wrap: wrap; gap: 2rem; }
.content-main { flex: 2; min-width: 300px; }
.content-side { flex: 1; min-width: 250px; }
.dashboard-menu .menu-buttons { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }

/* --- テーブル --- */
.data-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.data-table th, .data-table td { border: 1px solid var(--border-color); padding: 0.75rem; text-align: left; vertical-align: middle; }
.data-table thead { background-color: var(--light-gray); }
.data-table tbody tr:hover { background-color: #f1f1f1; }
.data-table .actions { display: flex; gap: 0.5rem; white-space: nowrap;}
.col-order { width: 80px; text-align: center;}
.cell-order { text-align: center; }
.cell-tags { font-size: 0.85rem; color: #666; }

/* --- 並び替えリスト --- */
.sortable-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border-color); border-radius: var(--border-radius); }
.sortable-list li { display: flex; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--border-color); background: #fff; }
.sortable-list li:last-child { border-bottom: 0; }
.sort-handle { cursor: grab; margin-right: 1rem; color: #aaa; }
.item-name { flex-grow: 1; }
.item-actions { display: flex; gap: 0.5rem; }
.sortable-ghost { opacity: 0.4; background: #cce5ff; }

/* --- タグチェックボックス --- */
.tag-checkbox-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; border: 1px solid var(--border-color); padding: 1rem; border-radius: var(--border-radius); }
.tag-checkbox-item { display: flex; align-items: center; gap: 0.5rem; }
.tag-checkbox-item input { margin-top: 0; }

/* --- WYSIWYGエディタ --- */
.wysiwyg-editor-container { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; }
.editor-toolbar { background-color: var(--light-gray); padding: 0.5rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 0.5rem; }
.editor-btn { background-color: #fff; border: 1px solid #ccc; border-radius: 3px; padding: 5px 10px; cursor: pointer; }
.wysiwyg-editor { padding: 1rem; min-height: 200px; outline: none; }
.wysiwyg-editor p { margin: 0 0 1em 0; }
.wysiwyg-editor p:last-child { margin-bottom: 0; }
.hidden-textarea { display: none !important; }

/* --- リンク・その他 --- */
a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 変更開始: ランディングページ（LP）専用スタイル */

.lp-body {
    background-color: var(--lp-bg);
}

/* --- LPヘッダー (ナビゲーション) --- */
.lp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}
.lp-logo-area {
    max-width: 180px;
}
.lp-logo {
    display: block;
    width: 100%;
    height: auto;
}
.header-nav {
    display: flex;
    gap: 0.5rem;
}

/* 変更開始: LPヘッダー内のボタンの文字色修正 (競合を解消し、両方正しく表示) */
/* 1. マイページ (ログイン時: ベタ塗り) */
.lp-header .header-nav .btn {
    /* .btnのデフォルトcolor: #fffを維持 */
}

/* 2. ログイン (未ログイン時: アウトライン) */
.lp-header .header-nav .btn-secondary {
    background-color: #fff;
    /* アウトラインボタンは青文字 */
    color: var(--primary-color); 
    border-color: var(--primary-color);
}
.lp-header .header-nav .btn-secondary:hover {
    background-color: var(--primary-color);
    /* ホバー時は白文字 */
    color: #fff;
    border-color: var(--primary-color);
}
/* 変更終了 */


/* --- ヒーローセクション --- */
.hero-section {
    text-align: center;
    padding: 3rem 1rem 4rem;
    background-color: var(--light-gray); /* 背景色で目立たせる */
    margin-bottom: 3rem;
}
.site-name {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin: 0 0 0.5rem 0;
}
.catchphrase {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-color);
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
}
.hero-description {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin: 0 0 2.5rem 0;
}
.hero-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* 変更開始: 文字を赤にする強調スタイル（傍点装飾は削除） */
.hero-description .text-emphasis {
    /* 傍点装飾を削除 */
    color: var(--danger-color); /* 文字を赤色に変更 */
    font-weight: 700;
}
/* 変更終了 */


/* --- 特徴セクション --- */
.feature-section {
    padding: 2rem 1rem 4rem;
    text-align: center;
}
.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3rem;
}
.feature-grid {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.feature-card {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
    padding: 2rem;
    background-color: var(--lp-feature-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: left;
}

/* 変更開始: タブレットでの不揃いな横並びを防ぐため、カードのサイズとレイアウトを調整 */
@media (min-width: 769px) and (max-width: 1100px) {
    /* 1100px以下769px以上（タブレット〜中間PC）では、3枚を均等に横並びにする */
    .feature-grid {
        gap: 1rem; /* 隙間を少し狭く */
    }
    .feature-card {
        flex: 1 1 30%; /* 33.33% - 隙間を確保しつつ、3つが綺麗に並ぶように調整 */
        min-width: 0; /* min-widthを0にしてflexの計算を優先 */
        max-width: none; /* max-widthを解除 */
    }
}
/* 変更終了 */

.feature-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    margin-bottom: 1rem;
}
.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.cta-bottom {
    padding-top: 2rem;
    border-top: 1px dashed var(--border-color);
}


/* 変更開始: アフィリエイト収益化フローセクションのスタイルとレスポンシブ対応 */
.affiliate-flow-section {
    /* 修正1: 横幅いっぱいの背景色とパディングを設定 */
    padding: 4rem 0; 
    text-align: center;
    background-color: #f0f0f0; 
}

.affiliate-flow-section .section-title {
    /* タイトルも中央コンテンツ幅に合わせるための調整 */
    max-width: 1100px;
    margin: 0 auto 3rem; /* 上下のマージンを調整 */
    padding: 0 1rem; /* 左右のパディングを確保 */
}

.flow-steps {
    /* 修正2: コンテンツの最大幅を設定し、中央寄せ */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem; /* 内側でパディングを確保 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 3rem;
}

.flow-step {
    flex: 1;
    max-width: 300px;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    min-height: 250px; /* 高さの揃え */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: var(--danger-color); 
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.flow-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--danger-color);
}

.flow-step p {
    font-size: 0.95rem;
    color: var(--secondary-color);
    margin: 0;
}

.flow-arrow {
    font-size: 3rem;
    color: var(--primary-color);
    align-self: center;
    margin-top: 2rem;
    font-weight: 900;
}

@media (max-width: 900px) {
    .flow-steps {
        /* 縦並びに変更 */
        flex-direction: column;
        /* 変更開始: 縦並びになった際のステップ間のマージンを確保 */
        gap: 1.5rem; 
        /* 変更終了 */
    }
    .flow-step {
        /* 変更開始: 縦並びになった際、幅を制限し中央寄せする（画面端に寄るのを防止） */
        max-width: 400px; 
        margin: 0 auto;
        /* 変更終了 */
        min-height: auto;
    }
    .flow-arrow {
        /* 矢印を縦向きに回転 */
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }
    .affiliate-flow-section .section-title {
        /* モバイルでタイトルとコンテンツの間にパディングを追加 */
        margin-bottom: 1rem; 
    }
}
/* 変更終了: アフィリエイト収益化フローセクションのスタイルとレスポンシブ対応 */


/* --- タグ機能セクション --- */
.tag-feature-section {
    background-color: var(--primary-color);
    color: #fff;
    padding: 4rem 1rem;
    text-align: center;
}
.section-title-light {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}
.tag-feature-section p {
    max-width: 800px;
    margin: 0 auto 2rem;
}
.feature-image {
    width: 100%;
    height: auto;
    max-width: 800px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- LPフッター --- */
.lp-footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid #ddd;
    font-size: 0.9rem;
    color: var(--secondary-color);
}
.lp-footer a {
    color: var(--secondary-color);
    text-decoration: underline;
    margin: 0 0.5rem;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
    .catchphrase {
        font-size: 1.75rem;
    }
    .hero-cta-buttons {
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }
    .btn-lg {
        width: 100%;
        max-width: 300px;
    }
    /* 変更開始: 768px以下ではフィーチャーカードを強制的に中央寄せで縦並びにする */
    .feature-card {
        min-width: 100%; /* 縦並びを確定 */
        max-width: 400px; /* カードの最大幅を設定 */
        margin: 0 auto; /* カードを中央寄せ */
        flex: none; /* flexの計算を無効化 */
    }
    /* 変更終了 */
}
/* 変更終了 */

/* 変更開始: 管理画面のスマートフォン対応 */
@media (max-width: 768px) {
    body:not(.lp-body) {
        padding: 1rem; /* bodyの余白を縮小 */
    }

    .container,
    .container-wide:not(.lp-body .container-wide) {
        padding: 1rem; /* コンテナの内側余白を縮小 */
    }

    .page-header {
        flex-direction: column; /* ヘッダー要素を縦並びに */
        align-items: flex-start; /* 左寄せに */
        gap: 0.75rem;
    }

    .page-header h1 {
        font-size: 1.5rem; /* タイトルのフォントサイズを調整 */
    }

    .wysiwyg-editor {
        min-height: 250px; /* スマホでは高さを少し多めに確保 */
    }

    /* 変更開始: テーブルのレスポンシブ対応 */
    .data-table {
        display: block; /* テーブルをブロック要素として扱い、overflowを有効にする */
        width: 100%;
        overflow-x: auto; /* 内容がはみ出た場合に横スクロールを許可 */
        -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを有効に */
    }

    .data-table th,
    .data-table td {
        white-space: nowrap; /* セル内でテキストが改行されるのを防ぐ */
    }
    /* 変更終了 */
}
/* 変更終了 */