/* About Page Styles */

/* 共通設定 */

/* 特定の要素のみリセット */
#about_page a {
    text-decoration: none;
}

#about_page ul {
    list-style: none;
    padding: 0;
}

#about_page * {
    box-sizing: border-box;
}

#about_page h1,
#about_page h2,
#about_page h3,
#about_page h4,
#about_page h5,
#about_page h6,
#about_page p {
    margin: 0;
    padding: 0;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

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

#about_page .section_title {
    display: flex;
    align-items: center;
    gap: 1em;
    position: relative;
}

#about_page .section_title::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #009ad2 50%, var(--main-color) 50%);
}

#about_page .section_title .jp {
    font-size: calc(40 * var(--px));
    color: var(--main-color);
    line-height: 1.6;
    letter-spacing: 0.02em;
}

#about_page .section_title .en {
    color: #c3c3ca;
    font-size: calc(24 * var(--px));
    line-height: 1;
    letter-spacing: 0.02em;
    font-family: 'Lato', sans-serif;
}

/* mv */
#about_page #mv {
    background-image: url('../images/about/mv.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 60px;
    border-radius: 16px;
}

#about_page #mv .title {
    font-size: calc(48 * var(--px));
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
    padding: 276px 22px 44px;
    line-height: 1.6em;
    letter-spacing: 0.02em;
}

/* performance_bg */

#about_page .performance_bg {
    position: relative;
}

#about_page .performance_bg::before {
    content: '';
    position: absolute;
    bottom: -115px;
    left: 0;
    width: 100%;
    height: 1420px;
    background-image: url('../images/about/performance_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* performance */
#about_page #performance {
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 0;
}

#about_page #performance .section_title {
    text-align: flex-start;
    max-width: var(--content-width2);
    margin-inline: auto;
    padding: 0 1em 1em;
}

@media (max-width: 1240px) {
    #about_page #performance .section_title {
        flex-direction: column-reverse;
        width: fit-content;
        margin-inline: auto;
    }

    #about_page #performance .section_title::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

#about_page #performance .content {
    display: flex;
    gap: 68px;
}

#about_page #performance .content .image_wrap {
    border-radius: 8px;
    margin-top: 56px;
    flex: 1 1 0;
    max-width: 554px;
    min-width: 0;
}

#about_page #performance .content .image_wrap .image {
    border-radius: 8px;
    width: 100%;
    height: auto;
}

#about_page #performance .content .text_wrap {
    padding-top: 112px;
    flex: 1 1 0;
    max-width: 662px;
    margin-top: 48px;
    padding-right: 1em;
    min-width: 0;
}

#about_page #performance .content .text_wrap .title {
    font-size: calc(22 * var(--px));
    font-weight: 700;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

#about_page #performance .content .text_wrap .text {
    font-size: calc(18 * var(--px));
    line-height: 2em;
    letter-spacing: 0.05em;
}

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

/* service */
#about_page #service {
    background-image: url('../images/about/service_bg.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 80px 0;
    border-radius: 24px;
}

#about_page #service .container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1em;
}

#about_page #service .section_title {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
    align-items: center;
}

#about_page #service .section_title::before {
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #009ad2 50%, #fff 50%);
}

#about_page #service .section_title .jp {
    color: #fff;
}

#about_page #service .text_wrap {
    font-size: calc(18 * var(--px));
    font-weight: 500;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    margin-top: 56px;
    color: #fff;
    margin-bottom: 64px;
    text-align: center;
}

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

#about_page #service .category .category_title {
    font-size: calc(32 * var(--px));
    font-weight: 700;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: #fff;
    position: relative;
    padding-left: 36px;
}

#about_page #service .category .category_title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../images/about/icon_service_title.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#about_page #service .category.registration .category_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 16px;
}

#about_page #service .category .category_item {
    background-color: #fff;
    padding: 48px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

#about_page #service .category .category_item .image_wrap {
    width: 100%;
    height: 196px;
    border-radius: 8px;
    background-color: #f6f6f9;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about_page
    #service
    .category
    .category_item.registration_01
    .image_wrap
    .image {
    width: 202.68px;
    height: auto;
    object-fit: contain;
}

#about_page
    #service
    .category
    .category_item.registration_02
    .image_wrap
    .image {
    width: 158.81px;
    height: auto;
    object-fit: contain;
}

#about_page #service .category .category_item .content {
    display: flex;
    flex-direction: column;
}

#about_page #service .category .category_item .title {
    font-size: calc(24 * var(--px));
    color: var(--main-color);
    font-weight: 700;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    margin-top: 24px;
    margin-bottom: 16px;
}

#about_page #service .category .category_item .content .description {
    font-size: calc(18 * var(--px));
    line-height: 2;
    letter-spacing: 0.05em;
}

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

#about_page #service .category .category_item .content .list_wrap .list_title {
    font-size: calc(18 * var(--px));
    color: var(--main-color);
    font-weight: 700;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    position: relative;
    padding: 0 32px 0 16px;
    width: fit-content;
}

#about_page
    #service
    .category
    .category_item
    .content
    .list_wrap
    .list_title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
}

