/* ========================================
   ブログ共通CSS
   k-nacksミント×ゴールドテーマ統一
======================================== */

:root {
    --blog-mint:     #50C9CE;
    --blog-mint-dark:#2EB8BD;
    --blog-grad:     linear-gradient(135deg, #2EB8BD 0%, #50C9CE 50%, #28A745 100%);
    --blog-gold:     #C8960A;
    --blog-bg:       #F8FFFE;
}

.blog-page { background: var(--blog-bg); }

/* ========================================
   ブログヒーロー（一覧ページ）
======================================== */
.blog-hero {
    background: var(--blog-grad);
    padding: 120px 0 60px;
    text-align: center;
    position: relative;
}
.blog-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 40px;
    background: var(--blog-bg);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.blog-hero-label {
    font-family: var(--font-accent);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 15px;
}
.blog-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    text-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.blog-highlight {
    color: rgba(255,255,255,0.9);
    border-bottom: 3px solid rgba(255,255,255,0.5);
    padding-bottom: 3px;
}
.blog-hero-sub {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
}

/* ========================================
   レイアウト：2カラム
======================================== */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
    padding: 60px 0 80px;
    align-items: start;
}

/* ========================================
   カテゴリフィルター
======================================== */
.blog-categories {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}
.cat-btn {
    padding: 8px 22px;
    border: 2px solid var(--blog-mint);
    background: white;
    color: var(--blog-mint);
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-main);
}
.cat-btn:hover,
.cat-btn.active {
    background: var(--blog-grad);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(80,201,206,0.3);
}

/* ========================================
   記事カード一覧
======================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(80,201,206,0.18);
}
.blog-card a { color: inherit; }
.blog-card-img { position: relative; }
.blog-card-img-placeholder {
    width: 100%; height: 160px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: white;
}
.blog-card-cat {
    position: absolute; bottom: 10px; left: 12px;
    padding: 4px 14px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 700; color: white;
}
.blog-card-body { padding: 20px; }
.blog-card-date { font-size: 0.85rem; color: var(--text-light); margin-bottom: 8px; }
.blog-card-date i { margin-right: 5px; color: var(--blog-mint); }
.blog-card-title { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); line-height: 1.5; margin-bottom: 10px; }
.blog-card-excerpt { font-size: 0.9rem; color: var(--text-light); line-height: 1.7; margin-bottom: 15px; }
.blog-card-more { font-size: 0.9rem; font-weight: 600; color: var(--blog-mint); }
.blog-card-more i { margin-left: 5px; transition: transform 0.3s; }
.blog-card:hover .blog-card-more i { transform: translateX(4px); }

/* 記事なし */
.blog-empty {
    text-align: center; padding: 60px 20px;
    color: var(--text-light); grid-column: 1 / -1;
}
.blog-empty i { font-size: 3rem; color: var(--blog-mint); margin-bottom: 15px; display: block; }

