/* ===================================================================
   しぶや行政書士事務所 公式サイト スタイルシート
   =================================================================== */

/* --- 1. 基本設定とカラーパレット --- */
:root {
    --primary-color: #3A5E85;      /* ネイビーブルー (基調色) */
    --accent-color: #C3A56A;       /* ゴールドベージュ (アクセント色) */
    --text-color-dark: #1A202C;    /* 濃いテキスト色 */
    --text-color: #333;            /* 標準テキスト色 */
    --text-color-light: #5a5a5a;   /* 薄いテキスト色 */
    --bg-color: #FDFDFD;           /* 基本背景色 */
    --bg-light: #F5F7FA;           /* 明るい背景色 */
    --border-color: #e2e8f0;       /* 境界線色 */
    --positive-color: #28a745;     /* ポジティブな表現 (緑) */
    --negative-color: #dc3545;     /* ネガティブな表現 (赤) */
    --font-sans: 'Noto Sans JP', sans-serif;  /* ゴシック体 */
    --font-serif: 'Noto Serif JP', serif; /* 明朝体 */
}

/* --- 2. グローバルスタイルとリセット --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    line-height: 1.8;
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: var(--primary-color); transition: color 0.3s ease; }
a:hover { color: var(--accent-color); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
.container { width: 90%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* --- 3. 共通コンポーネント --- */
#header { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
#header.scrolled { background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
#header .container { display: flex; justify-content: space-between; align-items: center; }
#header .logo a { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; color: var(--text-color-dark); }
#header nav ul { display: flex; gap: 24px; } /* 項目が増えたためgapを調整 */
#header nav a { color: var(--text-color-light); font-weight: 500; font-size: 0.88rem; padding-bottom: 5px; position: relative; } /* 微調整 */
#header nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-color); transition: width 0.3s ease; }
#header nav a:hover, #header nav a.active { color: var(--primary-color); }
#header nav a:hover::after, #header nav a.active::after { width: 100%; }
main { padding-top: 85px; } /* ヘッダーの高さ分 */
.btn { display: inline-block; padding: 12px 28px; border-radius: 8px; font-weight: 700; transition: all 0.3s ease; border: 2px solid transparent; text-align: center; }
.btn i { margin-right: 8px; }
.btn-hero { background-color: var(--accent-color); color: var(--text-color-dark); border-color: var(--accent-color); }
.btn-hero:hover { background-color: transparent; color: var(--accent-color); transform: translateY(-2px); }
.btn-primary { background-color: var(--primary-color); color: #fff; box-shadow: 0 4px 15px rgba(58, 94, 133, 0.2); }
.btn-primary:hover { background-color: #2c4a6c; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(58, 94, 133, 0.3); }
.content-section { padding: 100px 0; }
.bg-light { background-color: var(--bg-light); }
.bg-dark { background-color: var(--text-color-dark); color: #fff; }
.bg-dark .section-title, .bg-dark .section-lead, .bg-dark p, .bg-dark h3, .bg-dark .note { color: #fff; }
.bg-dark .section-lead { opacity: 0.8; }
.section-title { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 600; color: var(--text-color-dark); margin-bottom: 20px; text-align: center; }
.section-title.left-align { text-align: left; }
.section-title span { display: block; font-family: var(--font-sans); font-size: 0.8rem; color: var(--accent-color); margin-top: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.section-lead { text-align: center; font-size: 1.1rem; color: var(--text-color-light); margin: 0 auto 60px; max-width: 700px; }
.section-lead-mini { font-size: 1.1rem; color: var(--text-color); font-weight: 500; margin-bottom: 20px; }
.note { text-align: center; font-size: 0.9rem; color: var(--text-color-light); margin-top: 30px; opacity: 0.8; }
footer { background-color: var(--text-color-dark); color: #bdc3c7; text-align: center; padding: 40px 0; font-size: 0.85rem; }
footer p { margin: 0; letter-spacing: 0.3px; }

/* --- 4. ページ別スタイル --- */

/* 4.1. トップページ (index.html) */
#hero { background-image: url('../img/hero-image-new.jpg'); background-size: cover; background-position: center; background-attachment: fixed; height: 90vh; min-height: 600px; display: flex; align-items: center; color: #fff; position: relative; overflow: hidden; margin-top: -85px; }
#hero .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(26, 32, 44, 0.7), rgba(26, 32, 44, 0.4)); z-index: 1; }
#hero .hero-content { position: relative; z-index: 3; max-width: 800px; padding-left: 20px; }
#hero .hero-title { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 600; line-height: 1.3; margin-bottom: 20px; }
#hero .hero-subtitle { font-size: 1.1rem; line-height: 1.7; opacity: 0.9; margin-bottom: 35px; }
.hero-vertical-text { position: absolute; top: 50%; right: 40px; transform: translateY(-50%); z-index: 2; padding-top: 0.5em; writing-mode: vertical-rl; font-family: var(--font-serif); font-size: 3.5rem; color: rgba(255, 255, 255, 0.2); letter-spacing: 0.2em; text-orientation: mixed; }
#about .about-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; }
#about .about-image img { border-radius: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); width: 100%; height: 500px; object-fit: cover; }
#about .about-content p { margin-bottom: 20px; }
#about .about-points { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; font-weight: 500; }
#about .about-points .point { background-color: var(--bg-color); padding: 8px 15px; border-radius: 6px; color: var(--text-color-light); border: 1px solid var(--border-color); }
#about .about-points .point i { color: var(--accent-color); margin-right: 6px; }
#contents .contents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
#contents .content-card { display: block; background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--text-color); }
#contents .content-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
#contents .card-icon { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 20px; }
#contents .card-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--primary-color); margin-bottom: 10px; }
#contents .card-description { color: var(--text-color-light); }
#services .fee-container { max-width: 900px; margin: 0 auto; }
#services .fee-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 15px; margin: 50px 0 25px; }
#services .fee-title:first-of-type { margin-top: 0; }
#services .fee-title i { margin-right: 12px; color: var(--accent-color); }
#services .fee-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
#services .fee-table tr { background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden; }
#services .fee-table td { padding: 20px; vertical-align: middle; }
#services .fee-table td:first-child { color: var(--text-color-dark); font-weight: 500; }
#services .fee-table td.price { text-align: right; font-weight: 700; color: var(--primary-color); white-space: nowrap; font-size: 1.1rem; }
#services .fee-note { margin-top: 40px; text-align: center; font-size: 0.9rem; color: var(--text-color-light); line-height: 1.7; background-color: #fff; padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); }
#services .fee-note strong { color: var(--primary-color); }
#services .sub-text { display: block; font-size: 0.8em; color: var(--text-color-light); font-weight: 400; margin-top: 5px; }

/* 4.X. 経歴セクション (career) */
#career .career-timeline {
    max-width: 700px;
    margin: 40px auto 0;
    position: relative;
    padding-left: 45px; /* ドットと線のスペース */
}
#career .career-timeline::before { /* タイムラインの縦線 */
    content: '';
    position: absolute;
    left: 10px;
    top: 5px; /* ドットの上端に合わせる */
    bottom: 5px; /* ドットの下端に合わせる */
    width: 4px;
    background-color: var(--accent-color);
    border-radius: 2px;
}
#career .career-item {
    margin-bottom: 30px;
    position: relative;
    padding-left: 25px; /* ドットからのスペース */
}
#career .career-item:last-child {
    margin-bottom: 0;
}
#career .career-item::before { /* タイムラインのドット */
    content: '';
    position: absolute;
    left: -8px; /* 縦線の中央に合わせる (10px - (18px/2) + (4px/2)) */
    top: 5px; /* テキストの高さに合わせて調整 */
    width: 18px;
    height: 18px;
    background-color: var(--primary-color);
    border: 3px solid var(--bg-light); /* 背景色で縁取りして浮き上がらせる */
    border-radius: 50%;
    z-index: 1; /* 縦線より手前に */
}
#career .career-year {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 5px;
}
#career .career-description {
    color: var(--text-color-light);
    font-size: 1rem;
}
#career .qualifications {
    max-width: 700px;
    margin: 50px auto 0;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
