@charset "utf-8";

/* ==========================================================================
   1. 変数定義 & 基本設定
   ========================================================================== */
:root {
    --main-navy: #1a2a3a;
    --accent-gold: #c5a059;
    --bg-white: #ffffff;
    --bg-light: #f4f6f8;
    --text-main: #222222;
    --text-sub: #555555;
    --border-color: #e0e0e0;
    
    /* ▼▼▼ 修正: 幅を1200pxから1000pxに変更 ▼▼▼ */
    --max-width: 1000px; 
}

* {
    box-sizing: border-box;
}

/* --- メインコンテンツの幅を制限する共通コンテナ --- */
/* ▼▼▼ 修正: 幅を1000pxに変更し、左右の余白も確保 ▼▼▼ */
.container,
.blogger-hero .hero-content,
.blogger-benefits,
.active-projects,
.writing-guide,
.payment-schedule,
.faq-section,
.form-container {
    max-width: 1000px; /* ここを1200pxから1000pxに変更 */
    margin-left: auto;
    margin-right: auto;
    width: 95%; /* PCでも画面端にベタッとつかないように95%指定 */
}

/* 読みやすさのため、文章やフォームはさらに少し絞る（ここは変更なしでOK） */
.guide-container,
.faq-container,
.standard-form,
.payment-notes {
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
}

/* 実績数字やカードが横に並ぶ際の設定（PC用） */
@media screen and (min-width: 769px) {
    .project-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3枚並べる */
        gap: 20px;
    }
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    color: var(--text-main);
    line-height: 1.8;
    background-color: var(--bg-white);
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}
/* 共通コンテナの設定 */
.container {
    width: 100%;
    max-width: 1200px; /* ここで最大幅を制限 */
    margin: 0 auto;    /* 中央寄せ */
    padding: 0 20px;   /* スマホ時の左右余白 */
}

/* PC表示でメリットや案件を横に並べる設定 */
@media screen and (min-width: 769px) {
    .benefit-grid,
    .project-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3カラム並列 */
        gap: 30px;
    }
}
/* ==========================================================================
   2. ヘッダー (header.php)
   ========================================================================== */
.site-header {
    display: flex;
    justify-content: center; /* 子要素（container）を中央に寄せる */
    width: 100%;
    align-items: center;
    padding: 0 20px;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}
/* ヘッダーの中身（ここで幅を止める） */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1000px; /* ★ここでPC時の最大幅を固定 */
    height: 70px;
    padding: 0 20px;   /* 左右に最低限の余白 */
}
.logo {
    text-decoration: none;
    color: var(--main-navy);
}

.en-name {
    display: block;
    font-size: 10px;
    letter-spacing: 0.3em;
    font-weight: 300;
}

.logo {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.cta-button-s {
    background: var(--main-navy);
    color: #fff;
    padding: 10px 18px;
    border-radius: 2px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   3. メインコンテンツ (index.php)
   ========================================================================== */

/* ヒーローセクション */
.hero {
    padding: 80px 24px;
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), 
                url('https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&w=800&q=80');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.hero-subline {
    display: block;
    font-size: 14px;
    color: var(--accent-gold);
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    font-weight: 600;
}

.hero-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 28px;
    line-height: 1.5;
    margin: 0 0 25px;
    font-weight: 700;
}

.highlight {
    background: linear-gradient(transparent 70%, #f0e6d2 70%);
}

.hero-text {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 35px;
}

.cta-main {
    display: inline-block;
    background: var(--main-navy);
    color: #fff;
    padding: 18px 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(26,42,58,0.2);
}

/* 実績数字セクション */
.stats-section {
    background: var(--main-navy);
    color: #fff;
    padding: 40px 0;
}

.stats-container {
    display: flex;
    justify-content: space-around;
}

.stat-item {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}

.stat-number {
    font-family: 'Noto Serif JP', serif;
    font-size: 36px;
    color: var(--accent-gold);
    font-weight: 600;
}

.stat-number small {
    font-size: 14px;
    color: #fff;
    margin-left: 2px;
}

/* 見出しの共通装飾 */
.section-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 24px;
    text-align: center;
    color: var(--main-navy);
    margin: 60px 0 40px;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--accent-gold);
}

