/* ===== デザイントークン（zutool Design System / design/tokens/*.css 準拠） ===== */
:root {
    --color-brand-green: #1AA3A1;
    --color-brand-green-light: #40B2B1;
    --color-brand-green-dark: #1A8281;
    --color-text-main: rgba(34, 34, 30, 0.84);
    --color-text-emphasis: rgba(34, 34, 30, 0.84);
    --color-text-subtle: rgba(34, 34, 30, 0.64);
    --color-text-white: #FFFFFF;
    --color-text-zutool-green: #1AA3A1;
    --color-text-link: #1F4ACC;
    --color-bg-gray-light: #EEEEEC;
    --color-bg-gray: #E3E3E0;
    --color-bg-gray-dark: #CACAC5;
    --color-bg-white: #FFFFFF;
    --color-bg-green-light: #BCE5E5;
    --color-bg-green: #40B2B1;
    --color-bg-yellow-light: #FDF0DF;
    --color-border-gray-light: #E3E3E0;
    --color-border-gray: #CACAC5;
    --color-border-green: #1AA3A1;
    --color-icon-gray-light: #CACAC5;
    --color-warning: #FA9C19;
    --color-text-red: #EB463B;
    --spacing-2xs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --border-radius-xs: 2px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    --font-family-base: 'M PLUS 1', sans-serif;
    --font-size-2xs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-normal: 1.5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

body {
    font-family: var(--font-family-base);
    background: var(--color-bg-gray-light);
    margin: 0 auto;
    max-width: 440px;
    min-height: 100vh;
}

.screen-container {
    position: relative;
    min-height: 100vh;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100vh;
    overflow-y: auto;
    background: var(--color-bg-gray-light);
    display: none;
    -webkit-overflow-scrolling: touch;
}

.screen.active {
    display: block;
}

/* 記事詳細ページ：背景を白に（Figmaの記事詳細画面は白背景） */
.screen--white {
    background: var(--color-bg-white);
}

/* ===== セクションラベル ===== */
.section-label {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    background: var(--color-bg-gray);
    border-top: 1px solid var(--color-border-gray-light);
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* ===== よくある質問リスト（トップ） ===== */
.faq-top-list {
    background: var(--color-bg-white);
}

.faq-top-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--spacing-md);
    height: 72px;
    border-bottom: 1px solid var(--color-border-gray-light);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    color: var(--color-text-main);
    transition: background 0.1s;
    text-decoration: none;
}

.faq-top-item:active {
    background: var(--color-bg-gray-light);
}

.faq-top-item-text {
    flex: 1;
    line-height: 1.5;
}

.faq-top-item-chevron {
    width: 13px;
    height: 8px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: var(--spacing-xs);
    transform: rotate(90deg);
}

/* ===== アプリが起動しない場合の案内カード（Figma: zutool_green/right背景） ===== */
.startup-notice-card {
    background: #DFF7F6;
    padding: 20px;
    border-radius: var(--border-radius-md);
    margin: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.startup-notice-heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-green-dark);
    line-height: 1.5;
    text-align: center;
}

.startup-notice-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--color-border-green);
}

.startup-notice-step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: 1.5;
}

/* ===== はじめての方へ案内テキスト ===== */
.guide-text {
    background: var(--color-bg-white);
    padding: 24px var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-main);
    line-height: 1.5;
    text-align: center;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-xl);
}

.guide-text a {
    color: var(--color-brand-green-dark);
    text-decoration: underline;
}

/* ===== カテゴリアコーディオン内の用途補助文言 ===== */
.cat-accordion-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-main);
    font-weight: var(--font-weight-normal);
    margin-top: 2px;
    line-height: 1.5;
}

.cat-accordion-header-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* カテゴリアイコン（img統一：20px枠に収める） */
.cat-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ===== カテゴリアコーディオン ===== */
/* カテゴリ見出し（タップで展開） */
.cat-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--spacing-md);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-green-dark);
    background: var(--color-bg-white);
    border-bottom: 2px solid var(--color-border-gray-light);
    cursor: pointer;
    transition: background 0.1s;
    min-height: 90px;
}

.cat-accordion-header:active {
    background: var(--color-bg-gray-light);
}

/* カテゴリ見出しの矢印 */
.cat-accordion-arrow {
    width: 8px;
    height: 13px;
    object-fit: contain;
    transition: transform 0.2s;
    flex-shrink: 0;
    transform: rotate(90deg);
}

.cat-accordion-arrow.open {
    transform: rotate(270deg);
}

/* カテゴリ内の質問リスト */
.cat-accordion-body {
    display: none;
}

.cat-accordion-body.open {
    display: block;
}

.all-q-item {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-gray-light);
}

.all-q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    color: var(--color-text-main);
    background: var(--color-bg-white);
    transition: background 0.1s;
    line-height: var(--line-height-normal);
    min-height: 60px;
    gap: var(--spacing-xs);
}

