.DiagResultPage {
    display: grid;
    gap: 20px;

    & > section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .TitleBlock {
        display: grid;
        justify-content: center;
        justify-items: center;
        padding: 30px 0px;

        .SubTitle {
            color: var(--PrimaryColor);
            font-size: 25px;
            font-weight: bold;
        }
        .Title {
            color: #000;
            font-size: 50px;
            font-weight: bold;
        }
    }

    .ResultBlock {
        display: grid;
        gap: 20px;
        justify-content: center;
        justify-items: center;

        margin-bottom: 30px;

        .Title {
            font-size: 50px;
            font-weight: bold;
        }
        .SubTitle {
            font-size: 20px;
            font-weight: bold;
        }
        .ResultTextContent {
            font-size: 50px;
            font-weight: bold;
            padding: 20px 40px;
            line-height: 1;
            border: 3px solid var(--PrimaryColor);
            background-color: #f0f0f0;
        }
        .ResultSubTextContent {
            font-size: 17px;
            color: var(--SubText1);
        }
        .ResultComment {
            width: 100%;
            max-width: 500px;
            font-size: 20px;
            font-weight: bold;
        }
    }

    .ContentBlock {
        width: 100%;
        display: grid;
        gap: 30px;
        padding-top: 30px;
        padding-bottom: 30px;

        .ContentTitle {
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }
    }

    .CustomerVoiceBlock {
        background-color: var(--LightPrimaryColor);

        .CustomerVoiceArea {
            display: grid;
            gap: 20px;
            row-gap: 30px;

            grid-template-columns: 1fr 1fr;

            .CustomerVoiceBox {
                padding: 10px;
                background-color: #fff;
                position: relative;
                border-radius: 0px 0px 4px 4px;

                .TitleRow {
                    display: grid;
                    align-items: center;
                    gap: 10px;
                    grid-template-columns: 50px 1fr;

                    .CustomerImg {
                        width: 100%;
                        object-fit: cover;
                    }

                    .Title {
                        font-size: 18px;
                        font-weight: bold;
                    }
                }

                .Voice {
                    color: var(--MainText2);
                    padding: 10px 0px;
                }
            }

            /* Borderだけ角丸で描画 */
            .CustomerVoiceBox::before {
                content: '';
                position: absolute;
                top: -4px;
                left: 0;
                right: 0;
                bottom: 0;
                border-top: 5px solid var(--PrimaryColor);
                border-radius: 3px;
            }
        }
    }

    .InfoBlock {
        position: relative;
        justify-content: center;

        .ContentTitle {
            display: grid;
            gap: 5px;
            padding: 0px 30px 10px 30px;

            border-bottom: 2px solid var(--PrimaryColor);

            .SubTitle_L {
                font-size: inherit;
                font-weight: bold;
            }
            .SubTitle_R {
                font-size: 0.8em;
                font-weight: normal;
            }
        }

        .InfoContentArea {
            font-size: 20px;
            line-height: 1.5;
            
            ul {
                padding-left: 20px;
            }

            li {
                margin-bottom: 10px;
            }
        }
    }
    .InfoBlock::before {
        background-image: url('/img/InfoImg.png');

        content: "";
        position: absolute;
        bottom: 5%;
        right: 10%;
        
        height: 70%;
        aspect-ratio: 1 / 1;
        
        background-size: cover;       /* 画像をコンテナに合わせる */
        background-position: center;  /* 画像内の中心を表示 */
        z-index: -1;
    }

    .FlowBlock {
        justify-items: center;
        background-color: #fff;

        .ContentTitle {
            color: #fff;
            padding: 10px 20px;
            background-color: var(--PrimaryColor);
        }

        .FlowContentArea {
            width: 100%;
            padding-left: 30px;
            padding-right: 30px;

            display: grid;
            gap: 10px;
            row-gap: 20px;
            grid-template-columns: 90px 1fr;

            .StepBadge {
                text-align: center;
                width: 90px;
                height: 50px;
                background: var(--PrimaryColor);
                color: #fff;
                clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);

                .Label {
                    font-size: 18px;
                }
                .Number {
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .FlowContent {

            }
        }

        .FlowDivider {
            width: 100%;            
            position: relative;
            
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                width: 100%;
                height: 2px;
                border-top: 2px dashed var(--PrimaryColor);
                z-index: 0;
            }
            .Content {
                width: fit-content;
                margin: 0 auto;
                padding: 10px 20px;
                background-color: #fff;
                position: relative;
                z-index: 1;
            }
        }
    }

    .QABlock {
        padding-left: 0px;
        padding-right: 0px;

        .QAContentBox {
            width: 100%;
            font-size: 1.2em;
        }
        
        details {
            width: 100%;
            background-color: var(--LightPrimaryColor);
            
            summary {
                width: 100%;
                padding: 15px 20px;
                background-color: #fff;
            }

            .Content {
                padding: 10px 20px;
            }
        }
    }
    
    .ArrowBlock {
        display: grid;
        justify-content: center;
        justify-items: center;

        img {
            width: 40px;
        }
    }

    .CTABlock {
        grid-column: 1/ -1;
    
        background-color: #FAFBE1;
        position: sticky;
        position: -webkit-sticky;
        bottom: 0;
    
        /* 画面幅いっぱいに */
        /* ただし、コンテンツ外になるので、コンテンツ内に下余白がCTABlock分必要になる */
        /* position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; */

        display: grid;
        gap: 20px;
        justify-content: center;
        justify-items: center;
        padding: 20px 10px;
        
        .Title {
            font-size: 20px;
            font-weight: bold;
            color: var(--PrimaryColor);
        }
        .CTAButton {
            font-size: 18px;
        }
    }
}

@media ( max-width: 768px ) {
    .DiagResultPage {
        .TitleBlock {
            .SubTitle {
                font-size: 20px;
            }
            .Title {
                font-size: 40px;
            }
        }
        
        .ResultBlock {
            .Title {
                font-size: 40px;
            }
            .SubTitle {
                font-size: 18px;
            }
            .ResultTextContent {
                font-size: 40px;
                padding: 20px 30px;
            }
            .ResultSubTextContent {
                font-size: 15px;
            }
            .ResultComment {
                font-size: 18px;
            }
        }

        .ContentBlock {
            .ContentTitle {
                font-size: 20px;
            }
        }

        .CustomerVoiceBlock {
            .CustomerVoiceArea {
                grid-template-columns: 1fr;

                .CustomerVoiceBox {
                    .TitleRow {
                        .Title {
                        }
                    }
                    .Voice {

                    }
                }
            }
        }

        .InfoBlock {
            .InfoContentArea {
                font-size: 18px;
            }
        }
        .InfoBlock::before {
            right: 0%;
        }

        .FlowBlock {
            .FlowContentArea {
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        .QABlock {
            .QAContentBox {
                font-size: 1em;
            }
        }
        
        .CTABlock {
            .Title {
                font-size: 18px;
            }
            .CTAButton {
                font-size: 16px;
            }
        }
    }
}