/* ------------------------------------------------ */
/* documents.css - 調査票様式一覧ページ専用スタイル */
/* ------------------------------------------------ */


.intro-text {
    background-color: var(--white);
    text-align: center;
    border-radius: 4px;
    margin-bottom: 32px;
    font-size: 15px; /* [変更] 18px -> 15px (スマホ用) */
}

/* 共通セクション設定 */
.document-category-section {
    background-color: var(--white);
    padding: 24px 16px;
    margin-bottom: 32px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* セクション大見出しの調整 */
.document-heading-large {
    text-align: left;
    padding-left: 8px;
    border-left: 8px solid var(--primary-color);
    padding-bottom: 0;
    margin-bottom: 16px;
}

.document-heading-large::after {
    /* 共通CSSの::afterをリセット */
    content: none;
}

.document-heading-secondary {
    border-left-color: var(--secondary-color);
}

.document-heading-tertiary {
    border-left-color: var(--accent-color);
}

.icon-large {
    color: var(--primary-color);
    margin-right: 8px;
    font-size: 20px; /* [変更] 22px -> 20px (スマホ用) */
}

.document-heading-secondary .icon-large {
    color: var(--secondary-color);
}

.document-heading-tertiary .icon-large {
    color: var(--accent-color);
}


/* --------------------------------------- */
/* サービス選択セクション */
/* --------------------------------------- */

/* ★ プルダウンとジャンプボタンを横並びにするためのラッパー */
#service-selector-wrapper {
    display: flex;
    flex-wrap: wrap; /* 画面が狭い場合は折り返す */
    align-items: flex-end; /* 下揃え */
    gap: 16px;
    margin-bottom: 20px;
}

.service-selector-box {
    display: flex; /* 常にflex */
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0; /* ラッパー側でマージンを管理 */
    flex-grow: 1; /* 横幅を自動で伸ばす */
}

.service-label {
    font-weight: 700;
    color: var(--text-color-dark);
    font-size: 16px; /* [変更] 20px -> 16px (スマホ用) */
}

.custom-select {
    width: 100%;
    max-width: 800px; /* 500pxから変更 */
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px; /* [変更] 18px -> 16px (スマホ用) */
    background-color: var(--white);
    appearance: none; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23686868' d='M10 12l-6-6h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}

/* ★ ジャンプボタンのスタイル ★ */
#service-centric-link-container {
    flex-shrink: 0; /* 縮まないようにする */
}

.btn-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px; /* [変更] 16px -> 14px (スマホ用) */
    font-weight: 700;
    color: var(--white);
    background-color: var(--secondary-color); /* やわらかい緑 */
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap; /* 折り返さない */
}
.btn-jump:hover {
    background-color: #7aa982; /* 少し濃い緑 */
    color: var(--white);
}
.btn-jump i {
    font-size: 12px; /* [変更] 14px -> 12px (スマホ用) */
}


.selected-service-result {
    margin-top: 20px;
    border-top: 2px solid var(--light-gray);
    padding-top: 16px;
}

.initial-message {
    text-align: center;
    color: var(--text-color);
    font-style: italic;
    padding: 20px;
    background-color: var(--background-color);
    border-radius: 4px;
    font-size: 14px; /* [変更] 15px -> 14px (スマホ用) */
}

/* .hidden クラスは JS によって制御されます */
.hidden {
    display: none;
}

/* --------------------------------------- */
/* 様式比較ビュー (左右の列コンテナ) */
/* --------------------------------------- */
/* ★常に縦並び(column)に変更 */
#document-comparison-view {
    display: flex;
    flex-direction: column !important; /* ★セレクタを簡潔に変更 (強制) */
    gap: 20px;
    margin-top: 20px;
}

.document-column {
    flex: none !important; /* ★flexを解除 */
    width: 100% !important; /* ★常に幅100% */
    min-width: 0;
    padding: 16px;
    background-color: #fcfcfc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-sizing: border-box; /* ★パディングを含めて100%にするため追加 */
}

/* 列のタイトル */
.column-title {
    font-size: 20px; /* [変更] 24px -> 20px (スマホ用) */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 3px solid;
}
.standard-title {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.service-centric-title {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

.sub-description {
    font-size: 14px; /* [変更] 15px -> 14px (スマホ用) */
    color: var(--text-color);
    margin-bottom: 12px;
}

/* サービス中心方式非対応時のメッセージ */
.unsupported-message {
    padding: 24px;
    text-align: center;
    background-color: var(--background-color);
    border-radius: 6px;
    border: 1px dashed var(--border-color);
}
.unsupported-message i {
    font-size: 20px; /* [変更] 24px -> 20px (スマホ用) */
    color: var(--text-color);
    margin-bottom: 8px;
}
.unsupported-message p {
    margin: 0;
    font-weight: 500;
    color: var(--text-color-dark);
    font-size: 14px; /* [変更] 15px -> 14px (スマホ用) */
}

/* --------------------------------------- */
/* リンクスタイル (静的表示) */
/* --------------------------------------- */
.document-link-list {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--white);
    margin-top: 8px;
}

.document-link-item {
    display: flex; /* ★横並びにする */
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--light-gray);
}
.document-link-item:last-child {
    border-bottom: none;
}

