/* =================================================================
    Webツール用 maincontent
================================================================= */

/* ベースレイアウト */
.wt-stage-wrapper {
    background-color: #f0f4f8; /* 薄い青グレー */
    padding: 60px 20px;
    border-bottom: 1px solid #e1e4e8;
}
.wt-content-wrapper {
    background-color: #ffffff;
    padding: 60px 20px;
}
.wt-container {
    margin-right: auto;
    margin-left: auto;
}
.wt-wide { max-width: 1200px; } /* ツールは広く */
.wt-narrow { max-width: 800px; } /* 文章は読みやすく狭く */

/* コンポーネント (使い回せるデザイン) */
.wt-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #333;
}
.wt-input-group {
    display: flex;
    gap: 10px;
    max-width: 700px;
    margin: 0 auto 30px;
}
.wt-input {
    flex: 1;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}
.wt-btn-primary {
    padding: 15px 30px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.wt-btn-primary:hover { background-color: #005177; }

.wt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* コーヒーセクション */
.wt-coffee-section {
    text-align: center;
    margin-top: 50px;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.wt-btn-coffee {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #FFDD00;
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}




/* ==========================================================
   ツール更新履歴 & ロードマップ用スタイル
   ========================================================== */

/* ■ コンテナ：全体の幅や余白調整 */
.tool-timeline-container {
    max-width: 800px;       /* 記事幅に合わせるなら100%でもOK */
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}

/* ■ タイムラインの縦線ラッパー */
.timeline-wrapper {
    position: relative;
    padding-left: 30px;     /* 左側のスペース確保 */
    margin-left: 10px;      /* スマホで見切れないよう少し余白 */
}

/* 縦線（グレーの棒） */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 14px;              /* ドットの中心に合わせる位置 */
    top: 5px;
    bottom: 0;              /* 下まで伸ばす */
    width: 4px;
    background: #e9ecef;    /* 線の色 */
    border-radius: 2px;
}

/* ■ 各アイテム（記事・ログ）の枠 */
.timeline-item {
    position: relative;
    margin-bottom: 40px;    /* アイテム同士の間隔 */
}

/* 最後のアイテムは下の余白を消す */
.timeline-item:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------
   ドット（丸ポチ）のデザイン定義
   ---------------------------------------------------------- */

/* 基本のドット（デフォルト：青） */
.timeline-line-dot {
    position: absolute;
    left: -22px;            /* 縦線の中央に来るよう調整 */
    top: 6px;               /* タイトルの高さに合わせて微調整 */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff; /* 白フチで線から浮き上がらせる */
    background-color: #1E88E5; 
    box-shadow: 0 0 0 3px #1E88E5; /* 外側の色リング */
    z-index: 1;
}

/* タイプ別カラー設定 */

/* 新機能・リリース (緑) */
.timeline-item.log-new .timeline-line-dot {
    background-color: #28a745;
    box-shadow: 0 0 0 3px #28a745;
}

/* 修正・バグフィックス (オレンジ) */
.timeline-item.log-fixed .timeline-line-dot {
    background-color: #f57c00;
    box-shadow: 0 0 0 3px #f57c00;
}

/* マイルストーン・重要 (金/黄色) */
.timeline-item.log-milestone .timeline-line-dot {
    background-color: #FFD700;
    box-shadow: 0 0 0 3px #FFD700;
}

/* 未来・ロードマップ (グレー・中抜き) */
/* まだ完了していない予定感を出します */
.timeline-item.log-future .timeline-line-dot {
    background-color: #fff;     /* 中は白 */
    border: 2px solid #6c757d;  /* フチはグレー */
    box-shadow: 0 0 0 3px #6c757d;
}

/* ----------------------------------------------------------
   コンテンツ部分のデザイン
   ---------------------------------------------------------- */
/* 日付 */
.timeline-date {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 5px;
    line-height: 1.2;
}

/* 未来の日付は少し強調（任意） */
.timeline-item.log-future .timeline-date {
    color: #1E88E5;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* タイトル */
.timeline-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
    color: #333;
}

/* 本文・詳細 */
.timeline-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

/* Ko-fiなどのiframeがはみ出ないようにする */
.timeline-content iframe {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 10px;
}