#career .qualifications-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
}
#career .qualifications-title i {
    margin-right: 10px;
    color: var(--accent-color);
}
#career .qualifications ul {
    list-style: none; /* デフォルトで設定済みだが明示 */
    padding-left: 0;
    text-align: center; /* 中央寄せ */
}
#career .qualifications li {
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 10px;
    position: relative;
    display: inline-block; /* 横並びにする場合や中央寄せのために */
    padding: 5px 15px;
    background-color: var(--bg-light);
    border-radius: 20px; /* 角丸 */
    margin-right: 10px; /* 隣との間隔 */
}
#career .qualifications li:last-child {
    margin-bottom: 0;
    margin-right: 0;
}

#office .office-info { display: grid; grid-template-columns: auto 1fr; gap: 15px 30px; background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); }
#office .office-info dt { font-weight: 700; color: var(--primary-color); }
#office .office-info dd { color: var(--text-color-light); }
#contact .contact-methods { display: flex; flex-direction: column; align-items: center; gap: 25px; margin-top: 40px; }
#contact .contact-phone { font-size: 1.1rem; text-align: center; }
#contact .contact-phone strong { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600; color: var(--primary-color); display: block; }
#contact .contact-phone strong i { font-size: 1.5rem; margin-right: 8px; }

/* 4.2. サブページ共通 */
.sub-hero { background-color: var(--bg-light); padding: 80px 0; text-align: center; border-bottom: 1px solid var(--border-color); }
.sub-hero-title { font-family: var(--font-serif); font-size: 2.8rem; color: var(--text-color-dark); margin-bottom: 15px; }
.sub-hero-subtitle { font-size: 1.2rem; color: var(--text-color-light); max-width: 700px; margin: 0 auto; }
.text-center-block { text-align: center; margin-bottom: 80px; }
.text-center-block .section-lead { margin-bottom: 0; }
.cta-section { padding: 80px 0; text-align: center; }
.cta-section .section-title { margin-bottom: 20px; }
.cta-section .section-lead { margin-bottom: 40px; }