/* 特徴カード */
.features { padding-bottom: 40px; }
.feature-card {
    margin: 0 20px 30px;
    background: var(--bg-light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.feature-img {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.feature-info {
    padding: 24px;
}

.feature-info h3 {
    font-family: 'Noto Serif JP', serif;
    margin-top: 0;
    font-size: 18px;
    color: var(--main-navy);
}

.feature-info p {
    font-size: 14px;
    margin-bottom: 0;
    color: var(--text-sub);
}

/* 導入事例 */
.case-item {
    margin: 0 20px 20px;
    padding: 24px;
    border-left: 4px solid var(--accent-gold);
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.case-tag {
    font-size: 11px;
    color: var(--accent-gold);
    font-weight: bold;
    letter-spacing: 0.05em;
}

.case-item h4 {
    margin: 12px 0;
    font-size: 16px;
    line-height: 1.5;
}

.case-detail {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 0;
}

/* お問い合わせ導線 */
.contact-lead {
    padding: 80px 20px;
}

.contact-box {
    text-align: center;
    border: 1px solid var(--accent-gold);
    padding: 50px 20px;
    background: #fff;
}

.contact-box h2 {
    font-family: 'Noto Serif JP', serif;
    font-size: 24px;
    letter-spacing: 0.2em;
    margin-top: 0;
}

.contact-box p {
    font-size: 14px;
    margin-bottom: 30px;
}

.cta-gold {
    display: inline-block;
    background: var(--accent-gold);
    color: #fff;
    padding: 18px 40px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   4. フッター (footer.php)
   ========================================================================== */
.site-footer {
    background: var(--main-navy);
    color: #fff;
    padding: 60px 24px 30px;
}

.footer-info {
    text-align: center;
    margin-bottom: 40px;
}

.footer-logo {
    font-family: 'Noto Serif JP', serif;
    font-size: 24px;
    margin-bottom: 15px;
    letter-spacing: 0.2em;
}

.footer-address {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.8;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 48%;
}

.footer-nav li {
    margin-bottom: 12px;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    opacity: 0.7;
}

.copyright {
    text-align: center;
    font-size: 10px;
    margin-top: 50px;
    opacity: 0.4;
    letter-spacing: 0.1em;
}
/* お問い合わせフォーム */
.contact-form-section,.standard-form-section {
    padding: 40px 20px;
    background: #fff;
}

.standard-form {
    max-width: 600px;
    margin: 40px auto;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--main-navy);
}

.required {
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 10px;
    vertical-align: middle;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 0; /* 大手感を出すため角丸にしない */
    background: #fafafa;
    font-size: 16px; /* スマホでズームされないサイズ */
    font-family: inherit;
}

.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: #fff;
}

.form-submit {
    text-align: center;
    margin-top: 40px;
}

.form-submit .cta-gold {
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
}
/* ブロガー向けヒーロー（少し明るいイメージ） */
.blogger-hero {
    padding: 80px 24px;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), 
                url('https://images.unsplash.com/photo-1492724441997-5dc865305da7?auto=format&fit=crop&w=800&q=80');
    background-size: cover;
    background-position: center;
    text-align: center;
}

/* メリットセクション */
.blogger-benefits {
    padding: 40px 20px;
    background: #fff;
}
.benefit-item {
    margin-bottom: 40px;
    padding: 30px 20px;
    background: var(--bg-light);
    border-radius: 8px;
    position: relative;
    text-align: center;
}
.benefit-num {
    display: block;
    font-size: 40px;
    font-family: 'Noto Serif JP', serif;
    color: var(--accent-gold);
    opacity: 0.3;
    margin-bottom: -20px;
}
.benefit-item h3 {
    font-family: 'Noto Serif JP', serif;
    color: var(--main-navy);
    font-size: 18px;
    margin-bottom: 15px;
}

/* チェックボックス・セレクトボックス */
.checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #fafafa;
    padding: 15px;
    border: 1px solid var(--border-color);
}
.checkbox-group label {
    font-size: 14px;
    font-weight: normal;
}
select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    background: #fafafa;
    font-size: 16px;
}

