/* About Page Styles */

/* 共通設定 */

.pc {
    display: none;
}

.sp {
    display: block;
}

/* セクションタイトル */

#about_page .section_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    padding-bottom: 1em;
}

#about_page .section_title::before {
    bottom: 0;
}

#about_page .section_title .jp {
    font-size: calc(30 * var(--px));
}

#about_page .section_title .en {
    font-size: calc(16 * var(--px));
}

/* メインビジュアルセクション */
#about_page #mv {
    margin: 0 1em;
}

#about_page #mv .title {
    font-size: calc(32 * var(--px));
    padding: calc(300 / 390 * 100%) calc(16 / 390 * 100%) calc(16 / 390 * 100%);
}

/* performance */
#about_page #performance {
    padding: 40px 0;
}

#about_page #performance .section_title {
    flex-direction: column;
    margin-left: 1em;
}

#about_page #performance .section_title::before {
    left: 0;
    transform: none;
}

#about_page #performance .content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#about_page #performance .content .image_wrap {
    border-radius: 8px;
    max-width: 100%;
    margin-top: 56px;
    margin: 56px 1em 0;
}

#about_page #performance .content .text_wrap {
    padding: 0 1em 0;
    margin: 0;
}

#about_page #performance .content .text_wrap .title {
    font-size: calc(20 * var(--px));
    margin-bottom: 30px;
}

#about_page #performance .content .text_wrap .text {
    font-size: calc(16 * var(--px));
}

#about_page #performance .content .text_wrap .text + .text {
    margin-top: 16px;
}

/* service */
#about_page #service {
    padding: 40px 0;
}

#about_page #service .section_title {
    flex-direction: column-reverse;
    width: 100%;
    align-items: flex-start;
}

#about_page #service .section_title::before {
    left: 0;
    transform: none;
}

#about_page #service .text_wrap {
    font-size: calc(18 * var(--px));
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: left;
}

#about_page #service .text_wrap .text + .text {
    margin-top: 16px;
}

#about_page #service .category .category_title {
    font-size: calc(24 * var(--px));
    padding-left: 32px;
}

#about_page #service .category .category_title::before {
    width: 20px;
    height: 20px;
}

#about_page #service .category.registration .category_items {
    grid-template-columns: 1fr;
}

#about_page #service .category .category_item {
    padding: 32px 1em 32px;
}

#about_page #service .category .category_item .title {
    font-size: calc(20 * var(--px));
    margin-top: 20px;
    margin-bottom: 12px;
}

#about_page #service .category .category_item .content .description {
    font-size: calc(16 * var(--px));
}

#about_page #service .category .category_item .content .list_wrap {
    margin-top: 20px;
}

#about_page #service .category .category_item .content .list_wrap .list_title {
    font-size: calc(18 * var(--px));
}

#about_page #service .category .category_item .content .list_wrap .list {
    margin-top: 18px;
}

#about_page #service .category .category_item .content .list_wrap .list .item {
    font-size: calc(16 * var(--px));
}

#about_page #service .category + .category {
    margin-top: 56px;
}

#about_page #service .category.court .category_items {
    grid-template-columns: 1fr;
}

#about_page #service .category.court .category_item .description {
    font-size: calc(16 * var(--px));
}

/* office */
#about_page #office {
    margin: 40px 0;
}

#about_page #office .image_wrap {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* flow */
#about_page #flow {
    margin: 0 auto 40px;
    padding: 40px 0 36px;
}

#about_page #flow .container {
    max-width: var(--content-width2);
    margin: 0 auto;
    padding: 0 1rem;
}

#about_page #flow .container .description {
    font-size: calc(18 * var(--px));
    margin-top: 40px;
}

#about_page #flow .list {
    gap: 32px;
    margin-top: 40px;
}

#about_page #flow .list .item {
    padding: 32px 1em 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

#about_page #flow .list .item .image_wrap {
    max-width: 331px;
    height: auto;
    width: 100%;
}

