@charset "utf-8";

/* ###################################################################### */
/* 説明        ：【スマートフォン用デザイン】FAQ専用スタイル */
/* ファイル名  ：faq2026_pc.css */
/* 作成者      ：矢ノ倉啓登（yanokura.jp管理人） */
/* Author      ：Hiroto Yanokura */
/* 対象サイト  ：Yanokura.jp GROUP - https://group.yanokura.jp/ */
/* 適用ページ名：よくあるご質問 */
/* 適用URL     ：https://group.yanokura.jp/faq/ */
/* 作成日      ：2026.09.24 */
/* 更新日      ：2026.09.24 */
/* ###################################################################### */

/* 共通カラー */
:root {
    --faq-accent: #ff0000;
    --faq-text: #000000;
    --faq-sub-text: #333333;
    --faq-line: #d5d5d5;
    --faq-soft: #f8f8f8;
    --faq-page: #ffffff;
    --faq-focus: #1a73e8;
}
/* /共通カラー */

/* FAQ基本スタイル */
/* FAQ全体 */
.faq {
    display: block;
    width: 100%;
    height: auto;
    color: var(--faq-text);
    margin: 0;
    padding: 0;
    text-align: left;
}
/* /FAQ全体 */

/* FAQリスト */
.faq_in {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0 0 50px;
}
/* /FAQリスト */
/* /FAQ基本スタイル */

/* FAQスタイル */
/* FAQタイトル */
.faq_in-title {
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    padding: 5px 0;
}
.faq_in-title h2{
    color: #222222;
    font-size: 20px;
    font-weight: bold;
    font-family: "TBUDゴシック E", "ＭＳ ゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
/* /FAQタイトル */

/* FAQテキスト */
.faq_in-text {
    width: 100%;
    height: auto;
    margin: 0 0 25px;
    padding: 5px 0;
}
.faq_in-text p{
    color: #000000;
    font-size: 16px;
    font-weight: normal;
    font-family: "TBUDゴシック R", "ヒラギノゴシック ProN W6", "hiragino-kaku-gothic-ProN-W6", "HGSゴシックE", "ＭＳ Ｐゴシック", "MS PGothic", "MS ゴシック", Sans-serif;
    line-height: 2.0;
}
/* /FAQテキスト */
/* /FAQスタイル */

/* FAQスタイル */
/* FAQ全体 */
.faq_in-index {
    background: #f2f2f2;
    width: 100%;
    height: auto;
    margin: 0 0 50px;
    padding: 10px 20px;
}
/* /FAQ全体 */

/* FAQタイトル */
.faq_in-index_title {
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    padding: 5px 0;
}
.faq_in-index_title h2{
    color: #222222;
    font-size: 18px;
    font-weight: bold;
    font-family: "TBUDゴシック E", "ＭＳ ゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
/* /FAQタイトル */

/* FAQリスト */
.faq_in-index_list {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5px 0;
}
.faq_in-index_list-box {
    width: 100%;
    height: auto;
    font-size: 0;
    margin: 0;
    padding: 0;
}
.faq_in-index_list-box li{
    color: #111111;
    font-size: 16px;
    line-height: 1.5;
    transition: 0.3s ease-in-out;
}
.faq_in-index_list-box li a{
    color: #222222;
}
.faq_in-index_list-box li a:hover{
    opacity:0.7;
}
/* /FAQリスト */
/* /FAQスタイル */

/* カテゴリー */
.faq-group {
    margin: 0 0 42px;
    scroll-margin-top: 15px;
}

.faq-group[hidden],
.faq-item[hidden],
.faq-answer[hidden],
.faq-no-results[hidden] {
    display: none;
}

.faq-group_title {
    margin: 0 0 14px;
    padding: 7px 10px;
    border-left: 6px solid var(--faq-accent);
    border-bottom: 2px solid var(--faq-accent);
}

.faq-group_title h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
}

/* 質問と回答 */
.faq-item {
    margin: 0 0 9px;
    border: 1px solid var(--faq-line);
    background: var(--faq-page);
}

.faq-item_question {
    margin: 0;
}

.faq-question {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 58px;
    padding: 13px 12px;
    border: 0;
    background: var(--faq-page);
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.65;
    text-align: left;
}

.faq-question[aria-expanded="true"] {
    background: #fff5f5;
}

.faq-question__mark,
.faq-answer__mark {
    color: var(--faq-accent);
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.faq-question__icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.faq-question__icon::before,
.faq-question__icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: var(--faq-accent);
    content: "";
    transform: translate(-50%, -50%);
}

.faq-question__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-question[aria-expanded="true"] .faq-question__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
    border-top: 1px solid var(--faq-line);
    background: var(--faq-soft);
}

.faq-answer__inner {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 15px 12px;
}

.faq-answer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
}

.faq-answer a {
    color: #b50000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 検索結果なし */
.faq-no-results {
    margin: 30px 0;
    padding: 20px 15px;
    border: 1px solid var(--faq-line);
    font-size: 14px;
    text-align: center;
}

/* お問い合わせ案内 */
.faq-contact {
    margin: 45px 0 0;
    padding: 25px 15px;
    border: 1px solid var(--faq-accent);
    text-align: center;
}

.faq-contact h2 {
    margin: 0 0 12px;
    color: var(--faq-accent);
    font-size: 20px;
}

.faq-contact p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.8;
}

.faq-contact > a {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--faq-accent);
    background: var(--faq-accent);
    color: #ffffff;
    text-decoration: none;
}

/* キーボード操作 */
.faq button:focus-visible,
.faq a:focus-visible,
.faq input:focus-visible {
    outline: 3px solid var(--faq-focus);
    outline-offset: 2px;
}