.register-section {
    padding-bottom: 60px;
}
/* 募集中の案件セクション */
.active-projects {
    padding: 60px 20px;
    background-color: var(--bg-light);
}

.section-intro {
    text-align: center;
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 30px;
}

.project-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative;
    border: 1px solid var(--border-color);
}

.project-tag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--main-navy);
    color: #fff;
    font-size: 10px;
    padding: 4px 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.project-content {
    padding: 25px 20px;
}

.project-content .category {
    font-size: 11px;
    color: var(--accent-gold);
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

.project-content h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    margin: 0 0 10px;
    line-height: 1.4;
    color: var(--main-navy);
}

.project-description {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 20px;
    line-height: 1.6;
}

.reward-box {
    background: #fff9ed;
    border: 1px dashed var(--accent-gold);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reward-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-main);
}

.reward-price {
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    color: var(--accent-gold);
    font-weight: bold;
}

.reward-price small {
    font-size: 11px;
    color: var(--text-sub);
}

.notice-text {
    text-align: center;
    font-size: 12px;
    margin-top: 25px;
    color: var(--text-sub);
}
/* 記事の書き方セクション */
.writing-guide {
    padding: 60px 20px;
    background-color: #fff;
}

.guide-container {
    max-width: 500px;
    margin: 0 auto;
}

.guide-step {
    margin-bottom: 35px;
    padding-left: 20px;
    border-left: 1px solid var(--accent-gold);
    position: relative;
}

.step-badge {
    font-size: 10px;
    font-weight: bold;
    color: var(--accent-gold);
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.guide-step h3 {
    font-size: 17px;
    margin: 0 0 10px;
    color: var(--main-navy);
}

.guide-step p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
}

/* テンプレートサンプル */
.template-sample {
    margin-top: 50px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 25px 20px;
}

.template-header {
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    color: var(--main-navy);
    margin-bottom: 20px;
    font-size: 16px;
}

.template-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.template-list li {
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.template-list li span {
    background: var(--main-navy);
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}

.yakki-notice {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}

.yakki-notice p {
    font-size: 11px;
    color: #c0392b; /* 注意を促すための落ち着いた赤 */
    line-height: 1.4;
    text-align: center;
}
/* 報酬スケジュール */
.payment-schedule {
    padding: 60px 20px;
    background-color: var(--bg-white);
}

.schedule-container {
    margin-top: 40px;
    position: relative;
}

/* タイムラインの縦棒 */
.schedule-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 2px;
    height: 100%;
    background: var(--border-color);
}

.schedule-box {
    display: flex;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.schedule-icon {
    flex-shrink: 0;
    width: 42px;
}

.icon-circle {
    width: 42px;
    height: 42px;
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: 'Noto Serif JP', serif;
    color: var(--text-sub);
    font-size: 14px;
}

/* 振込日（最後のステップ）を目立たせる */
.schedule-box.active .icon-circle {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.schedule-text {
    padding-left: 20px;
}

.schedule-text h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--main-navy);
}

.schedule-text p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    margin: 0;
}

.schedule-text small {
    font-size: 11px;
    opacity: 0.8;
}

/* 補足事項 */
.payment-notes {
    margin-top: 30px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 4px;
}

.note-list {
    margin: 0;
    padding-left: 18px;
    list-style-type: square;
}

.note-list li {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 8px;
}
/* FAQセクション */
.faq-section {
    padding: 60px 20px;
    background-color: var(--bg-light);
}

.faq-container {
    max-width: 600px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.faq-question {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.faq-q {
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--accent-gold);
    margin-right: 15px;
}

.faq-question h3 {
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
    color: var(--main-navy);
}

.faq-answer {
    padding: 0 20px 20px 53px; /* Qの幅＋マージン分をインデント */
    border-top: none;
}

.faq-answer p {
    font-size: 13px;
    color: var(--text-sub);
    margin: 0;
    line-height: 1.6;
}

/* アコーディオンのように見せるためのホバー効果（任意） */
.faq-item:hover {
    border-color: var(--accent-gold);
}
/* ラジオボタングループの装飾 */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fafafa;
    padding: 15px;
    border: 1px solid var(--border-color);
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
    padding: 10px;
    background: #fff;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

/* ラジオボタンが選択された時の枠線強調（任意） */
.radio-label:has(input:checked) {
    border-color: var(--accent-gold);
    background: #fffdf9;
}

.radio-label input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px;
    accent-color: var(--accent-gold); /* ゴールドのアクセントカラー */
    flex-shrink: 0;
}

