/* ==================================== */
/* 03. ページヘッダー (Page Header)     */
/* ==================================== */
/* HTMLに .page-title-overlay が追加されているため、それに合わせて調整 */


.flex-strong {
    color: #333;
}

/* ページタイトルをオーバーレイ */
.page-title-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN W4", sans-serif;
    white-space: nowrap;
}

.page-title-overlay h1 {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
}




/* ==================================== */
/* 05. コンテンツブロック (Content Blocks) */
/* ==================================== */
.content-block {
    /* 開発者ツールで確認された余白を調整 */
    margin-top: 2rem;
    /* ここを調整してセクション間の余白を変更してください */
    padding: 1rem 0;
}

.content-inner {
    max-width: 800px;
    margin: 0 auto;
}

.text-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
    /* テキストを両端揃えに */
}


/* ==================================== */
/* 05. イントロセクション (Intro Section) */
/* ==================================== */
.intro-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* アイテム間の隙間 */
    text-align: left;
    margin-right: 5%;
    margin-left: 5%;
}

.intro-content .content-item {
    flex: 1 1 45%;
    /* 2列レイアウト */
    min-width: 300px;
    padding: 20px;
    background-color: var(--base-color);
    border: 1px solid var(--border-color);
    border-radius: 15px;
}

.intro-content .content-item h3 {
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
    line-height: 1.5;
}

.intro-content .content-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dark-gray);
}


/* ==================================== */
/* 06. フローセクション (Flow Section) */
/* ==================================== */
/* フローセクションの導入文の余白を調整 */
.flow-section .container>p {
    margin: 5% auto;
    /* 上下5%, 左右中央寄せ */
    max-width: 800px;
    /* 必要に応じて幅を制限 */
}

.flow-steps {
    max-width: 900px;
    margin: 0 auto;
}

.flow-item {
    display: flex;
    align-items: center;
    text-align: left;
    margin-bottom: 40px;
    position: relative;
    /* padding-left は削除し、Flexboxでスペースを確保します */
    min-height: 80px;
}

/* 番号のコンテナを別に作成（HTMLの調整が必要） */
.step-number-container {
    /* 固定幅を設定して、Flexboxの左側の列として機能させる */
    flex-basis: 100px;
    /* ここを調整してスペースを確保 */
    flex-shrink: 0;
    /* 幅を縮めない */
    position: relative;
    /* step-numberの基準位置 */
    height: 70px;
    /* 番号の高さに合わせて */
}

.step-number {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--base-color);
    font-size: 2.5rem;
    font-weight: bold;
    z-index: 2;
    border: 5px solid var(--base-color);
    margin-left: 2rem;
}

.step-content {
    /* Flexboxで残りのスペースを埋める */
    flex-grow: 1;
    /* 番号のコンテナとの間に余白を追加 */
    padding-left: 7rem;
}

/* 最後のアイテムの線は非表示 */
.flow-steps .flow-item:last-child::after {
    display: none;
}

.step-content h4 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 10px;
    font-weight: bold;
}

.step-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dark-gray);
}

.flow-notes {
    margin-top: 60px;
    padding: 30px;
    background-color: var(--light-gray);
    border-radius: 15px;
    text-align: left;
    max-width: 700px;
    margin: 60px auto 0 auto;
    /* 上60px, 左右auto, 下0 に修正 */
}

.flow-notes p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 15px;
}

.flow-notes p:last-child {
    margin-bottom: 0;
}

.flow-notes strong {
    color: var(--accent-color);
}

.flow-notes a {
    color: var(--accent-color);
    text-decoration: underline;
}


/* ==================================== */
/* 07. FAQセクション (FAQ Section)      */
/* ==================================== */
.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--base-color);
    border-radius: 15px;
    border: 2px solid var(--accent-color);
    margin-bottom: 20px;
    overflow: hidden;
    text-align: left;
    transition: box-shadow 0.3s ease;
}

.faq-item {
    width: 100%;
    box-sizing: border-box;
}


/* ホバー時と開いているときのスタイル */
.faq-item:hover,
.faq-item.is-active {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* アクティブ時にボーダーの色を変更 */
}