.all-q-header:active {
    background: var(--color-bg-gray-light);
}

.all-q-toggle {
    color: var(--color-icon-gray-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    flex-shrink: 0;
    line-height: 1;
    width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.all-q-toggle-icon {
    width: 8px;
    height: 13px;
    object-fit: contain;
    transform: rotate(90deg);
}

.all-q-toggle.open {
    transform: rotate(180deg);
}

.all-q-body {
    padding: 0 var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: 1.7;
    display: none;
    background: transparent;
}

/* アコーディオン内のコンテナ（ライトグレー背景・角丸） */
.all-q-body-inner {
    background: var(--color-bg-gray-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.step-block {
    padding: var(--spacing-lg) 0;
}

.step-block:first-child {
    padding-top: 0;
}

.step-block:last-child {
    padding-bottom: 0;
}

/* アコーディオン内のステップ見出し */
.step-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-emphasis);
    line-height: 1.5;
    margin-bottom: var(--spacing-xs);
}

/* アコーディオン内の本文 */
.step-body {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: 1.7;
}

/* ステップ区切り線 */
.step-divider {
    border: none;
    border-top: 1px solid var(--color-border-gray);
    margin: 0;
}

.all-q-body ol,
.all-q-body ul {
    padding-left: var(--spacing-md);
}

.all-q-body li {
    margin-bottom: var(--spacing-xs);
}

/* 回答本文内の表（スプレッドシート由来のMarkdownテーブル） */
.faq-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border-gray-light);
    margin: var(--spacing-xs) 0 var(--spacing-sm);
}

.faq-table th,
.faq-table td {
    border: 1px solid var(--color-border-gray-light);
    padding: var(--spacing-xs) var(--spacing-2xs);
    text-align: center;
}

.faq-table th {
    background: var(--color-brand-green);
    color: var(--color-text-white);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
}

.faq-table td {
    background: var(--color-bg-white);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}

.faq-table td:first-child {
    text-align: left;
}

/* 無料版/プレミアム比較表：列幅固定で折り返し防止・最終列（プレミアム）を赤文字に */
.faq-table--compare {
    table-layout: fixed;
}

.faq-table--compare th:first-child,
.faq-table--compare td:first-child {
    width: 54%;
    padding-left: var(--spacing-2xs);
    padding-right: var(--spacing-2xs);
    white-space: nowrap;
}

.faq-table--compare th:not(:first-child),
.faq-table--compare td:not(:first-child) {
    width: 19%;
    padding-left: var(--spacing-2xs);
    padding-right: var(--spacing-2xs);
    white-space: nowrap;
}

.faq-table--compare th:first-child {
    background: var(--color-bg-white);
    color: var(--color-text-main);
}

.faq-table--compare th:last-child {
    background: var(--color-brand-green-dark);
}

.faq-table--compare td:last-child {
    color: var(--color-text-red);
}

/* ○×記号：デザイン準拠で大きく表示 */
.faq-mark {
    display: inline-block;
    line-height: 1;
}

.faq-mark--no {
    font-size: 24px;
    font-weight: var(--font-weight-normal);
}

.faq-mark--yes {
    font-size: 26px;
    font-weight: var(--font-weight-medium);
}

.all-q-body.open {
    display: block;
}

/* ===== 解決しない場合：アコーディオン ===== */
.faq-footer {
    margin-top: 1px;
}

/* 「解決しない場合」ヘッダー：カテゴリ見出しと同じスタイル */
.faq-footer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-green-dark);
    background: var(--color-bg-white);
    border-bottom: 2px solid var(--color-border-gray-light);
    cursor: pointer;
    transition: background 0.1s;
    min-height: 82px;
}

.faq-footer-header.open {
    border-bottom: none;
}

.faq-footer-header:active {
    background: var(--color-bg-gray-light);
}

.faq-footer-arrow {
    width: 8px;
    height: 13px;
    object-fit: contain;
    transition: transform 0.2s;
    flex-shrink: 0;
    transform: rotate(90deg);
}

.faq-footer-arrow.open {
    transform: rotate(270deg);
}

/* アコーディオンボディ */
.faq-footer-body {
    display: none;
    background: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
}

.faq-footer-body.open {
    display: block;
}

/* ===== 解決しない場合：セクション内レイアウト ===== */
.faq-footer-section {
    padding: var(--spacing-md);
}

.faq-footer-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.faq-footer-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-main);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

/* secondary-md/default トークン準拠:
   font-size: 16px / font-weight: regular / border-radius: 8px
   color/text: #1AA3A1 / color/border: #1AA3A1 / color/background: #fff
   padding: 12px 24px */
.faq-footer-action-btn {
    display: flex;
    width: 100%;
    padding: 12px 24px;
    min-height: 44px;
    background: var(--color-bg-white);
    color: var(--color-brand-green);
    border: 1px solid var(--color-brand-green);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
}

.faq-footer-action-btn--secondary {
    /* secondary-mdと同じスタイルのため上書き不要 */
}