.radio-text {
    line-height: 1.4;
}
/* 振込先情報の装飾 */
.form-bank-section {
    margin-top: 40px;
    padding: 25px;
    background: #f8f9fa; /* わずかに色を変えて「別セクション」であることを示す */
    border: 1px solid #e9ecef;
}

.form-sub-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    color: var(--main-navy);
    margin-bottom: 10px;
    text-align: center;
}

.form-notice {
    font-size: 11px;
    color: #e74c3c;
    text-align: center;
    margin-bottom: 20px;
}

/* 横並びのラジオボタン（口座種別用） */
.radio-group-horizontal {
    display: flex;
    gap: 30px;
    background: #fff;
    padding: 12px;
    border: 1px solid var(--border-color);
}

.radio-label-inline {
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-label-inline input {
    margin-right: 8px;
    width: 18px !important;
    height: 18px !important;
}
/* 規約セクション */
.terms-section {
    margin-top: 40px;
    padding: 0 5px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--main-navy);
}

.terms-box {
    height: 150px; /* スクロールが出る高さに設定 */
    overflow-y: scroll;
    border: 1px solid var(--border-color);
    background: #fdfdfd;
    padding: 15px;
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.6;
}

.terms-box h4 {
    margin-top: 0;
    color: var(--main-navy);
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

/* スクロールバーのカスタマイズ（スマホで見やすく） */
.terms-box::-webkit-scrollbar {
    width: 6px;
}
.terms-box::-webkit-scrollbar-thumb {
    background-color: var(--main-navy);
    border-radius: 10px;
}

/* 同意チェックボックス */
.terms-agreement {
    margin-top: 20px;
    text-align: center;
}

.checkbox-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: var(--main-navy);
}

.checkbox-container input {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px;
    accent-color: var(--main-navy);
    cursor: pointer;
}

.agreement-text {
    line-height: 1;
}

/* 送信ボタンとの間隔調整 */
.form-submit {
    margin-top: 30px;
}
/* サンクスページ */
.thanks-section {
    padding: 80px 20px;
    text-align: center;
    background: #fff;
}

.check-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-gold);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 30px;
}

.thanks-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    color: var(--main-navy);
    margin-bottom: 20px;
}

.thanks-message {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.8;
}

.next-step-box {
    margin: 50px auto;
    max-width: 500px;
    background: var(--bg-light);
    padding: 30px 20px;
    border-radius: 8px;
}

.next-step-box h3 {
    font-size: 16px;
    color: var(--main-navy);
    margin-bottom: 25px;
}

.step-card {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: left;
    border-left: 4px solid var(--border-color);
}

.step-card.highlight {
    border-left-color: var(--accent-gold);
}

.step-num {
    font-size: 10px;
    font-weight: bold;
    color: var(--accent-gold);
    display: block;
    margin-bottom: 5px;
}

.step-card h4 {
    font-size: 15px;
    margin: 0 0 10px;
}

.step-card p {
    font-size: 12px;
    margin: 0;
    line-height: 1.6;
}

.thanks-sub-text {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 30px;
}

.cta-outline {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid var(--main-navy);
    color: var(--main-navy);
    text-decoration: none;
    font-size: 14px;
}
/* サンクスページ内の報告リンク */
.report-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background-color: var(--main-navy);
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
}

.report-link:hover {
    opacity: 0.8;
}

.step-card.highlight {
    border-left: 4px solid var(--accent-gold);
    background: #fffdf9; /* ほんのりゴールド系の背景で強調 */
}
/* プライバシーポリシー */
.privacy-section {
    padding: 80px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.privacy-intro {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-sub);
    margin-bottom: 40px;
}

.privacy-content h3 {
    font-size: 16px;
    color: var(--main-navy);
    border-left: 3px solid var(--accent-gold);
    padding-left: 15px;
    margin: 40px 0 20px;
}