.doc-header-info {
    display: flex;
    flex-direction: column; 
    flex-grow: 1;
    margin-right: 10px; /* ボタンとの間に隙間 */
}

/* 分類名 (例: [共通評価項目]) を非表示にする */
.doc-classification {
    display: none;
}

.doc-title {
    font-size: 15px; /* [変更] 18px -> 15px (スマホ用) */
    font-weight: 500;
    color: var(--text-color-dark);
    line-height: 1.3;
}

/* ★★★ 新規追加: 注釈スタイル ★★★ */
.doc-note {
    font-size: 12px; /* [変更] 13px -> 12px (スマホ用) */
    color: #c9372c; /* 赤色 (PDFボタンより少し暗く) */
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.4;
    padding-left: 2px;
}
/* ★★★ 修正ここまで ★★★ */


/* ボタンの共通調整 */
.btn-small {
    padding: 6px 10px;
    font-size: 13px; /* [変更] 14px -> 13px (スマホ用) */
    font-weight: 500;
    white-space: nowrap;
}

/* PDFボタン */
.btn-download-pdf {
    background-color: #e23b2d; /* PDFレッド */
    color: var(--white);
    text-decoration: none; /* <a>タグになったため追加 */
    display: inline-flex; /* <a>タグになったため追加 */
    align-items: center;
    gap: 6px;
}
.btn-download-pdf:hover {
    opacity: 0.85;
    color: var(--white);
}

/* モバイルボタンのコンテナ (静的) */
.download-container-static {
    flex-shrink: 0;
}

.download-container-static .btn-small {
    padding: 8px 12px;
    font-size: 13px; /* [変更] 14px -> 13px (スマホ用) */
    width: auto;
}


/* --------------------------------------- */
/* グループ化スタイル */
/* --------------------------------------- */

/* * ★★★ 修正: 最上位グループ（共通評価項目・標準調査票）をカード化 ★★★
 * 背景色や枠線による「囲み」で、項目解説書等と同じランク感を持たせる。
 * 青色の塗りつぶしヘッダーは廃止し、左線のアクセントで統一。
 */
.document-group-wrapper {
    margin-bottom: 24px;
    /* カードスタイルの適用 (.doc-link-highlight .document-link-item と同様) */
    border: 1px solid var(--border-color);
    border-left: 6px solid #5f6368; /* 濃いグレーの太線 */
    border-radius: 6px;
    background-color: var(--white);
    padding: 20px; /* 内側に余白を持たせる */
    box-shadow: 0 3px 6px rgba(0,0,0,0.08); /* 浮き出し効果 */
    overflow: visible;
}

/* 最上位グループの見出し (デザイン変更) */
.document-group-heading.group-secondary {
    font-size: 18px; /* ★見出し(h4)と同等のサイズに */
    font-weight: 700;
    color: var(--text-color-dark); /* 濃いグレー文字 */
    margin: 0 0 16px 0; /* 下に余白 */
    padding: 0; /* パディング削除 */
    background-color: transparent; /* 背景色削除 */
    border-left: none; /* ボーダーは親要素につけたので削除 */
}

/* Wrapper直下のリスト (枠線を消す) */
/* カードの中にさらに枠線があるとくどいため */
.document-group-wrapper > .document-link-list {
    border: none;
    border-radius: 0;
    margin-top: 0;
}

/* ネストされたグループ (事業プロフィル...) */
.nested-group {
    margin: 10px 0; /* ★横のマージンを削除して左揃えに */
    padding: 0;
    background-color: #f7f9fc; /* わずかに背景色を付ける */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden; /* 見出しの角を丸めるため */
}

/* ネストされたグループの見出し (ピンク色) */
.nested-group .document-group-heading.group-tertiary {
    font-size: 15px; /* [変更] 16px -> 15px (スマホ用) */
    font-weight: 700;
    color: var(--text-color-dark);
    margin: 0;
    padding: 8px 12px;
    background-color: var(--accent-color); /* ピンク色 */
    border-bottom: 1px solid var(--border-color);
}

/* ネストされたグループの様式リスト */
.nested-group .document-link-list {
    margin-top: 0;
    border: none; /* リスト自体の枠線は不要 */
    border-radius: 0;
}