/* ===== 記事詳細（新デザイン / Figma準拠・kiki-henkou等） ===== */
.faq-article-content {
    padding: var(--spacing-sm) var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.faq-article-breadcrumb {
    font-size: var(--font-size-xs);
    color: var(--color-text-main);
    line-height: var(--line-height-normal);
}

.faq-article-breadcrumb .bc-link {
    color: var(--color-text-zutool-green);
    text-decoration: underline;
    cursor: pointer;
}

.faq-article-intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.faq-article-intro h1 {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-text-main);
}

.faq-article-intro p {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: var(--line-height-normal);
}

.faq-article-step-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--color-border-green);
}

/* アプリの使い方ガイド：目次と最初の見出しの間の緑ラインを非表示（このページのみ） */
.faq-article-step-list--no-top-border {
    border-top: none;
}

.faq-article-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-gray-light);
}

.faq-article-step-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-brand-green-dark);
}

.faq-article-step-body {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: var(--line-height-normal);
}

.faq-article-step-body ol,
ol.faq-article-step-body {
    padding-left: 21px;
}

.faq-article-step-body > * + * {
    margin-top: var(--spacing-sm);
}

.faq-article-step-body--tight > * + * {
    margin-top: 0;
}

/* 本文内のインラインリンク（Figma準拠：文字色は継承・下線のみ） */
.faq-article-inline-link {
    color: inherit;
    text-decoration: underline;
}

/* ===== 記事本文内の画像付き手順（スクリーンショット併記） ===== */
.faq-article-step-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    width: 100%;
}

.faq-article-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
}

.faq-article-step-item-text {
    align-self: flex-start;
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: var(--line-height-normal);
}

.faq-article-step-img {
    width: 260px;
    height: 180px;
    border: 1px solid var(--color-border-gray);
    object-fit: cover;
    border-radius: var(--border-radius-xs);
}

.faq-article-step-img--sm {
    width: 240px;
    height: 160px;
}

.faq-article-step-img--sm-tall {
    width: 190px;
    height: 298px;
}

.faq-article-step-img--sm-taller {
    width: 190px;
    height: 310px;
}

.faq-article-step-item-images {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
}

/* ===== アプリの使い方ガイド（目次・ステップ見出し二段階サイズ・全幅画像） ===== */
.faq-guide-toc {
    background: #DFF7F6;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.faq-guide-toc-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-brand-green-dark);
    text-align: center;
    width: 100%;
}

.faq-guide-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.faq-guide-toc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid #66C2C0;
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    text-decoration: none;
    width: 100%;
}

.faq-guide-toc-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-guide-toc-item-icon {
    width: 13px;
    height: 8px;
    object-fit: contain;
    flex-shrink: 0;
    transform: rotate(90deg);
}

/* ステップ見出し：①②は18px、③④⑤は16px（Figma準拠の二段階サイズ） */
.faq-article-step-title--lg {
    font-size: var(--font-size-lg);
}

.faq-article-step-title--sm {
    font-size: var(--font-size-base);
}

.faq-guide-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-gray-light);
}

.faq-guide-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    width: 100%;
}

.faq-guide-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.faq-guide-img {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border-gray);
    background: var(--color-bg-gray-light);
    object-fit: cover;
}

/* 複数箇所で繰り返し使う高さのみモディファイアクラス化する。
   1箇所しか使わない高さはインラインstyleのままでよい（クラスの増殖を避ける方針）。 */
.faq-guide-img--md {
    height: 213px;
}

.faq-article-caution-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.faq-article-caution {
    display: flex;
    gap: var(--spacing-2xs);
    align-items: flex-start;
    width: 100%;
}

.faq-article-caution-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.faq-article-caution p {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    line-height: var(--line-height-normal);
}

.faq-article-feedback-wrap {
    margin-top: 40px;
    padding: 0 var(--spacing-md) var(--spacing-xl);
}

.faq-article-feedback {
    background: var(--color-bg-gray);
    border-radius: var(--border-radius-md);
    padding: 20px var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.faq-article-feedback-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    text-align: center;
    line-height: var(--line-height-normal);
}

.faq-article-feedback-btns {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.faq-article-feedback-btn {
    width: 96px;
    padding: var(--spacing-sm) var(--spacing-lg);
    min-height: 44px;
    background: var(--color-bg-white);
    color: var(--color-brand-green);
    border: 1px solid var(--color-brand-green);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.25;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.faq-article-feedback-btn:active {
    opacity: 0.7;
}

/* 選択済み状態（secondary-md/active トークン準拠） */
.faq-article-feedback-btn--active {
    background: var(--color-brand-green);
    color: var(--color-text-white);
    border-color: var(--color-brand-green);
}

.faq-article-feedback-result {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    text-align: center;
    line-height: var(--line-height-normal);
}

.faq-article-feedback-result a {
    color: var(--color-brand-green-dark);
    text-decoration: underline;
}