/* 4.3. コンテンツページ1 (content1.html) */
.feature-block { display: flex; align-items: flex-start; gap: 40px; padding: 40px; background-color: #fff; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); margin-bottom: 40px; }
.feature-icon-wrapper { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; background-color: var(--bg-light); display: flex; justify-content: center; align-items: center; }
.feature-icon-wrapper i { font-size: 2.5rem; color: var(--accent-color); }
.feature-title { font-family: var(--font-serif); font-size: 1.8rem; color: var(--primary-color); margin-bottom: 15px; }

/* 4.4. コンテンツページ2 (content2.html) */
.infographic-content-block { padding-bottom: 60px; }
.infographic-content-block:last-child { padding-bottom: 0; }
.flow-chart { text-align: center; }
.flow-start { display: inline-block; padding: 15px 30px; background-color: var(--text-color-dark); color: #fff; font-weight: bold; border-radius: 8px; margin-bottom: 30px; position: relative; }
.flow-start::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 2px; height: 30px; background-color: var(--border-color); }
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: left; }
.flow-path { display: flex; flex-direction: column; gap: 20px; }
.flow-header { font-size: 1.5rem; font-weight: bold; text-align: center; padding: 15px; border-radius: 8px; }
.flow-header.positive { background-color: #d4edda; color: #155724; }
.flow-header.negative { background-color: #f8d7da; color: #721c24; }
.flow-item, .flow-result { background-color: #fff; border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.flow-item h4 { color: var(--primary-color); margin-bottom: 8px; font-size: 1.1rem; }
.flow-result { margin-top: auto; }
.flow-result h4 { font-size: 1.2rem; margin-bottom: 8px; }
.flow-result.positive h4 { color: var(--positive-color); }
.flow-result.negative h4 { color: var(--negative-color); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: stretch; }
.chart-block { background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.chart-title { text-align: center; font-size: 1.5rem; font-family: var(--font-serif); color: var(--primary-color); margin-bottom: 10px; }
.chart-description { text-align: center; color: var(--text-color-light); font-size: 0.9rem; margin-bottom: 25px; flex-shrink: 0; }
.chart-container { position: relative; width: 100%; flex-grow: 1; min-height: 300px; }
.card-grid-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.info-card { background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.info-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.info-card-icon { font-size: 3.5rem; margin-bottom: 20px; }
.info-card-title { font-size: 1.3rem; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; }
.tax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.tax-card { background-color: rgba(255,255,255,0.05); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid rgba(255,255,255,0.1); }
.tax-card h3 { color: var(--accent-color); font-size: 1.5rem; margin-bottom: 15px; }
.tax-card .tax-value { font-size: 3rem; font-weight: 900; margin-bottom: 15px; font-family: var(--font-sans); }
.tax-card p { opacity: 0.9; }
.table-wrapper { overflow-x: auto; background-color: #fff; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th, .comparison-table td { padding: 20px; text-align: left; border-bottom: 1px solid var(--border-color); }
.comparison-table thead { background-color: var(--bg-light); }
.comparison-table th { font-family: var(--font-serif); font-weight: 600; color: var(--primary-color); }
.comparison-table th:nth-child(2) { color: var(--negative-color); }
.comparison-table th:nth-child(3) { color: var(--positive-color); }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover { background-color: #fcfcfc; }
.comparison-table td:first-child { font-weight: 500; color: var(--text-color-dark); }
.comparison-table td.positive { color: var(--positive-color); font-weight: 500; }


/* --- 5. エフェクトとユーティリティ --- */
.scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- 6. 印刷用スタイル --- */
@media print { body { background-color: #fff !important; color: #000 !important; margin: 0; padding: 15mm; font-size: 10pt; line-height: 1.5; } header, footer, .btn, .hero-vertical-text, #hero, .sub-hero, .cta-section { display: none !important; } main { padding-top: 0 !important; } .content-section { padding: 8mm 0 !important; background-color: #fff !important; color: #000 !important; } .bg-dark { background-color: #f0f0f0 !important; } .bg-dark *, h1,h2,h3,h4,p,a,div { color: #000 !important; } .shadow-lg, .shadow-xl, .feature-block, .chart-block, .info-card, .fee-table tr, .office-info, .comparison-table, #career .qualifications { box-shadow: none !important; border-radius: 0 !important; border: 1px solid #ccc; } .scroll-reveal { opacity: 1 !important; transform: none !important; } section, .feature-block, .chart-block, .info-card, .table-wrapper, #career .career-timeline, #career .qualifications { page-break-inside: avoid; } .chart-container { min-height: 200px; height: 60mm; } a { text-decoration: none; color: #000 !important; } }

/* --- 7. レスポンシブ対応 --- */
@media (max-width: 992px) { /* タブレット */
    #about .about-layout { grid-template-columns: 1fr; }
    #about .about-image { display: small; } /* タブレットでは非表示も検討 */
    .section-title.left-align { text-align: center; }
    .tax-grid, .flow-grid { grid-template-columns: 1fr; }
    #header nav ul { gap: 18px; } /* ナビゲーションのギャップ調整 */
    #header nav a { font-size: 0.85rem; }
}

@media (max-width: 768px) { /* スマートフォン */
    html { font-size: 15px; }
    #header { padding: 15px 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
    #header .container { flex-direction: column; gap: 15px; }
    #header nav ul { gap: 12px; flex-wrap: wrap; justify-content: center; } /* さらにgap調整 */
    #header nav a { font-size: 0.8rem; padding: 5px 8px; } /* パディング追加でタップしやすく */
    main { padding-top: 145px; } /* ヘッダー高さ変更に伴い調整 */
    #header.scrolled { padding: 15px 0; }
    #hero { height: auto; min-height: 70vh; padding: 145px 0 50px; margin-top: -145px; } /* padding-top調整 */
    #hero .hero-title, .sub-hero-title { font-size: 2.2rem; }
    .hero-vertical-text { font-size: 2.5rem; right: 15px; letter-spacing: 0.3em; }
    .content-section { padding: 60px 0; } /* スマホではパディングを少し小さく */
    .section-title { font-size: 2rem; }
    .feature-block { flex-direction: column; text-align: center; align-items: center; gap: 20px; padding: 30px; }
    
    /* 経歴セクションのレスポンシブ */
    #career .career-timeline { padding-left: 35px; }
    #career .career-item { padding-left: 20px; }
    #career .career-item::before { left: -10px; width: 16px; height: 16px; border-width: 2px; }
    #career .qualifications ul { text-align: left; padding-left: 0; }
    #career .qualifications li { display: block; margin-right: 0; margin-bottom: 12px; text-align: center; }

    /* テーブルのレスポンシブ対応 */
    #services .fee-table tr, #office .office-info { display: block; }
    #services .fee-table tr { margin-bottom: 10px; }
    #services .fee-table td, #office .office-info dt, #office .office-info dd { display: block; width: 100%; text-align: left !important; }
    #services .fee-table td { padding: 10px 20px; }
    #services .fee-table td:first-child { border-radius: 8px 8px 0 0; padding-bottom: 5px; background-color: var(--bg-light); }
    #services .fee-table td.price { text-align: right !important; border-radius: 0 0 8px 8px; padding-top: 5px; font-size: 1.05rem; }
    #office .office-info { border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); background: #fff; padding: 20px; }
    #office .office-info dt { display: block; font-weight: 700; color: var(--primary-color); margin-bottom: 3px; } /* dtを表示させるスタイルに変更 */
    #office .office-info dd { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 10px; padding-left: 0; }
    #office .office-info dd:last-of-type { border-bottom: none; margin-bottom: 0; }
    /* #office .office-info dd::before は不要になったためコメントアウト
    .office-info dd::before { content: attr(data-label); font-weight: 700; color: var(--primary-color); display: block; margin-bottom: 5px; } */

    .table-wrapper {
        background-color: transparent;
        box-shadow: none;
    }
    .comparison-table thead {
        display: none; /* スマホではヘッダーを非表示 */
    }
    .comparison-table,
    .comparison-table tbody,
    .comparison-table tr,
    .comparison-table td {
        display: block; /* 全てをブロック要素に */
        width: 100%;
    }
    .comparison-table tr {
        margin-bottom: 20px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    .comparison-table td {
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
        position: relative;
    }
    .comparison-table td:last-child {
        border-bottom: none;
    }
    .comparison-table td:not(:first-child)::before {
        content: attr(data-label); /* HTMLのdata-label属性を疑似要素で表示 */
        display: block;
        font-weight: 600;
        color: var(--text-color-light);
        margin-bottom: 8px;
        font-size: 0.9em;
    }
    .comparison-table td:first-child {
        background-color: var(--bg-light);
        font-weight: 700 !important;
        font-size: 1.1em;
        color: var(--primary-color) !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) { /* 小型スマートフォン */
    .hero-vertical-text { display: none; }
    main { padding-top: 135px; } /* ヘッダー高さ微調整 */
    #hero { padding-top: 135px; margin-top: -135px; }
    #header nav ul { gap: 8px; }
    #header nav a { font-size: 0.75rem; padding: 4px 6px; }
}