/* ========================================
   カテゴリカラー
======================================== */
.whitening-grad { background: linear-gradient(135deg, #2EB8BD, #28A745); }
.datsumou-grad  { background: linear-gradient(135deg, #8B6914, #C8960A); }
.salon-grad     { background: linear-gradient(135deg, #FF6B9D, #C44569); }

.whitening-cat { background: var(--blog-mint); }
.datsumou-cat  { background: var(--blog-gold); }
.salon-cat     { background: #FF6B9D; }

/* ========================================
   サイドバー
======================================== */
.blog-sidebar { position: sticky; top: 100px; }
.sidebar-widget {
    background: white; border-radius: 16px;
    padding: 25px; margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
}
.sidebar-title {
    font-size: 1.05rem; font-weight: 700; color: var(--text-dark);
    margin-bottom: 18px; padding-bottom: 12px;
    border-bottom: 2px solid var(--blog-mint);
    display: flex; align-items: center; gap: 8px;
}
.sidebar-title i { color: var(--blog-mint); }
.sidebar-cats { list-style: none; }
.sidebar-cats li { margin-bottom: 10px; }
.sidebar-cats a {
    color: var(--text-light); font-size: 0.95rem;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px;
    transition: all 0.3s;
}
.sidebar-cats a:hover { background: rgba(80,201,206,0.08); color: var(--blog-mint); }
.sidebar-cats i { color: var(--blog-mint); width: 16px; }

.sidebar-reserve { background: var(--blog-grad); }
.sidebar-reserve .sidebar-title { color: white; border-bottom-color: rgba(255,255,255,0.3); }
.sidebar-reserve .sidebar-title i { color: white; }
.sidebar-reserve-price {
    color: rgba(255,255,255,0.9); font-size: 0.95rem;
    margin-bottom: 10px; line-height: 1.6;
}
.sidebar-reserve-price strong { font-size: 1.6rem; color: white; }
.sidebar-reserve-price small { font-size: 0.85rem; }
.sidebar-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: white; color: var(--blog-mint-dark);
    padding: 12px; border-radius: 30px; font-weight: 700;
    font-size: 1rem; margin-top: 15px;
    transition: all 0.3s; text-decoration: none;
}
.sidebar-btn:hover { transform: scale(1.03); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }

.sidebar-tel {
    display: block; font-size: 1.3rem; font-weight: 700;
    color: var(--blog-mint); text-align: center;
    padding: 10px; border: 2px solid var(--blog-mint);
    border-radius: 10px; transition: all 0.3s;
}
.sidebar-tel:hover { background: var(--blog-mint); color: white; }

/* ========================================
   記事ページ
======================================== */
.post-main { min-width: 0; }

/* パンくず */
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.88rem; color: var(--text-light);
    margin-bottom: 30px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--blog-mint); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb i { font-size: 0.7rem; color: #ccc; }

/* 記事ヘッダー */
.post-header { margin-bottom: 40px; }
.post-cat {
    display: inline-block; padding: 5px 16px; border-radius: 20px;
    font-size: 0.85rem; font-weight: 700; color: white; margin-bottom: 15px;
}
.post-title {
    font-size: 2rem; font-weight: 700; color: var(--text-dark);
    line-height: 1.45; margin-bottom: 15px;
}
.post-meta {
    display: flex; gap: 20px; color: var(--text-light);
    font-size: 0.9rem; margin-bottom: 25px;
}
.post-meta i { color: var(--blog-mint); margin-right: 5px; }
.post-hero-img {
    width: 100%; height: 200px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: rgba(255,255,255,0.9);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.post-hero-photo {
    width: 100%; height: 200px; border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 記事本文 */
.post-body { font-size: 1.05rem; line-height: 1.9; color: var(--text-dark); }
.post-lead {
    font-size: 1.1rem; line-height: 1.9; color: var(--text-light);
    background: rgba(80,201,206,0.06); border-left: 4px solid var(--blog-mint);
    padding: 20px 25px; border-radius: 0 10px 10px 0; margin-bottom: 35px;
}
.post-body p { margin-bottom: 20px; }

/* 目次 */
.post-toc {
    background: #F8FFFE; border: 2px solid var(--blog-mint);
    border-radius: 12px; padding: 25px 30px; margin-bottom: 35px;
}
.toc-title {
    font-weight: 700; color: var(--text-dark); margin-bottom: 15px;
    display: flex; align-items: center; gap: 8px;
}
.toc-title i { color: var(--blog-mint); }
.post-toc ol { padding-left: 20px; }
.post-toc li { margin-bottom: 8px; }
.post-toc a { color: var(--blog-mint); font-size: 0.95rem; }
.post-toc a:hover { text-decoration: underline; }

/* 見出し */
.post-body h2 {
    font-size: 1.4rem; font-weight: 700; color: var(--text-dark);
    margin: 40px 0 20px; padding: 15px 20px;
    background: linear-gradient(135deg, rgba(80,201,206,0.08), rgba(40,167,69,0.04));
    border-left: 5px solid var(--blog-mint);
    border-radius: 0 10px 10px 0;
    display: flex; align-items: center; gap: 12px;
}
.post-h2-num {
    font-family: var(--font-accent); font-size: 1rem;
    font-weight: 700; color: white;
    background: var(--blog-grad);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.post-body h3 {
    font-size: 1.15rem; font-weight: 700; color: var(--text-dark);
    margin: 30px 0 15px; padding-bottom: 8px;
    border-bottom: 2px dashed rgba(80,201,206,0.4);
}

/* ボックス */
.post-box {
    background: #F8FFFE; border: 2px solid rgba(80,201,206,0.3);
    border-radius: 12px; padding: 20px 25px; margin: 20px 0;
}
.post-box-mint {
    background: rgba(80,201,206,0.06); border-color: var(--blog-mint);
}
.post-box-caution {
    background: rgba(255,180,0,0.06); border-color: #FFC107;
}
.post-box-caution i { color: #F39C12; }

/* チェックリスト */
.post-checklist { list-style: none; padding: 0; }
.post-checklist li {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 10px; font-size: 1rem;
}
.post-checklist i { color: var(--blog-mint); margin-top: 3px; flex-shrink: 0; }

/* 注釈 */
.post-note {
    font-size: 0.95rem; color: var(--text-light);
    background: rgba(80,201,206,0.05); padding: 12px 18px;
    border-radius: 8px; margin: 15px 0;
}
.post-note i { color: var(--blog-mint); margin-right: 6px; }

/* ステップ */
.post-steps { margin: 25px 0; }
.post-step {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 20px 0; border-bottom: 1px solid #f0f0f0;
}
.post-step:last-child { border-bottom: none; }
.post-step-num {
    font-family: var(--font-accent); font-size: 0.85rem; font-weight: 700;
    background: var(--blog-grad); color: white;
    min-width: 44px; height: 44px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 12px rgba(80,201,206,0.35);
}
.post-step-body h4 {
    font-size: 1.05rem; font-weight: 700; color: var(--text-dark);
    margin-bottom: 6px;
}
.post-step-body p { font-size: 0.97rem; color: var(--text-light); margin: 0; }

/* CTAボックス */
.post-cta {
    background: var(--blog-grad); border-radius: 20px;
    padding: 40px 35px; text-align: center; margin: 50px 0 30px;
    box-shadow: 0 15px 40px rgba(80,201,206,0.3);
}
.post-cta-text { font-size: 1.1rem; color: rgba(255,255,255,0.9); margin-bottom: 8px; }
.post-cta-price {
    font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 25px;
}
.post-cta-price strong { font-size: 1.6rem; color: white; }
.post-cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: white; color: var(--blog-mint-dark);
    padding: 15px 35px; border-radius: 50px;
    font-size: 1.05rem; font-weight: 700;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    transition: all 0.3s; text-decoration: none; margin-bottom: 15px;
}
.post-cta-btn:hover { transform: scale(1.04); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.post-cta-btn-sub {
    display: block; color: rgba(255,255,255,0.85);
    font-size: 0.95rem; text-decoration: underline;
    transition: color 0.3s;
}
.post-cta-btn-sub:hover { color: white; }

/* 記事フッター */
.post-footer { margin-top: 40px; padding-top: 30px; border-top: 2px solid #f0f0f0; }
.post-back {
    color: var(--blog-mint); font-weight: 600; font-size: 0.95rem;
    display: inline-flex; align-items: center; gap: 8px;
    transition: gap 0.3s;
}
.post-back:hover { gap: 12px; }

/* トップへ戻る（ブログ用） */
.back-to-top-blog {
    position: fixed; bottom: 30px; right: 30px;
    width: 50px; height: 50px;
    background: var(--blog-grad); color: white;
    border: none; border-radius: 50%; font-size: 1.2rem;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    box-shadow: 0 5px 20px rgba(80,201,206,0.4);
    transition: all 0.3s; z-index: 1000;
}
.back-to-top-blog:hover { transform: translateY(-3px); }
.back-to-top-blog.visible { display: flex; }

/* ========================================
   新記事カード追加ガイド（コメント参照）
======================================== */
/*
  新しい記事を追加するには：
  1. post-template.htmlをコピーして post-002.html などにリネーム
  2. blog/index.html の blog-grid 内に以下をコピペして内容を変更：

  <article class="blog-card" data-cat="whitening">  ← カテゴリ変更
    <a href="post-002.html">                         ← ファイル名変更
      <div class="blog-card-img">
        <div class="blog-card-img-placeholder whitening-grad">
          <i class="fas fa-tooth"></i>               ← アイコン変更
        </div>
        <span class="blog-card-cat whitening-cat">ホワイトニング</span>
      </div>
      <div class="blog-card-body">
        <p class="blog-card-date"><i class="fas fa-calendar-alt"></i> 20XX年X月</p>
        <h2 class="blog-card-title">記事タイトル</h2>
        <p class="blog-card-excerpt">記事の要約（2〜3文）</p>
        <span class="blog-card-more">続きを読む <i class="fas fa-arrow-right"></i></span>
      </div>
    </a>
  </article>
*/

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 1024px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .blog-hero-title { font-size: 2rem; }
    .blog-grid { grid-template-columns: 1fr; }
    .post-title { font-size: 1.5rem; }
    .post-body h2 { font-size: 1.2rem; }
    .post-cta { padding: 30px 20px; }
    .blog-categories { gap: 8px; }
}
@media (max-width: 480px) {
    .blog-hero-title { font-size: 1.6rem; }
    .post-step { flex-direction: column; gap: 10px; }
}

/* ========================================
   補完クラス
======================================== */
.blog-main { min-width: 0; }

.skip-to-content {
    position: absolute; top: -40px; left: 0;
    background: var(--blog-mint); color: white;
    padding: 8px 16px; z-index: 9999;
    transition: top 0.3s;
}
.skip-to-content:focus { top: 0; }

.footer-info, .footer-links {
    display: flex; flex-direction: column;
}
.footer-info p, .footer-links ul li a {
    color: rgba(255,255,255,0.75); font-size: 0.95rem; line-height: 1.8;
}
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links ul li { margin-bottom: 8px; }
.footer-links ul li a:hover { color: white; }
.footer-links h4 { color: white; font-size: 1.05rem; margin-bottom: 15px; }

.post-step-body { flex: 1; }

.back-to-top {
    position: fixed; bottom: 30px; right: 30px;
    width: 50px; height: 50px;
    background: var(--blog-grad); color: white;
    border: none; border-radius: 50%; font-size: 1.2rem;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    box-shadow: 0 5px 20px rgba(80,201,206,0.4);
    transition: all 0.3s; z-index: 1000;
}
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top.visible { display: flex; }