/* ==========================================================================
   fff-foundation — 12-front.css
   トップページ（front-page.php）のヒーロー以降のコンテンツ用スタイル。
   is_front_page() のときに enqueue。8グリッド世界観の中の個別調整。
   ========================================================================== */

.fff-top {
    margin-top: clamp(1rem, 4vw, 3rem);
    margin-bottom: var(--fff-space-5);
    overflow: hidden;
}

/* ===== 簡易診断カード ===== */
.fff-check-wrapper {
    position: relative;
}
.fff-check__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--fff-color-black);
    color: #fff;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 12px 36px;
    white-space: nowrap;
    z-index: 10;
}
.fff-check {
    position: relative;
    width: 100%;
    height: 100%;
    padding: clamp(28px, 4vw, 52px) clamp(16px, 2.5vw, 36px);
    background: var(--fff-color-paper);
    color: var(--fff-color-ink);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    outline: 7px solid var(--fff-color-black);
    outline-offset: -7px;
}
.fff-check__inner {
    width: 100%;
    margin: 0 auto;
}
.fff-check__label {
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fff-beige);
}
.fff-check__title {
    margin: 0;
    font-family: var(--fff-font-heading);
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-align: center;
}
.fff-check__lead {
    max-width: 580px;
    margin: 18px auto 28px;
    font-size: var(--fff-fs-sm);
    line-height: 1.9;
    color: var(--fff-color-muted);
    text-align: center;
}
.fff-check__card {
    background: transparent;
    padding: clamp(20px, 3vw, 36px);
}
.fff-check::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -60px;
    width: 620px;
    height: 620px;
    background: url('../images/check-deco.png') no-repeat center / contain;
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
}
.fff-check__progress {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fff-color-muted);
}
.fff-check__question {
    position: relative;
    z-index: 1;
    margin: 0 0 22px;
    font-family: var(--fff-font-heading);
    font-size: clamp(17px, 2.2vw, 26px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.03em;
}
.fff-check__choices {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.fff-check__choice {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--fff-color-black);
    background: rgba(255, 255, 255, 0.7);
    color: var(--fff-color-ink);
    padding: 14px 12px;
    font-size: var(--fff-fs-sm);
    line-height: 1.6;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fff-check__choice:hover,
.fff-check__choice:focus-visible {
    border-color: var(--fff-color-black);
    background: var(--fff-beige);
    color: #fff;
    transform: translateY(-2px);
    outline: none;
}
.fff-check__nav {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 24px;
}
.fff-check__nav--end {
    justify-content: flex-end;
}
.fff-check__back,
.fff-check__restart,
.fff-check__result-button {
    border: 1px solid rgba(26, 26, 24, 0.22);
    background: transparent;
    color: var(--fff-color-ink);
    padding: 10px 16px;
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fff-check__back:hover,
.fff-check__restart:hover,
.fff-check__result-button:hover {
    background: var(--fff-color-black);
    color: #fff;
    border-color: var(--fff-color-black);
}
.fff-check__back[disabled] {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.fff-check__result-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fff-beige);
}
.fff-check__result-title {
    position: relative;
    z-index: 1;
    margin: 0 0 20px;
    font-family: var(--fff-font-heading);
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 400;
    line-height: 1.4;
}
.fff-check__result-text {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0;
    font-size: var(--fff-fs-sm);
    line-height: 2;
    color: var(--fff-color-muted);
}
.fff-check__result-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.fff-check__result-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.fff-check__result-button--primary {
    background: var(--fff-color-black);
    color: #fff;
    border-color: var(--fff-color-black);
}
.fff-check__result-button--primary:hover {
    background: transparent;
    color: var(--fff-color-ink);
}
.fff-check__result-img {
    position: absolute;
    bottom: -30px;
    left: 62%;
    transform: translateX(-50%);
    width: 580px;
    height: auto;
    opacity: 0.42;
    pointer-events: none;
    z-index: 0;
}
.fff-check.is-result::after {
    display: none;
}

/* ===== GAP 比較4カラム（表の上・各サービスの「できること／でも届かない」）===== */
.fff-gap-compare {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: clamp(12px, 1.8vw, 24px);
    background: var(--fff-color-paper);
    color: var(--fff-color-ink);
}
.fff-gap-compare.has-divider {
    border-left: 1px solid rgba(26, 26, 24, 0.12);  /* カラム間の区切り線 */
}
.fff-gap-compare__arrow {
    color: var(--fff-beige);
    font-size: var(--fff-fs-xl);
    line-height: 1;
}
.fff-gap-compare__title {
    align-self: center;
    background: var(--fff-color-black);
    color: var(--fff-white);
    font-family: var(--fff-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: var(--fff-lh-tight);
    text-align: center;
    padding: 8px 18px;
    margin: 0;
}
.fff-gap-compare__note {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
    color: var(--fff-color-muted);
    margin: 0;
}
@media (max-width: 767px) {
    /* SPは縦積みなので区切りを上線に */
    .fff-gap-compare.has-divider {
        border-left: none;
        border-top: 1px solid rgba(26, 26, 24, 0.12);
    }
}

/* ===== GAP 既存サービス比較マトリクス ===== */
.fff-matrix__caption {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    color: var(--fff-color-ink);
    letter-spacing: var(--fff-ls-wide);
    margin: 0 0 10px 0;
}
.fff-gap-matrix {
    display: flex;               /* caption + 表 を縦に配分（見切れ防止）*/
    flex-direction: column;
    overflow-x: auto;            /* SPでは横スクロール（表が潰れないように）*/
    overflow-y: hidden;
    padding: clamp(12px, 2vw, 28px);  /* 周囲の余白（白ボックス内の余白）*/
    box-sizing: border-box;
    background: var(--fff-color-paper);  /* 余白も白にする */
}
.fff-matrix {
    display: grid;
    grid-template-rows: auto repeat(6, 1fr);
    flex: 1 1 auto;
    min-height: 0;               /* 親の残り高さに収める */
    min-width: 560px;            /* これ未満の幅では横スクロール */
    background: var(--fff-color-paper);
    color: var(--fff-color-ink);
    font-family: var(--fff-font-body);
    border: 1px solid rgba(26, 26, 24, 0.5);
}
.fff-matrix__row {
    display: grid;
    grid-template-columns: 1.6fr repeat(5, 1fr);
}
.fff-matrix__corner,
.fff-matrix__svc,
.fff-matrix__rowhead,
.fff-matrix__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(26, 26, 24, 0.4);
    border-right: 1px solid rgba(26, 26, 24, 0.4);
}
.fff-matrix__row:last-child .fff-matrix__cell,
.fff-matrix__row:last-child .fff-matrix__rowhead { border-bottom: none; }
/* 列ヘッダ（サービス名）*/
.fff-matrix__svc {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-xs);
    line-height: var(--fff-lh-tight);
    color: var(--fff-color-muted);
}
/* 行ヘッダ（評価項目）*/
.fff-matrix__rowhead {
    justify-content: flex-start;
    text-align: left;
    font-size: var(--fff-fs-sm);
    color: var(--fff-color-ink);
}
/* 記号セル */
.fff-matrix__cell span { line-height: 1; }
.fff-matrix__cell.is-full span { color: var(--fff-color-ink); font-size: 1.2rem; }     /* ● しっかり */
.fff-matrix__cell.is-part span { color: #8a744f; font-size: 1rem; }                    /* ○ 部分的（ベージュ濃）*/
.fff-matrix__cell.is-some span { color: #b6a589; font-size: 0.92rem; }                 /* △ わずか（薄ベージュ）*/
.fff-matrix__cell.is-none span { color: var(--fff-color-muted); font-size: 1rem; opacity: 0.55; } /* − 手薄 */
/* 自社列の強調（ベージュ地＋左に縦ライン＝列ごと主役に）*/
.fff-matrix__svc.is-fff,
.fff-matrix__cell.is-fff {
    background: rgba(162, 142, 109, 0.18);
    border-left: 2px solid var(--fff-beige);
}
.fff-matrix__svc.is-fff {
    font-family: var(--fff-font-heading);
    color: #6f5a38;            /* 自社列の見出しを濃いベージュで強調 */
    font-weight: 600;
    font-size: var(--fff-fs-md);
}
/* 自社の記号はブランド色（ベージュ）で塗って大きく＝他社の黒●と別格に */
.fff-matrix__cell.is-fff.is-full span { color: var(--fff-beige); font-size: 1.5rem; }
.fff-matrix__cell.is-fff.is-part span { color: var(--fff-beige); font-size: 1.1rem; }
.fff-matrix__row:last-child .fff-matrix__cell.is-fff { border-bottom: none; }

/* Landscape の問いかけ見出し: eyebrow無し・titleを大きく目立たせる（md→xl） */
.fff-top-landscape .fff-block__title {
    font-size: var(--fff-fs-xl);
    line-height: var(--fff-lh-tight);
}

/* Landscape ビジュアル: 白ボックスより下面に（z-index:0 で重なり時は白ボックスが前面）*/
.fff-top-visual {
    overflow: hidden;
    z-index: 0;
}
.fff-top-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 画像全体を切らずに収める（端が切れない）*/
    display: block;
}

/* お知らせの白ボックスは中身を上から並べる（block-card の中央寄せを打ち消し）*/
.fff-top .fff-block__content:has(.fff-top-news) {
    justify-content: flex-start;
}

/* ===== お知らせリスト（大きい白ボックス内）===== */
.fff-top-news {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.fff-top-news li {
    display: flex;
    align-items: baseline;
    gap: var(--fff-space-3);
    padding: var(--fff-space-3) 0;
}
.fff-top-news li + li {
    border-top: 1px solid var(--fff-color-line);
}
.fff-top-news time {
    flex: 0 0 auto;
    font-family: var(--fff-font-accent);
    font-size: var(--fff-fs-xs);
    color: var(--fff-color-muted);
    letter-spacing: var(--fff-ls-wide);
}
.fff-top-news span {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
}

@media (max-width: 767px) {
    .fff-top-news li {
        flex-direction: column;
        gap: 4px;
    }
}

/* ===== Landscape〜GAP 背景（画面全体固定レイヤー＋ポロポロ落下/逆再生）=====
   他ページ(.page-bg-layer)と同じ「画面全体に固定したレイヤーを8×6=48タイルに分割」方式。
   画面基準なので画像が潰れない。sentinel(row5〜32)が画面に入ると落下、出ると逆再生で
   上に戻る（JSが is-active / is-leaving を付与）。 */
.fff-voice-sentinel {
    pointer-events: none;
    visibility: hidden;   /* 範囲を占有するだけの透明マーカー（IntersectionObserver用）*/
}
.fff-voice-bg {
    position: fixed;
    inset: 0;
    z-index: -1;          /* ベース背景(body::before: -2)の上、本文コンテンツの下 */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    pointer-events: none;
}
.fff-voice-bg__tile {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-120%);
    will-change: transform, opacity;
}
/* タイルの中身: 画像全体を 800%x600% で配置し、位置オフセットで対応部分だけ見せる */
.fff-voice-bg__tile::before {
    content: '';
    position: absolute;
    top: calc(var(--tile-row, 0) * -100%);
    left: calc(var(--tile-col, 0) * -100%);
    width: 800%;
    height: 600%;
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
}
/* 画面に入ったら（JSが is-active 付与）タイルが落ちてくる */
.fff-voice-bg.is-active .fff-voice-bg__tile {
    animation: fff-bg-tile-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .fff-voice-bg__tile { opacity: 1; transform: none; animation: none !important; }
}

/* FFFメソッド以降の背景画像（voice-bg と同じ構造、画像切り替え版）*/
.fff-method-sentinel {
    visibility: hidden;
}
.fff-method-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    pointer-events: none;
}
.fff-method-bg__tile {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-120%);
    will-change: transform, opacity;
}
.fff-method-bg__tile::before {
    content: '';
    position: absolute;
    top: calc(var(--tile-row, 0) * -100%);
    left: calc(var(--tile-col, 0) * -100%);
    width: 800%;
    height: 600%;
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
}
.fff-method-bg.is-active {
    background-color: #444;   /* タイル落下前の地色：黒→濃いグレー→画像 の段差を緩和 */
}
.fff-method-bg.is-active .fff-method-bg__tile {
    animation: fff-bg-tile-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .fff-method-bg__tile { opacity: 1; transform: none; animation: none !important; }
}