#about_page #service .category .category_item .content .list_wrap .list {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#about_page #service .category .category_item .content .list_wrap .list .item {
    font-size: calc(18 * var(--px));
    line-height: 1.8em;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 28px;
}

#about_page
    #service
    .category
    .category_item
    .content
    .list_wrap
    .list
    .item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../images/about/check.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

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

#about_page #service .category.court .category_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 16px;
}

#about_page
    #service
    .category
    .category_items
    .category_item.court_01
    .image_wrap
    .image {
    max-width: 100%;
    max-height: 100%;
    width: 181.81px;
    height: auto;
    object-fit: contain;
}

#about_page
    #service
    .category
    .category_items
    .category_item.court_02
    .image_wrap
    .image {
    max-width: 100%;
    max-height: 100%;
    width: 166.9px;
    height: auto;
    object-fit: contain;
}

#about_page
    #service
    .category
    .category_items
    .category_item.court_03
    .image_wrap
    .image {
    max-width: 100%;
    max-height: 100%;
    width: 166.13px;
    height: auto;
    object-fit: contain;
}

#about_page #service .category .category_item .description {
    font-size: calc(18 * var(--px));
    line-height: 2;
    letter-spacing: 0.05em;
}

#about_page #service .category .category_item .description + .description {
    margin-top: 8px;
}

/* office */
#about_page #office {
    margin: 80px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

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

/* flow */
#about_page #flow {
    max-width: 1320px;
    margin: 0 auto 128px;
    background-color: #f6f6f9;
    padding: 80px 1em 73px;
    border-radius: 24px;
}

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

#about_page #flow .section_title {
    text-align: center;
    margin-bottom: 3em;
}

#about_page #flow .description {
    margin-top: 48px;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    font-weight: 500;
}

#about_page #flow .list {
    display: flex;
    flex-direction: column;
    margin-top: 58px;
    gap: 62px;
}

#about_page #flow .list .item {
    padding: 33px 40px 34px;
    display: flex;
    align-items: center;
    gap: 56px;
    background-color: #fff;
    border-radius: 8px;
}

#about_page #flow .list .item .image_wrap {
    max-width: 331px;
    width: calc(331 / 1440 * 100vw);
    height: 181px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about_page #flow .list .item .image_wrap .image {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

#about_page #flow .list .item .image_wrap .image {
    object-fit: contain;
}

#about_page #flow .list .item .content {
    flex: 1;
}

#about_page #flow .list .item .content .number {
    font-size: calc(24 * var(--px));
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 0.02em;
    padding: 2px 24px;
    background-color: var(--accent-color);
    border-radius: 50px;
    color: #fff;
    font-family: 'Lato', sans-serif;
}

#about_page #flow .list .item .content .title {
    font-size: calc(24 * var(--px));
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 0.02em;
    color: var(--main-color);
    margin-top: 20px;
    margin-left: 24px;
}

#about_page #flow .list .item .content .description {
    font-size: calc(18 * var(--px));
    line-height: 1.8em;
    letter-spacing: 0.02em;
    margin-top: 12px;
    margin-left: 24px;
    max-width: 540px;
}

#about_page #flow .list .item .content .contact_wrap {
    margin-top: 19px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-left: 24px;
}

#about_page #flow .list .item .content .contact_wrap .tel {
    font-size: calc(28 * var(--px));
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: var(--main-color);
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    position: relative;
    padding-left: 30px;
    display: flex;
    align-items: center;
}

#about_page #flow .list .item .content .contact_wrap .tel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../images/header/tel.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

#about_page #flow .list .item .content .contact_wrap .mail {
    font-size: calc(20 * var(--px));
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 27px 74px 26px 98px;
    background-color: var(--accent-color);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
}

#about_page #flow .list .item .content .contact_wrap .mail::before {
    content: '';
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../images/header/mail.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
}

#about_page #flow .list .item .content .contact_wrap .mail::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../images/about/arrow.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 34px;
    height: 34px;
}

#about_page #flow .list .item .content .contact_wrap .mail:hover {
    background-color: var(--accent-color-hover);
}

/* voice */
#about_page #voice {
    padding: 80px 0 56px;
    background-color: #f6f6f9;
    border-radius: 24px;
}

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

#about_page #voice .container .section_title {
    text-align: center;
    width: fit-content;
    margin-inline: auto;
    flex-direction: column;
}

#about_page #voice .container .section_title::before {
    left: 50%;
    transform: translateX(-50%);
}

#about_page #voice .container .description {
    margin-top: 67px;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-align: center;
    font-size: calc(18 * var(--px));
}

#about_page #voice .container .list {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#about_page #voice .container .list .item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

#about_page #voice .container .list .item .avatar {
    width: 136px;
    height: 152px;
    margin: 0 auto;
}

#about_page #voice .container .list .item .avatar .image {
    object-fit: contain;
}

#about_page #voice .container .list .item .title {
    font-size: calc(18 * var(--px));
    font-weight: 700;
    line-height: 1.6em;
    letter-spacing: 0.02em;
    color: var(--main-color);
    margin-top: 24px;
}

