/* style.css */

/* ベーススタイル */
body {
    font-family: 'Hiragino Mincho ProN', 'BIZ UDPMincho', 'Meiryo', serif; /* 明朝体を優先 */
    line-height: 1.8; /* 行の高さ */
    color: #333; /* 基本の文字色 */
    background-color: #FFFFFF; /* 背景色 */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* フォントのアンチエイリアス */
    text-rendering: optimizeLegibility; /* テキストのレンダリング品質最適化 */
}

/* コンテンツの最大幅と中央揃え */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px; /* 左右の余白 */
}

/* リンクのデフォルトスタイル */
a {
    color: #0056b3; /* リンクの色 */
    text-decoration: none; /* 下線なし */
}

a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* 画像の基本スタイル（レスポンシブ対応） */
img {
    max-width: 100%; /* 親要素からはみ出さない */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 不要な下余白を削除 */
}

/* ヘッダー */
.site-header {
    text-align: center;
    padding: 40px 0 20px;
    background-color: #DEDEDE; /* 薄い背景色 */
    border-bottom: 1px solid #eee; /* 下線 */
}

.site-header .header-icon {
    width: 60px; /* アイコンのサイズ */
    height: auto;
    margin-bottom: 10px;
    display: inline-block; /* タイトルと横並び */
    vertical-align: middle; /* 垂直方向中央揃え */
    margin-right: 10px;
}

.site-header h1 {
    font-size: 2.2em; /* タイトルサイズ */
    color: #333;
    margin: 0;
    padding: 0;
    display: inline-block; /* アイコンと横並び */
    vertical-align: middle;
}

/* 各セクションの共通スタイル */
section {
    padding: 40px 0;
    border-bottom: 1px solid #eee; /* 各セクションの区切り線 */
}

section:last-of-type {
    border-bottom: none; /* 最後のセクションには線なし */
}

h2 {
    font-size: 1.8em; /* セクション見出しのサイズ */
    color: #0056b3; /* 目立つ色 */
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0056b3; /* 下線 */
    display: inline-block; /* 下線の幅をテキストに合わせる */
    margin-left: auto;
    margin-right: auto;
}

/* イントロダクションセクション */
.intro-section p {
    font-size: 1.1em;
    margin-bottom: 1em;
    text-align: justify; /* 両端揃え */
}

.intro-section .highlight {
    color: #ff00a0; /* 元の強調色 */
    font-size: 1.2em; /* 元の強調サイズ */
    text-align: center;
    margin: 1.5em 0;
    font-weight: bold;
}

/* 実績セクション */
.achievements-section h2 {
    color: #000; /* 実績セクションの見出し色 */
    border-bottom-color: #000;
}

.achievements-list {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
}

.achievements-list li {
    margin-bottom: 0.8em;
    font-size: 1em;
    display: flex; /* 年と詳細を横並びに */
    flex-wrap: wrap; /* 画面が狭い場合は改行 */
}

.achievements-list .year {
    color: #333;
    font-weight: bold;
    flex-shrink: 0; /* 年号が縮小されないように */
    width: 60px; /* 年号の固定幅 */
    margin-right: 15px; /* 年号と詳細の間隔 */
}

.achievements-list .detail {
    flex-grow: 1; /* 詳細が残りのスペースを埋める */
}

.achievements-section .note {
    text-align: right;
    font-size: 0.9em;
    color: #666;
    margin-top: 20px;
}

/* Q&Aセクション */
.qa-section h2 {
    color: #000;
    border-bottom-color: #000;
}

.qa-section .qa-icon {
    width: 120px; /* Q&Aアイコンのサイズ */
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.qa-item {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #ccc; /* 質問間の区切り線 */
}

.qa-item:last-of-type {
    border-bottom: none; /* 最後のQ&Aには区切り線なし */
}

.qa-item .question {
    color: #0056b3; /* Qの文字色 */
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.qa-item .answer {
    color: #333; /* Aの文字色 */
    font-size: 1em;
    padding-left: 1.5em; /* インデント */
}

/* お問い合わせセクション */
.contact-section {
    text-align: center;
    background-color: #f8f8f8;
    padding: 50px 0;
}

.contact-section h2 {
    color: #000;
    border-bottom-color: #000;
}

.contact-section address {
    font-style: normal; /* 斜体を解除 */
    margin-top: 30px;
}

.contact-section address p {
    font-size: 1.1em;
    margin-bottom: 0.5em;
}

.contact-section address p strong {
    color: #8B4513; /* 元の茶色に近い色 */
    font-size: 1.2em;
}

.contact-section address a {
    font-weight: bold;
}

/* フッター */
.site-footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333; /* 暗い背景色 */
    color: #eee;
    font-size: 0.9em;
    border-top: 1px solid #444;
}

/* ====================================
   レスポンシブデザイン
   ==================================== */
/* 768px以下の画面幅に適用 (タブレット・スマートフォン横向きなど) */
@media (max-width: 768px) {
    .site-header h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.5em;
    }

    /* 各テキストのサイズを少し小さく */
    .intro-section p,
    .achievements-list li,
    .qa-item p,
    .contact-section address p {
        font-size: 0.95em;
    }

    .intro-section .highlight {
        font-size: 1.1em;
    }

    /* 実績リストの年号はスマホで改行 */
    .achievements-list .year {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.3em;
    }

    /* 実績リストのインデント */
    .achievements-list .detail {
        padding-left: 15px;
    }

    /* Q&Aの回答のインデントを調整 */
    .qa-item .answer {
        padding-left: 0; /* または小さく */
    }

    .contact-section {
        padding: 30px 0;
    }
}

/* 480px以下の画面幅に適用 (スマートフォン縦向きなど) */
@media (max-width: 480px) {
    .site-header h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.3em;
    }

    .intro-section p,
    .achievements-list li,
    .qa-item p,
    .contact-section address p {
        font-size: 0.9em;
    }

    .intro-section .highlight {
        font-size: 1em;
    }

    .container {
        padding: 0 15px; /* 左右の余白を少し減らす */
    }
}