/* VOICE/MARKET見出し: 2カラム幅で折り返さないよう nowrap + パディング絞る */
.fff-block--label.fff-voice-label .fff-block__title,
.fff-block--label.fff-market-label .fff-block__title {
    padding-left: 14px;
    padding-right: 32px;
    white-space: nowrap;
}

/* マーケットカードの反転タイトルを17pxに統一 */
.fff-card--media .fff-block__title { font-size: 17px; }

/* ===== VOICE つぶやき（フリップなし・黒背景に白文字で静かに）===== */
.fff-voice-murmur {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--fff-block-padding);
    overflow: hidden;            /* ブロックのマス目からはみ出さない */
    background: var(--fff-color-black);  /* 1ブロックの背景を黒に */
}
.fff-voice-murmur p {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-sm);
    line-height: 1.8;
    color: var(--fff-white);
    margin: 0;
}

/* ===== GAP 画像＋テキストオーバーレイ ===== */
.fff-gap-arrival-image {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.fff-gap-arrival-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.fff-gap-arrival-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
}
.fff-gap-arrival__lead {
    position: absolute;
    left: 50%;
    top: 82%;
    transform: translate(-50%, -50%);
    width: 80vw;
    font-family: var(--fff-font-heading);
    font-size: clamp(18px, 2.4vw, 38px);
    font-weight: 700;
    line-height: 1.5;
    color: var(--fff-white);
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* ===== GAP ポイントカード（画像なし・黒地 3枚横並び）===== */
.fff-gap-point {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: clamp(16px, 2vw, 32px);
    background: var(--fff-color-black);
}
.fff-gap-point__title {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-md);
    font-weight: 700;
    line-height: var(--fff-lh-tight);
    color: var(--fff-color-ink);
    background: var(--fff-color-paper);
    padding: 6px 14px;
    margin: 0;
    display: inline-block;
    align-self: center;
}
.fff-gap-point__body {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* ===== VOICE フリップカード（表=見出し+イラスト / 裏=文章）===== */
.fff-vflip {
    perspective: 1200px;
    cursor: pointer;
}
.fff-vflip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
    transform-style: preserve-3d;
}
/* ホバー（PC）・タップ/フォーカス（is-flipped をJSが付与）でめくる */
.fff-vflip:hover .fff-vflip__inner,
.fff-vflip:focus-visible .fff-vflip__inner,
.fff-vflip.is-flipped .fff-vflip__inner {
    transform: rotateY(180deg);
}
.fff-vflip__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: var(--fff-block-padding);
}
/* 表面: 画像を全面背景に、見出しを下部に重ねる */
.fff-vflip__front {
    background-color: #f8f7f4;       /* 画像背景のうっすらグレーに合わせる（白だと境が出る）*/
    background-size: 85%;            /* 表面いっぱい→少し小さく（周りに余白）*/
    background-position: center;
    background-repeat: no-repeat;
    color: var(--fff-color-ink);
    align-items: center;         /* 見出しを左右中央に */
    justify-content: flex-start; /* 見出しを上部に寄せる */
}
.fff-vflip__title {
    font-family: var(--fff-font-heading);
    font-size: var(--fff-fs-lg);
    font-weight: 700;
    line-height: var(--fff-lh-tight);
    text-align: center;
    margin: 0;
    /* 画像の余白に重なる。うっすらグレーの帯で読みやすく */
    background: rgba(248, 247, 244, 0.9);
    padding: 8px 12px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* 裏面: うっすらグレー地に文章（表面と統一）*/
.fff-vflip__back {
    background: #f8f7f4;
    color: var(--fff-color-ink);
    transform: rotateY(180deg);
    align-items: center;
    justify-content: center;
}
/* 内側に余白をとった黒縁（外周に余白、その内側に枠線のカード）*/
.fff-vflip__back::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 2px solid var(--fff-color-black);
    pointer-events: none;
}
.fff-vflip__body {
    font-family: var(--fff-font-body);
    font-size: var(--fff-fs-sm);
    line-height: var(--fff-lh-normal);
    text-align: center;
    margin: 0;
}