/* --------------------------------------- */
/* ★★★ 修正: 1つだけの重要項目（項目解説書・評価結果報告書） ★★★ */
/* --------------------------------------- */

/* ハイライト項目のコンテナ（リストの外枠を無効化） */
.document-link-list.doc-link-highlight {
    border: none;
    background: none;
    border-radius: 0;
    margin-top: 24px; /* 他のグループとの間隔を確保 */
    margin-bottom: 24px;
    box-shadow: none;
    padding: 0;
    overflow: visible; /* 影が見えるように */
}

/* 中身のアイテムを「カード」としてデザイン */
.doc-link-highlight .document-link-item {
    border: 1px solid var(--border-color); /* 通常の枠線 */
    border-left: 6px solid #5f6368; /* ★青ではなく濃いグレーの太線で「ランク感」を表現 */
    border-radius: 6px;
    background-color: var(--white);
    padding: 16px 20px; /* 余白をたっぷりとってリッチに見せる */
    box-shadow: 0 3px 6px rgba(0,0,0,0.08); /* 少し強めの影で浮き上がらせる */
    margin-bottom: 0; /* 単体なのでマージン不要 */
}

/* タイトルの強調 */
.doc-link-highlight .doc-title {
    font-size: 18px; /* ★見出し(h4)と同等のサイズに */
    font-weight: 700; /* ★太字で存在感アップ */
    color: var(--text-color-dark);
}


/* --------------------------------------- */
/* レスポンス設定 */
/* --------------------------------------- */

/* ただし、PC表示でのみプルダウン幅を制限するルールは残します */
/* ★★★ PC版レイアウトでのフォントサイズオーバーライド (大きめに戻す) ★★★ */
@media screen and (min-width: 1024px) {
    .document-category-section {
        padding: 32px;
    }
    
    .custom-select {
        max-width: 800px; /* 500pxから変更 (さらに広くしました) */
    }

    /* 以下、PC版で見やすくするためにフォントサイズを戻す/大きくする設定 */
    .intro-text {
        font-size: 18px;
    }
    .icon-large {
        font-size: 24px;
    }
    .service-label {
        font-size: 20px;
    }
    .custom-select {
        font-size: 18px;
    }
    .btn-jump {
        font-size: 16px;
    }
    .btn-jump i {
        font-size: 14px;
    }
    .initial-message {
        font-size: 16px;
    }
    .column-title {
        font-size: 24px;
    }
    .sub-description {
        font-size: 15px;
    }
    .unsupported-message i {
        font-size: 24px;
    }
    .unsupported-message p {
        font-size: 15px;
    }
    .doc-title {
        font-size: 18px;
    }
    .doc-note {
        font-size: 13px;
    }
    .btn-small {
        font-size: 14px;
    }
    .download-container-static .btn-small {
        font-size: 14px;
    }
    .document-group-heading.group-secondary {
        font-size: 20px;
    }
    .nested-group .document-group-heading.group-tertiary {
        font-size: 16px;
    }
    
    /* ハイライト項目のPCサイズ調整 */
    .doc-link-highlight .doc-title {
        font-size: 20px; /* PCではさらに大きく */
    }

    .accordion-summary {
        font-size: 18px;
    }
    .accordion-content {
        font-size: 15px;
    }
    .accordion-content h5 {
        font-size: 16px;
    }
    .accordion-content h5.term-title {
        font-size: 17px;
    }
    .term-icon {
        font-size: 16px;
    }
    .term-description {
        font-size: 15px;
    }
    .term-list {
        font-size: 15px;
    }
    .term-note {
        font-size: 14px;
    }
}

/* --------------------------------------- */
/* アコーディオン スタイル (共通解説書) */
/* --------------------------------------- */
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 16px;
    background-color: var(--white);
    overflow: hidden; /* 角丸のため */
}

.accordion-summary {
    font-size: 16px; /* [変更] 18px -> 16px (スマホ用) */
    font-weight: 700;
    color: var(--white);
    margin: 0;
    padding: 12px 16px;
    background-color: var(--secondary-color); /* 緑色 */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* summaryのデフォルトマーカーを消す */
}

.accordion-summary::-webkit-details-marker {
    display: none; /* Chrome/Safariのマーカーを消す */
}

/* 開閉アイコン (Font Awesome) */
.accordion-summary::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078"; /* fa-chevron-down */
    font-size: 14px;
    transition: transform 0.2s ease;
}

.accordion-item[open] > .accordion-summary::after {
    transform: rotate(180deg); /* fa-chevron-up */
}

.accordion-content {
    padding: 16px;
    font-size: 14px; /* [変更] 15px -> 14px (スマホ用) */
    color: var(--text-color-dark);
    line-height: 1.7;
    background-color: #fcfcfc;
    border-top: 1px solid var(--border-color);
}