.privacy-content p, .privacy-content li {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-sub);
    margin-bottom: 15px;
}

.privacy-content ul {
    padding-left: 20px;
    margin-bottom: 30px;
}

.contact-address {
    background: var(--bg-light);
    padding: 20px;
    border-radius: 4px;
    margin-top: 20px;
}
/* 記事詳細ページ */
.news-article {
    padding: 60px 20px;
    max-width: 700px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 30px;
    text-align: center;
}

.article-date {
    font-size: 13px;
    color: var(--accent-gold);
    font-weight: bold;
    letter-spacing: 0.1em;
}

.article-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 24px;
    color: var(--main-navy);
    line-height: 1.5;
    margin-top: 10px;
}

.article-visual {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--main-navy) 0%, var(--accent-gold) 100%);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    border-radius: 4px;
}

.article-body h3 {
    font-size: 18px;
    color: var(--main-navy);
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 10px;
    margin: 40px 0 20px;
}

.article-body p, .article-body li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-sub);
    margin-bottom: 20px;
}

/* 誘導セクション */
.bottom-cta {
    background: var(--bg-light);
    padding: 60px 20px;
    text-align: center;
}

.bottom-cta h3 {
    font-size: 20px;
    color: var(--main-navy);
    margin-bottom: 10px;
}

.bottom-cta p {
    font-size: 14px;
    margin-bottom: 30px;
}
/* コピー用タグセクション */
.copy-tag-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}

.copy-label {
    display: block;
    font-size: 11px;
    color: var(--text-sub);
    margin-bottom: 8px;
    font-weight: bold;
}

.copy-area {
    display: flex;
    gap: 5px;
}

.copy-area input {
    flex: 1;
    font-size: 12px !important;
    padding: 8px !important;
    background: #f0f0f0;
    border: 1px solid #ddd !important;
    color: #666;
    font-family: monospace; /* コードっぽく見せる */
}

.copy-area button {
    background: var(--main-navy);
    color: #fff;
    border: none;
    padding: 0 15px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
}

.copy-area button:active {
    background: var(--accent-gold);
}
/* ==========================================================================
   スマホ表示・フォームのレスポンシブ修正
   ========================================================================== */

/* 1. フォーム全体のコンテナに左右の余白を確保 */
.register-section {
    padding: 60px 20px; /* 左右に20pxのパディングを追加 */
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    width: 100%; /* 幅を100%に指定 */
}

/* 2. 入力欄が親要素からはみ出さないように修正 */
.standard-form input[type="text"],
.standard-form input[type="email"],
.standard-form input[type="url"],
.standard-form input[type="number"],
.standard-form select,
.standard-form textarea {
    width: 100% !important; /* 横幅を強制的に100%に */
    max-width: 100%;
    box-sizing: border-box; /* パディングを含めた幅計算にする */
    margin-bottom: 5px;
}

/* 3. ラジオボタングループの余白とはみ出し防止 */
.radio-group, 
.radio-group-horizontal,
.checkbox-group {
    width: 100%;
    box-sizing: border-box;
    padding: 15px; /* 内側の余白 */
}

/* 4. 銀行情報セクションのはみ出し防止 */
.form-bank-section {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin-left: 0;
    margin-right: 0;
}

/* 5. 規約ボックスのはみ出し防止 */
.terms-box {
    width: 100%;
    box-sizing: border-box;
}

/* 6. スマホ専用の微調整（メディアクエリ） */
@media screen and (max-width: 480px) {
    .register-section {
        padding: 40px 15px; /* さらに狭い画面では余白を少し詰める */
    }
    
    .form-sub-title {
        font-size: 16px;
    }
    
    .radio-label {
        font-size: 13px; /* テキストが長い場合に備えて少し小さく */
        padding: 8px;
    }
    
    .radio-group-horizontal {
        flex-direction: column; /* 横並びが厳しい場合は縦並びに */
        gap: 10px;
    }
}

/* ==========================================================================
   案件カード内のコピーエリア修正
   ========================================================================== */
.copy-area {
    display: flex;
    gap: 5px;
    width: 100%;
}

.copy-area input {
    flex: 1;
    min-width: 0; /* flexアイテムのはみ出し防止 */
    font-size: 12px !important;
}