/* ==========================================================================
   FFFメソッドセクション（声・チェックリスト・Q&A）
   ========================================================================== */

/* チェックリスト（向いている人） */
.fff-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7em 2em;
}
.fff-checklist li {
    padding-left: 1.5em;
    position: relative;
    font-size: 0.9em;
    line-height: 1.65;
    color: var(--fff-color-ink);
}
.fff-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--fff-beige);
    font-weight: 700;
}

/* 声カード */
.fff-voice-card .fff-block__content {
    display: flex;
    flex-direction: column;
    padding: 0 clamp(1.2rem, 2vw, 1.8rem) clamp(1.2rem, 2vw, 1.8rem);
}
.fff-voice-head {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e7e2d6;
    margin-bottom: 1rem;
}
.fff-voice-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-bottom: -1px;
}
.fff-voice-meta { padding-bottom: 4px; }
.fff-voice-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fff-color-ink);
    margin: 0 0 2px;
}
.fff-voice-sub {
    font-size: 0.78rem;
    color: var(--fff-color-muted);
    margin: 0;
}
.fff-voice-body {
    font-size: 0.88rem;
    line-height: 1.85;
    color: var(--fff-color-muted);
    margin: 0;
}

/* Q&A 個別カード（吹き出し + 白カード重なり） */
.fff-faq-card.fff-block--light {
    background: transparent;
    position: relative;
}
.fff-faq-card .fff-block__content {
    padding: 0;
    display: block;
    height: 100%;
    text-align: center;
}
.fff-faq-card__q {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--fff-color-black);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 6px 10px 6px 6px;
    border-radius: 6px;
    margin: 10px 0 0 0;
    position: relative;
    max-width: calc(100% - 20px);
    line-height: 1.4;
    text-align: left;
    z-index: 2;
}
.fff-faq-card__q::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--fff-color-black);
}
.fff-faq-card__a {
    position: absolute;
    top: 22px;
    left: 8px;
    right: 8px;
    margin: 0;
    background: #fff;
    border-radius: 6px;
    padding: 2.8rem 1.4rem 1.6rem;
    font-size: var(--fff-fs-sm);
    line-height: 1.8;
    color: var(--fff-color-muted);
    box-shadow: 0 3px 14px rgba(0,0,0,0.09);
    z-index: 1;
}