.accordion-content h5 {
    font-size: 15px; /* [変更] 16px -> 15px (スマホ用) */
    color: var(--text-color-dark);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 4px;
    margin-top: 16px;
    margin-bottom: 8px;
}
 .accordion-content h5:first-child {
    margin-top: 0;
 }

.accordion-content p {
    margin-bottom: 12px;
}

/* --------------------------------------- */
/* アコーディオン内の用語解説スタイル (新規追加) */
/* --------------------------------------- */
.term-item {
    margin-bottom: 24px;
}
.term-item:last-child {
    margin-bottom: 0;
}

/* 既存のh5スタイルをリセット/調整 */
.accordion-content h5 {
    font-size: 15px; /* [変更] 16px -> 15px (スマホ用) */
    color: var(--text-color-dark);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 4px;
    margin-top: 16px;
    margin-bottom: 8px;
}

/* 用語解説の見出し (h5.term-title) */
.accordion-content h5.term-title {
    font-size: 16px; /* [変更] 17px -> 16px (スマホ用) */
    font-weight: 700;
    color: var(--text-color-dark);
    border: none; /* 下線を削除 */
    border-left: 5px solid var(--accent-color); /* 左ボーダーに変更 */
    background-color: #fdf6f7; /* 薄いピンク背景 */
    padding: 8px 12px;
    margin-top: 0; /* term-itemがマージンを持つためリセット */
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.term-icon {
    color: var(--accent-color);
    margin-right: 10px;
    font-size: 15px; /* [変更] 16px -> 15px (スマホ用) */
}

.term-description {
    font-size: 14px; /* [変更] 15px -> 14px (スマホ用) */
    line-height: 1.8;
    color: var(--text-color-dark);
    padding-left: 16px; /* 少しインデント */
    margin-bottom: 12px;
}
.term-description:last-of-type {
     margin-bottom: 0;
}

.term-list {
    font-size: 14px; /* [変更] 15px -> 14px (スマホ用) */
    line-height: 1.8;
    color: var(--text-color-dark);
    padding-left: 32px; /* リストのインデント */
    margin-bottom: 12px;
}
.term-list li {
    margin-bottom: 6px;
}

.term-note {
    font-size: 13px; /* [変更] 14px -> 13px (スマホ用) */
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--background-color);
    border: 1px dashed var(--border-color);
    padding: 10px;
    margin-left: 16px;
    border-radius: 4px;
}

/* --- [新規] セット利用・OR選択表示用スタイル --- */

/* OR区切り線 */
.doc-divider-or {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
}
.doc-divider-or::before,
.doc-divider-or::after {
    content: '';
    flex: 1; /* 横いっぱいに伸ばす */
    height: 1px;
    background-color: var(--border-color);
    margin: 0 10px;
}

/* セットの枠組みコンテナ */
.doc-set-container {
    border: 2px solid #8ab4f7; /* primary-color */
    border-radius: 6px;
    background-color: #f0f7ff; /* 非常に薄い青 */
    overflow: hidden; /* 角丸用 */
    margin: 8px 0; /* 上下の余白 */
}

/* セットのヘッダー部分 */
.doc-set-header {
    background-color: #e1effe; /* 薄い青 */
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #8ab4f7;
}

/* 「セットで使用」バッジ */
.badge-set {
    background-color: #1a73e8; /* 濃い青 */
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 700;
    flex-shrink: 0;
}

/* [新規]「単体で使用」バッジ */
.badge-single {
    background-color: #70757a; /* グレー */
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 8px; /* タイトルとの間隔 */
    vertical-align: middle;
    display: inline-block;
}

/* ヘッダー内の注釈テキスト */
.doc-set-note {
    font-size: 13px;
    color: #3c4043;
    font-weight: 700;
}

/* セット内のリスト調整 (既存スタイルを上書き) */
.doc-set-container .document-link-list {
    margin-top: 0;
    border: none;
    border-radius: 0;
}
.doc-set-container .document-link-item {
    background-color: transparent; /* 背景色を親に合わせる */
}
/* --- documents.css への追記 --- */

/* プルダウンの文字色・背景色を明示的に指定 */
.service-selector-box select.custom-select {
    color: #3c4043;        /* 濃いグレー（黒に近い色） */
    background-color: #fff; /* 背景は白 */
    border: 1px solid #dadce0;
}

/* 選択肢（オプション）のスタイル */
.service-selector-box select.custom-select option {
    color: #3c4043;
    background-color: #fff;
}

/* プルダウンの矢印アイコンなどが白で見えにくい場合の対策（ブラウザ標準依存ですが念のため） */
.service-selector-box select.custom-select:focus {
    outline: 2px solid var(--primary-color);
    border-color: var(--primary-color);
}