@charset "utf-8";

/* ---------------------- main -------------------------------- */
main {
  width: 75%;
  margin-inline: auto;
  padding: 32px 0;
  display: grid;
  gap: 12px 0;
  color: #333;
  background-color: #fbfbfb;
  > h1 {
    padding: 16px;
    font-size: clamp(0.75rem, 0.55rem + 1vw, 1.75rem);
  }
  > ul {
    display: grid;
    gap: 8px 0;
    padding: 16px;
    > .postBox {
      > a {
        color: #333;
        font-size: clamp(0.625rem, 0.45rem + 0.88vw, 1.5rem);
        font-weight: bold;
      }
      > p {
        font-size: clamp(0.625rem, 0.5rem + 0.63vw, 1.25rem);
      }
    }
  }
}

/* ---------------------- article（基本スタイル） -------------------------------- */
article {
  width: 75%;
  margin-inline: auto;
  padding: 32px 0;
  display: grid;
  gap: 12px 0;
  color: #333;
  background-color: #fbfbfb;
  > h1 {
    font-size: clamp(0.75rem, 0.55rem + 1vw, 1.75rem);
  }
  > div {
    display: grid;
    gap: 8px 0;
    > p {
      font-size: clamp(0.625rem, 0.5rem + 0.63vw, 1.25rem);
    }
  }
}

/* ==========================================================================
   汎用記事スタイル強化 - 全ての記事ページで使用
   ========================================================================== */

/* 記事全体の基本スタイル強化 */
article {
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
    line-height: 1.8; /* 読みやすい行間 */
    /* max-width設定を削除して幅制限を解除 */
}

/* ==========================================================================
   見出しスタイル（階層的デザイン）
   ========================================================================== */

/* H1: メインタイトル - 薄い黄色系グラデーション背景で目立たせる */
article h1 {
    color: #2c5aa0; /* 信頼感のあるブルー */
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); /* レスポンシブサイズ */
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); /* 薄い黄色系グラデーション */
    border-left: 5px solid #2c5aa0; /* アクセントボーダー */
    border-radius: 5px; /* 角丸で柔らかい印象 */
    box-shadow: 0 2px 4px rgba(44, 90, 160, 0.1); /* 軽い影で立体感 */
}

/* H2: セクションタイトル - 薄い黄色背景で区別 */
article h2 {
    color: #2c5aa0;
    font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
    margin-top: 40px; /* 上部に余白でセクション区切り */
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #fef9e7; /* 薄い黄色背景 */
    border-left: 4px solid #2c5aa0;
    border-radius: 3px;
    position: relative;
}

/* H2に装飾的な要素を追加 */
article h2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-top: 20px solid rgba(251, 191, 36, 0.2); /* 黄色系の装飾 */
}

/* H3: サブセクション - 薄い赤系 */
article h3 {
    color: #1a365d; /* 少し濃いブルー */
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.3rem);
    margin-top: 30px;
    margin-bottom: 15px;
    padding: 10px 15px;
    background-color: #ffe5e5; /* 薄い赤系背景 */
    border-left: 3px solid #4a90a4; /* 中間色のアクセント */
    border-radius: 2px;
}

/* H4: 小見出し - 濃いグレー */
article h4 {
    color: #2d3748; /* グレー系 */
    font-size: clamp(1rem, 0.8rem + 0.8vw, 1.1rem);
    margin-top: 25px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background-color: #ebebeb; /* 濃いグレー */
    border-left: 2px solid #7c8ba1;
    font-weight: 600;
}

/* ==========================================================================
   テキストとリストのスタイル
   ========================================================================== */

/* 段落: 読みやすさを重視 */
article p {
    margin-bottom: 15px;
    text-align: justify; /* 両端揃え */
    font-size: clamp(0.875rem, 0.7rem + 0.8vw, 1rem);
    color: #333;
    word-break: break-all; /* 長い単語の改行対応 */
}

/* リスト: 見やすいスタイル */
article ul, 
article ol {
    margin: 15px 0;
    padding-left: 25px;
}

article li {
    margin-bottom: 8px;
    font-size: clamp(0.875rem, 0.7rem + 0.8vw, 1rem);
    line-height: 1.7;
}

/* ネストしたリストの調整 */
article ul ul,
article ol ol,
article ul ol,
article ol ul {
    margin: 8px 0;
    padding-left: 20px;
}

/* ==========================================================================
   強調とインライン要素
   ========================================================================== */

/* 強調テキスト: 目立つ赤色 */
article strong {
    color: #c53030; /* 注意を引く赤 */
    font-weight: bold;
}

/* 斜体 */
article em {
    font-style: italic;
    color: #4a5568;
}

/* マーカー（ハイライト）効果 */
article mark {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 2px;
}

/* ==========================================================================
   テーブルスタイル（シンプル版）
   ========================================================================== */

article table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
    font-size: clamp(0.75rem, 0.65rem + 0.5vw, 0.9rem);
}