/* Q&A リスト（バッジ付き） */
.fff-faq-list { margin: 0; padding: 0; }
.fff-faq-list__item {
    padding: 1.2em 0;
    border-bottom: 1px solid #e7e2d6;
}
.fff-faq-list__item:first-child { border-top: 1px solid #e7e2d6; }
.fff-faq-list__q {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fff-color-ink);
    margin: 0 0 0.6em;
}
.fff-faq-list__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fff-beige);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}
.fff-faq-list__a {
    margin: 0 0 0 44px;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--fff-color-muted);
}

/* Q&A アコーディオン */
.fff-faq {
    margin: 0;
}
.fff-faq__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.fff-faq__item:last-child {
    border-bottom: none;
}
.fff-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9em 0;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--fff-color-ink);
    user-select: none;
    list-style: none;
    gap: 1em;
}
.fff-faq__question::after {
    content: '+';
    font-size: 1.3em;
    font-weight: 300;
    color: var(--fff-beige);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
}
.fff-faq__item.is-open .fff-faq__question::after {
    transform: rotate(45deg);
}
.fff-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    font-size: 0.86em;
    line-height: 1.8;
    color: #555;
    padding: 0;
    margin: 0;
}
.fff-faq__item.is-open .fff-faq__answer {
    max-height: 300px;
    padding-bottom: 1.2em;
}