#about_page #flow .list .item .content .number {
    font-size: calc(20 * var(--px));
}

#about_page #flow .list .item .content .title {
    font-size: calc(20 * var(--px));
    margin-top: 16px;
    margin-left: 0;
}

#about_page #flow .list .item .content .description {
    font-size: calc(16 * var(--px));
    margin-top: 12px;
    margin-left: 0;
    padding-right: 0;
}

#about_page #flow .list .item .content .contact_wrap {
    margin-top: 16px;
    gap: 20px;
    margin-left: 0;
    align-items: center;
    justify-content: center;
}

#about_page #flow .list .item .content .contact_wrap .tel {
    font-size: calc(24 * var(--px));
}

#about_page #flow .list .item .content .contact_wrap .mail {
    font-size: calc(18 * var(--px));
    padding: 22px 60px 22px 80px;
}

#about_page #flow .list .item .content .contact_wrap .mail::before {
    left: 32px;
    width: 34px;
    height: 34px;
}

/* voice */
#about_page #voice {
    padding: 40px 0 32px;
}

#about_page #voice .container {
    max-width: var(--content-width2);
    margin: 0 auto;
    padding: 0 1em;
}

#about_page #voice .container .section_title {
    flex-direction: column-reverse;
    align-items: flex-start;
    width: 100%;
}

#about_page #voice .container .section_title::before {
    left: 0;
    transform: none;
}

#about_page #voice .container .description {
    font-size: calc(18 * var(--px));
    margin-top: 40px;
}

#about_page #voice .container .list {
    grid-template-columns: 1fr;
    margin-top: 40px;
}

#about_page #voice .container .list .item .text {
    font-size: calc(16 * var(--px));
}

/* faq */

#about_page #faq {
    padding-top: 40px;
}

#about_page #faq .container .section_title {
    flex-direction: column-reverse;
    align-items: flex-start;
    width: 100%;
}

#about_page #faq .container .section_title::before {
    left: 0;
    transform: none;
}

#about_page #faq .container .description {
    font-size: calc(18 * var(--px));
    margin-top: 40px;
    margin-bottom: 40px;
}

#about_page #faq .container .qa_item {
    margin-top: 20px;
    padding: 32px 1em 32px;
}

#about_page #faq .container .qa_item .question {
    padding-left: 40px;
}

#about_page #faq .container .qa_item .question::before {
    font-size: calc(20 * var(--px));
    width: 32px;
    height: 32px;
}

#about_page #faq .container .qa_item .question .question_text {
    font-size: calc(18 * var(--px));
}

#about_page #faq .container .qa_item .answer {
    margin-top: 16px;
    padding-left: 40px;
}

#about_page #faq .container .qa_item .answer::before {
    font-size: calc(20 * var(--px));
}

#about_page #faq .container .qa_item .answer .answer_text {
    font-size: calc(16 * var(--px));
}

/* Contact Section Styles */

#about_page {
    #contact {
        margin: 3em 1em;
        .section_title {
            &::before {
                left: 0;
                transform: none;
            }
        }
        .message {
            text-align: left;
        }
        .wrap {
            flex-direction: column;
        }
        .tel {
            font-size: calc(30 * var(--px));
        }
        .mail {
            a {
                font-size: calc(20 * var(--px));
                padding: 1em;
                padding-left: 3.5em;
                padding-right: 2.5em;
            }
        }
    }
}

/*----------------------------------------
   行政書士について
----------------------------------------*/
/* service */

#about_page #service.administrative-scrivener .category + .category {
    margin-top: 20px;
}

/*----------------------------------------
   土地家屋調査士について
----------------------------------------*/
/* service */
#about_page #service.land-surveyor .category.registration .category_items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* faq */
#about_page #faq.land-surveyor .container .category_title {
    font-size: calc(24 * var(--px));
    margin-top: 40px;
}