article th {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: white;
    font-weight: bold;
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

article td {
    padding: 12px;
    border: 1px solid #ddd;
    color: #333;
}

/* ==========================================================================
   リンクスタイル（洗練されたデザイン）
   ========================================================================== */

article a {
    color: #2c5aa0;
    text-decoration: none;
    border-bottom: 1px dotted #2c5aa0;
    transition: all 0.3s ease; /* スムーズな変化 */
    position: relative;
}

/* リンクホバー効果 */
article a:hover {
    color: #1a365d;
    border-bottom: 1px solid #1a365d;
}

/* 外部リンクアイコン */
article a[href^="http"]:not([href*="your-domain.com"])::after {
    content: ' ↗';
    font-size: 0.8em;
    color: #718096;
}

/* ==========================================================================
   情報ボックス（シンプル版）
   ========================================================================== */

/* 情報ボックス: シンプルな背景のみ */
article .info-box {
    background-color: #fffbeb;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}

article .important-info {
    background-color: #fff5f5;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}

/* ==========================================================================
   FAQセクション（シンプル版）
   ========================================================================== */

article .faq-item {
    margin-bottom: 20px;
    background-color: white;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

article .faq-question {
    font-weight: bold;
    margin-bottom: 8px;
    color: #2c5aa0;
}

article .faq-answer {
    color: #333;
}

/* ==========================================================================
   追加の装飾要素
   ========================================================================== */

/* 引用ブロック - シンプル版 */
article blockquote {
    border-left: 4px solid #2c5aa0;
    margin: 25px 0;
    padding: 15px 20px;
    background-color: #fffbeb;
    font-style: italic;
}

/* コードブロック */
article pre {
    background-color: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 20px 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* インラインコード */
article code {
    background-color: #f4f4f4;
    color: #d63384;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* プリフォーマット内のコードは別スタイル */
article pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* 水平線 - シンプル版 */
article hr {
    border: none;
    height: 1px;
    background-color: #e2e8f0;
    margin: 30px 0;
}

/* ==========================================================================
   ボタンスタイル
   ========================================================================== */

/* 無料相談ボタン */
article .consultation-btn {
    display: inline-block;
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1rem);
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(234, 88, 12, 0.3);
    border: none;
    cursor: pointer;
    margin: 20px 0;
}

article .consultation-btn:hover {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(234, 88, 12, 0.4);
    color: white;
    border-bottom: none;
}

/* ボタンコンテナ（中央寄せ用） */
article .btn-container {
    text-align: center;
    margin: 30px 0;
}

/* --------------------- マウスホバー ---------------------- */
/* transition */
:is(.phone, .mail).hoverScale {
  transition: scale 0.3s;
}
:is(.postBox).hoverBgColor {
  transition: background-color 0.3s;
}
/*  */
@media (any-hover: hover) {
  :is(.phone, .mail).hoverScale:hover {
    scale: 1.05;
  }
  :is(.postBox).hoverBgColor:hover {
    background-color: #e3f4f8;
  }
}

/* ==========================================================================
   メディアクエリ（レスポンシブ対応）
   ========================================================================== */
@media (width <= 520px) {
  main {
    width: 90%;
  }
  article {
    width: 90%;
    padding: 20px 0; /* モバイルでのパディング調整 */
  }
  
  /* モバイル用見出し調整 */
  article h1,
  article h2,
  article h3,
  article h4 {
    padding: 10px 15px;
  }
  
  /* モバイル用テーブル調整 */
  article table {
    font-size: 0.7rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  article th, 
  article td {
    padding: 8px 6px;
    min-width: 80px;
  }
  
  /* モバイル用情報ボックス調整 */
  article .info-box,
  article .important-info {
    padding: 15px;
    margin: 15px 0;
  }
  
  /* モバイル用FAQ調整 */
  article .faq-question,
  article .faq-answer {
    padding: 15px;
  }
  
  /* モバイル用引用ブロック調整 */
  article blockquote {
    padding: 15px 20px;
    margin: 20px 0;
  }
}

/* ---------------------- Blog Post List ---------------------- */
.post-list {
    display: grid;
    gap: 24px;
    padding: 16px;
}

.post-card {
    display: flex;
    align-items: center; /* 画像とテキストを中央揃え */
    gap: 16px;
    text-decoration: none;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.post-card-thumbnail {
    flex-shrink: 0;
    width: 18%; /* 固定幅 */
}

.post-card-thumbnail img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover; /* アスペクト比を維持してトリミング */
}

.post-card-content {
    padding: 16px;
    display: grid;
    gap: 8px;
}

.post-card-content h2 {
    font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    font-weight: bold;
    margin: 0;
    padding: 0;
    border: none; /* 既存のh2スタイルを上書き */
    background: none; /* 既存のh2スタイルを上書き */
}

.post-card-content p {
    font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1rem);
    margin: 0;
}

/* レスポンシブ対応 */
@media (width <= 768px) {
    .post-card {
        flex-direction: column;
    }

    .post-card-thumbnail {
        width: 100%;
        height: 180px; /* 高さを調整 */
    }
}