/* 視点カード：見出しを太字・少し大きく */
.fff-perspective-card .fff-block__title {
    font-weight: 700;
}

/* SP: チェックリスト1列 */
@media (max-width: 767px) {
    .fff-checklist {
        grid-template-columns: 1fr;
    }
}

/* ノートチェックリスト */
.fff-notebook {
    margin: 8px 12px 12px 8px;
    box-shadow: 10px 10px 0 0 var(--fff-beige);
}
.fff-notebook .fff-block__content {
    padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.8rem, 3vw, 2.8rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fff-notebook__lead {
    font-family: var(--fff-font-accent);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: var(--fff-beige);
    letter-spacing: 0.06em;
    margin: 0 0 3.6em;
}
.fff-notebook__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.fff-notebook__list li {
    position: relative;
    padding: 0.85em 0 0.85em 2em;
    border-bottom: 1px solid #e8e2d9;
    line-height: 1.65;
    color: #3a3530;
}
.fff-notebook__list li:first-child {
    border-top: 1px solid #e8e2d9;
}
.fff-notebook__list li::before {
    content: '';
    position: absolute;
    left: 0.2em;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--fff-beige);
    border-radius: 3px;
}


/* フロントページのプロフィールブロック: 写真エリアを小さく */
.home .fff-block--profile .fff-block__content {
    overflow: hidden;
}
.home .fff-block--profile .fff-block__profile-left {
    width: 28%;
}