#about_page #voice .container .list .item .customer_info {
    font-size: calc(15 * var(--px));
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: #9b9b9b;
    margin-top: 12px;
}

#about_page #voice .container .list .item .text {
    font-size: calc(18 * var(--px));
    line-height: 1.6em;
    letter-spacing: 0.02em;
    color: var(--main-color);
    margin-top: 12px;
}

/* faq */

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

#about_page #faq .container {
    max-width: calc(1096px + 2em);
    margin: 0 auto;
    padding: 0 1em;
}

#about_page #faq .container .section_title {
    text-align: center;
    width: fit-content;
    margin-inline: auto;
    flex-direction: column;
}

#about_page #faq .container .section_title::before {
    left: 50%;
    transform: translateX(-50%);
}

#about_page #faq .container .description {
    margin-top: 67px;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-align: center;
    margin-bottom: 56px;
}

#about_page #faq .container .qa_item {
    margin-top: 24px;
    padding: 48px;
    background-color: #f6f6f9;
    border-radius: 8px;
}

#about_page #faq .container .qa_item .question {
    position: relative;
    padding-left: 64px;
}

#about_page #faq .container .qa_item .question::before {
    content: 'Q';
    position: absolute;
    left: 0;
    top: 0;
    font-size: calc(28 * var(--px));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: var(--accent-color);
    border-radius: 50px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.4;
}

#about_page #faq .container .qa_item .question .question_text {
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: var(--main-color);
    font-size: calc(24 * var(--px));
    font-weight: 700;
}

#about_page #faq .container .qa_item .answer {
    margin-top: 35px;
    padding-left: 64px;
    position: relative;
}

#about_page #faq .container .qa_item .answer::before {
    content: 'A.';
    position: absolute;
    left: 12px;
    top: 5px;
    font-size: calc(28 * var(--px));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--main-color);
}

#about_page #faq .container .qa_item .answer .answer_text {
    font-size: calc(18 * var(--px));
    line-height: 2;
    letter-spacing: 0.05em;
}

/* Contact Section Styles */
#about_page #contact {
    margin: 5em 1em;
    text-align: center;
}

#about_page #contact .section_title {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding-bottom: 1.5em;
    margin-bottom: 3em;
}

#about_page #contact .section_title::before {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#about_page #contact .section_title .jp {
    order: 2;
    margin: 0;
}

#about_page #contact .section_title .en {
    order: 1;
    margin: 0;
}

#about_page #contact .message {
    text-align: center;
    line-height: 1.8em;
}

#about_page #contact .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3em;
    margin-top: 5em;
}

#about_page #contact address {
    font-style: normal;
}

#about_page #contact .tel {
    font-size: calc(40 * var(--px));
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin: 0;
}

#about_page #contact .tel a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    color: var(--main-color);
}

#about_page #contact .tel a:hover {
    opacity: 0.8;
}

#about_page #contact .tel img {
    width: 0.8em;
    height: 0.8em;
}

#about_page #contact .hours {
    font-size: calc(14 * var(--px));
}

#about_page #contact .mail {
    margin: 0;
}

#about_page #contact .mail a {
    padding: 1.5em 4em;
    background-color: #ff781d;
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: block;
    position: relative;
    font-size: calc(28 * var(--px));
    border-radius: 0.5em;
    font-weight: bold;
}

#about_page #contact .mail a::after {
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    content: '';
    width: 0.8em;
    height: 0.8em;
    background-image: url('../images/header/arrow.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#about_page #contact .mail a:hover {
    background-color: var(--accent-color-hover);
}

#about_page #contact .mail img {
    position: absolute;
    width: 2em;
    height: 2em;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
}

#about_page #contact .mail span {
    font-size: calc(20 * var(--px));
    display: block;
    line-height: 1.4em;
}

/*----------------------------------------
   行政書士について
----------------------------------------*/
/* mv */
#about_page #mv.administrative-scrivener {
    background-image: url('../images/about/mv-administrative-scrivener1.jpg');
}
/* service */

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

#about_page
    #service.administrative-scrivener
    .category
    .category_item
    .image_wrap
    .image {
    width: 120px;
    height: auto;
    object-fit: contain;
}

/*----------------------------------------
   土地家屋調査士について
----------------------------------------*/
/* mv */
#about_page #mv.land-surveyor {
    background-image: url('../images/about/mv-land-surveyor.jpg');
}
/* service */
#about_page #service.land-surveyor .category.registration .category_items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

#about_page #service.land-surveyor .category.registration + .category {
    margin-top: 0;
}

#about_page
    #service.land-surveyor
    .category
    .category_items
    .category_item
    .image_wrap
    .image {
    width: 120px;
    height: auto;
    object-fit: contain;
}

/* faq */
#about_page #faq.land-surveyor .container .category_title {
    font-size: calc(32 * var(--px));
    font-weight: 700;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: var(--main-color);
    position: relative;
    /* padding-left: 36px; */
    margin-top: 56px;
}

#about_page #faq.land-surveyor .container .category_title::before {
    /* content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../images/about/icon_service_title.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; */
}