.faq-item h4 {
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: bold;
    padding: 20px 30px;
    cursor: pointer;
    position: relative;
    /* transitionを追加して矢印の回転を滑らかにする */
    transition: background-color 0.3s ease;
}

/* アクティブ時の背景色 */
.faq-item.is-active h4 {
    background-color: var(--light-gray);
}

.faq-item h4::before {
    content: 'Q.';
    /* Q.アイコン */
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    color: var(--accent-color);
    font-weight: 900;
    margin-right: 15px;
}

.faq-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dark-gray);
    padding: 0 30px 20px 60px;
    /* Q.アイコンのスペース分パディングを調整 */


    /* JavaScriptで制御するため、デフォルトは非表示 */
}


/* ==================================== */
/* 09. レスポンシブデザイン (Responsive) */
/* ==================================== */
@media (max-width: 768px) {
    /* ... 他のレスポンシブスタイルは前回と同じ ... */

    /* FAQセクションのSP版スタイル */
    .faq-item h4 {
        font-size: 1rem;
        padding: 15px 20px;
    }

    .faq-item p {
        padding: 0 20px 15px 50px;
    }

    .faq-item h4::after {
        right: 15px;
    }

    /* ... 以下、前回のコードのまま ... */
}


/* ==================================== */
/* 08. 利用者の声セクション (Voice Section) */
/* ==================================== */
.voice-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    padding: 50px 0;
}

.voice-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background-color: transparent;
    padding: 30px;
    border-radius: 20px;
    border: 2px solid #333;
}

.voice-icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--base-color);
    border: 2px solid #333;
}

.voice-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voice-content {
    flex-grow: 1;
}

.voice-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 10px;
}

.voice-content p:last-child {
    margin-bottom: 0;
}

.voice-content strong {
    font-weight: bold;
}

/* ==================================== */
/* 09. レスポンシブデザイン (Responsive) */
/* ==================================== */
@media (max-width: 768px) {
    .content-block {
        /* 開発者ツールで確認された余白を調整 */
        margin-top: 0rem;
        /* ここを調整してセクション間の余白を変更してください */
        padding: 1rem 0;
    }

    /* ページヘッダー */
    .page-title-overlay h1 {
        font-size: 1rem !important;
    }

    /* セクションタイトル */
    .section-title {
        font-size: 1.2rem;
        margin-top: 0.8rem;
    }

    .heading-block {
        margin-bottom: 30px;
    }



    /* フローセクション */
    .flow-item {
        padding-left: 80px;
        min-height: 70px;
        margin-bottom: 30px;
    }

    .flow-item::after {
        left: 35px;
        top: 45px;
        bottom: -15px;
    }

    .step-number {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .step-content h4 {
        font-size: 1.2rem;
    }

    .flow-notes {
        margin-top: 40px;
        padding: 20px;
    }

    /* FAQセクション */
    .faq-item h4 {
        font-size: 1rem;
        padding: 15px 20px;
    }

    .faq-item p {
        padding: 0 20px 15px 50px;
    }

    /* 利用者の声セクション */
    .voice-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .voice-icon {
        width: 80px;
        height: 80px;
    }

    .voice-content {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .flow-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-number-container {
        flex-basis: auto;
        height: auto;
        margin-bottom: 1rem;
    }

    .step-number {
        position: static;
        transform: none;
        margin-left: 0;
        margin: 0 auto;
    }

    .step-content {
        padding-left: 0;
        width: 100%;
    }

    .header-image-wrapper {
        height: 3rem;
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .header-image-wrapper {
        height: 3rem;
    }

    .page-title-overlay h1 {
        font-size: 1.5rem;
    }

    .flow-item {
        padding-left: 0;
    }

    .step-number {
        margin: 0 auto;
    }

    .intro-content {
        margin: 0 10%;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .voice-icon {
        width: 60px;
        height: 60px;
    }

    .step-content {
        text-align: center;
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .intro-content {
        margin-left: 0;
        margin-right: 0;
    }

    .intro-content .content-item {
        width: 100%;
    }

    .container {
        padding: 10px;
    }

    .content-item h3 {
        font-size: 1rem;
    }
}