.copy-area button {
    flex-shrink: 0;
}
/* 案件カード内のリンクボタン */
.cta-project {
    display: block;
    width: 100%;
    text-align: center;
    background-color: transparent;
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold);
    padding: 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.cta-project:hover {
    background-color: var(--accent-gold);
    color: #fff;
}

/* カードの中身を縦に綺麗に並べるための調整 */
.project-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ボタンをカードの最下部に固定したい場合（任意） */
.cta-project {
    margin-top: ; 
}
.form-address-section {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

/* 郵便番号入力を少し短くする */
input[name="zip_code"] {
    max-width: 150px;
}
/* ======================================= */
/* アメブロ風サンプル記事スタイル */
/* ======================================= */
.sample-post-section {
    background-color: #f9f9f9;
    padding: 40px 20px;
    margin-top: 40px;
    border-radius: 10px;
}

/* アメブロの外枠（スキン） */
.ameblo-style-box {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    max-width: 600px; /* スマホで見やすい幅 */
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

/* ヘッダー周り */
.ameblo-header {
    margin-bottom: 20px;
    border-bottom: 1px dashed #cccccc;
    padding-bottom: 15px;
}
.ameblo-theme {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 5px;
}
.ameblo-entry-title {
    font-size: 20px;
    color: #2cb696; /* アメブロっぽいグリーン */
    margin: 0 0 10px 0;
    font-weight: bold;
}
.ameblo-date {
    font-size: 12px;
    color: #999;
}

/* 本文エリア */
.ameblo-entry-body {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}
.ameblo-entry-body p {
    margin-bottom: 10px; /* アメブロ特有の改行間隔 */
}

/* 商品リンク（Pick風デザイン） */
.ameblo-pick-box {
    border: 2px solid #2cb696; /* 目立つ枠線 */
    background-color: #fafffd;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    margin: 20px 0;
}
.ameblo-link-btn {
    display: inline-block;
    background-color: #ea5514; /* リンクを目立たせるオレンジ */
    color: #ffffff !important;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 30px;
    margin-top: 10px;
    box-shadow: 0 4px 0 #c14008; /* 立体的なボタン */
    transition: transform 0.1s, box-shadow 0.1s;
}
.ameblo-link-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* フッター（いいねボタン風） */
.ameblo-footer {
    border-top: 1px dashed #cccccc;
    padding-top: 15px;
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.ameblo-btn {
    font-size: 12px;
    color: #2cb696;
    border: 1px solid #2cb696;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: default;
}
/* ======================================= */
/* アメブロ風ブログカード（リンクカード） */
/* ======================================= */
.ameblo-link-card {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background-color: #fff;
    margin: 20px 0;
    overflow: hidden;
    transition: background-color 0.2s;
}
.ameblo-link-card:hover {
    background-color: #f9f9f9;
}
.ameblo-link-card a {
    display: flex;
    text-decoration: none;
    color: #333;
    align-items: center;
    height: 120px; /* カードの高さ固定 */
}

/* 左側の画像エリア */
.ameblo-card-img {
    width: 120px;
    height: 120px;
    flex-shrink: 0; /* 幅を固定 */
    border-right: 1px solid #f0f0f0;
}
.ameblo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいにトリミング */
}

/* 右側のテキストエリア */
.ameblo-card-text {
    padding: 10px 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* タイトル */
.ameblo-card-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 5px 0;
    line-height: 1.4;
    color: #333;
    
    /* 2行で省略する処理 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 説明文 */
.ameblo-card-desc {
    font-size: 11px;
    color: #888;
    margin: 0 0 5px 0;
    line-height: 1.4;
    
    /* 1行で省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* ドメイン名 */
.ameblo-card-host {
    font-size: 10px;
    color: #aaa;
}

/* スマホ表示調整（画面が狭い場合） */
@media (max-width: 480px) {
    .ameblo-link-card a {
        height: 100px;
    }
    .ameblo-card-img {
        width: 100px;
        height: 100px;
    }
    .ameblo-card-title {
        font-size: 13px;
    }
}
/* ======================================= */
/* 共通動作：スムーススクロール */
/* ======================================= */
html {
    scroll-behavior: smooth;
    /* ヘッダーが固定されている場合、その分ずらす設定（必要に応じて調整） */
    scroll-padding-top: 80px; 
}

/* ======================================= */
/* ページ内目次（TOC） */
/* ======================================= */
.toc-section {
    padding: 30px 0;
    background-color: #fcfcfc;
}
.toc-box {
    background-color: #ffffff;
    border: 2px solid #1a2a3a;
    border-radius: 8px;
    padding: 25px;
    max-width: 700px;
    margin: 0 auto; /* 中央寄せ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.toc-title {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #1a2a3a;
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 横並びにして、幅が足りなければ折り返す */
    justify-content: space-between;
}
.toc-list li {
    width: 48%; /* 2列表示 */
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
    box-sizing: border-box;
}
.toc-list li::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 10px;
    color: #d9534f;
}
.toc-list li a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;
    transition: color 0.3s;
}
.toc-list li a:hover {
    color: #d9534f;
    text-decoration: underline;
}

/* スマホ対応：1列にする */
@media (max-width: 600px) {
    .toc-list li {
        width: 100%;
        margin-bottom: 12px;
        border-bottom: 1px dotted #eee;
        padding-bottom: 5px;
    }
}
/* ======================================= */
/* 契約者様専用ページ (contractor.php) */
/* ======================================= */

/* ヒーローエリア */
.contractor-hero {
    background-color: #333; /* 暗い背景 */
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 40px;
}
.contractor-hero .hero-title {
    font-size: 2em;
    margin-bottom: 10px;
    color: #ffcc00; /* ゴールドのタイトル */
}
/* ⬇️ ここを修正：文字色を強制的に白(#fff)に指定 */
.hero-text-white {
    color: #ffffff !important; 
    line-height: 1.6;
}

/* メインコンテンツ幅 */
.main-contractor-content {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 80px;
}

/* ステップフロー */
.step-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}
.step-item {
    text-align: center;
}
.step-label {
    display: block;
    background: #004d99;
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}
.step-item p {
    margin: 0;
    font-weight: bold;
    font-size: 14px;
}
/* ⬇️ ここを修正：アイコンの色とサイズ調整 */
.step-arrow {
    margin: 0 20px;
    color: #ccc;
    font-size: 1.2em;
}

/* 見出し小 */
.section-title-s {
    border-left: 5px solid #004d99;
    padding-left: 15px;
    font-size: 1.5em;
    color: #333;
    margin-bottom: 15px;
    margin-top: 0;
}

/* 各セクションの余白 */
.tool-section, .sample-section, .action-section {
    margin-bottom: 60px;
}

/* リンクコピーボックス */
.link-copy-box {
    background: #eef7ff;
    padding: 25px;
    border: 2px dashed #004d99;
    border-radius: 8px;
    text-align: center;
}
.link-copy-box label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #004d99;
}
.input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}
.input-group input {
    flex-grow: 1;
    padding: 10px;
    font-size: 1.1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #555;
}
.copy-btn {
    background: #004d99;
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.copy-btn:hover {
    opacity: 0.8;
}
.note-text {
    font-size: 0.85em;
    color: #666;
    margin-top: 10px;
}

/* 報告ボタン */
.report-cta-btn {
    display: block;
    background: #d9534f; /* 目立つ赤系 */
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: bold;
    padding: 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(217, 83, 79, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 400px;
    margin: 30px auto 0;
}
.report-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(217, 83, 79, 0.4);
    background: #c9302c;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .step-arrow { margin: 0 5px; }
    .step-item p { font-size: 11px; }
    .input-group { flex-direction: column; }
    .copy-btn { padding: 12px; width: 100%; }
}
/* ======================================= */
/* 案件カード内の条件表示（最低/最大執筆回数） */
/* ======================================= */
.condition-group {
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 5px 15px;
}
.condition-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9em;
}
/* 1行目と2行目の間に境界線を入れる */
.condition-row:not(:last-child) {
    border-bottom: 1px dotted #e0e0e0;
}
.condition-label {
    font-weight: bold;
    color: #555;
    background-color: #eee;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85em;
}
.condition-value {
    font-weight: bold;
    color: #333;
}