@charset "UTF-8";

/* 共通 */
.section-block {
    margin-bottom: 60px;
}


.profile-cont {
    margin: 0 10px;
}

/*チーム紹介の本文*/
.profile-text {
    font-size: 16px;
    color: #222222;
    line-height: 1.8;
}

/*プロフィールのブロック*/
.profile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 0 auto;
}

.profile-card {
    width: 235px;
    display: block;
    overflow: hidden;
    background-color: #ffffff;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    border: 3px solid #E8EAEE;
    border-radius: 5px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(28, 60, 82, 0.2);
}


/* 人物写真 */
.profile-card-image {
    display: block;
    width: 100%;
}

/* 写真下のテキスト部分 */
.profile-card-content {
    padding: 20px 15px;
}

/* 名前 */
.profile-card-name {
    margin: 0 0 10px;
    color: #222222;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}

/* 本文 */
.profile-card-text {
    margin: 0;
    color: #1C3C52;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}


/*その他スタッフ*/
.other-staff-btn {
    text-align: center;
    margin-top: 30px;
}

.other-staff-link {
    position: relative;
    text-align: center;
    color: #222222 !important;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    padding-right: 40px;
    transition: all ease .5s;
}

/* 黄色い丸矢印 */
.other-staff-link::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 30px;
    height: 30px;
    background-color: #F0BE4B;
    border-radius: 50%;
    transition: all ease .5s;
}

.other-staff-link::before {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    right: 10px;
    top: 9px;
    z-index: 2;
    transition: all ease .5s;
}

.other-staff-link:hover {
    text-decoration: underline;
}

.other-staff-link:hover::before {
    right: 0;
}

.other-staff-link:hover::after {
    right: -10px;
}



.consult-text {
    margin: 0 10px;
    line-height: 1.2;
}

/*contact*/
.contact-menu {
    width: 100%;
    padding: 25px 0;
    background-color: #E8EAEE;
    margin-bottom: 30px;
}


/* 3つの項目 */
.contact-menu-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    width: 90%;
    max-width: 880px;
}


/* 各項目共通 */
.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}


/* 上部アイコン */
.contact-main-icon {
    display: block;
    margin: 0 0 10px;
    color: #222;
    font-size: 60px !important;
}


/* =========================
   フリーダイヤル
   ========================= */

.contact-tel-content {
    min-height: 65px;
}

.contact-tel-label {
    margin: 0 0 4px;

    color: #ff5268;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
}

.contact-tel-number {
    display: block;

    color: #222;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;

    text-decoration: none;
    white-space: nowrap;
    transition: all ease .3s;
}

.contact-tel-number:hover {
    text-decoration: underline !important;
}

.contact-tel-hours {
    margin: 5px 0 0;

    color: #444;
    font-size: 13px;
    line-height: 1.4;
}


/* =========================
   メール・LINEボタン
   ========================= */

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-height: 56px;
    padding: 8px 20px 8px 30px;

    box-sizing: border-box;
    border-radius: 9px;

    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;
}


.contact-button-mail {
    background-color: #4843e8;
}


.contact-button-line {
    background-color: #3acb49;
}


.contact-link-icon {
    flex-shrink: 0;
    font-size: 20px;
}


/* =========================
   下部注記
   ========================= */

.contact-note {
    width: 90%;
    max-width: 1000px;

    margin: 14px auto 0;

    color: #444;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* 電話番号の文字色が変わらないように上書き */
.contact-tel-number,
.contact-tel-number:link,
.contact-tel-number:visited,
.contact-tel-number:hover,
.contact-tel-number:active {
    color: #222;
    text-decoration: none;
}

/* メール・LINE も同様に上書き*/
.contact-button,
.contact-button:link,
.contact-button:visited,
.contact-button:hover,
.contact-button:active {
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width: 767px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        margin: 0 auto;
    }

    .contact-menu-inner {
        flex-direction: column;
        gap: 30px;
    }

    .contact-main-icon {
        font-size: 50px !important;
        margin-bottom: 5px;
    }
}

/* スライダー01　専門特化 */

.specialization .center-heading {
    margin-top: 35px;
    font-size: 20px;
    color: #1C3C52;
    font-weight: bold;
    text-align: center;
}

.specialization .field-list {
    display: flex;
    width: 400px;
    gap: 8px 15px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.specialization .field-item {
    list-style: none;
    font-weight: bold;
    font-size: 20px;
    padding-left: 18px;
    padding-right: 5px;
    border-bottom: 1px solid #F0BE4B;
    position: relative;
}

.specialization .field-item::before {
    position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    background: #1C3C52;
    transform: rotate(45deg);
    top: calc(50% - 8px);
    left: 0;
}

.specialization .field-itm--sm {
    font-size: 16px;
    font-weight: bold;
}

.specialization .center-heading-sub {
    font-size: 24px;
    color: #1C3C52;
    font-weight: bold;
    text-align: center;
    margin: 24px 0;
}

.specialization .body-text {
    margin: 0 10px;
    font-size: 18px;
    color: #222222;
}

@media screen and (max-width: 767px) {
    .specialization .field-list {
        gap: 5px 15px;
        width: 100%;
    }
}

.specialization .three-blocks {
    margin: 30px 10px 0;
    display: flex;
    gap: 10px;
}

.specialization .three-block {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: 35px 20px;
    background-color: #ffffff;
    text-align: center;
    box-sizing: border-box;
}

/* 左上の三角形 */
.specialization .three-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 45px solid #E8EAEE;
    border-right: 45px solid transparent;
}

/* 右下の三角形 */
.specialization .three-block::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 45px solid #E8EAEE;
    border-left: 45px solid transparent;
}

/* 01・02・03 */
.specialization .three-block-number {
    position: relative;
    z-index: 1;
    color: #F0BE4B;
    margin-bottom: 3px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
}

/* 見出し */
.specialization .three-block-title {
    position: relative;
    z-index: 1;
    margin: 0 0 15px;
    color: #1C3C52;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}

/* 本文 */
.specialization .three-block-text {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #222222;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.2;
    text-align-last: left;
}

/* スマホでは縦並び */
@media screen and (max-width: 767px) {
    .specialization .three-blocks {
        flex-direction: column;
    }
}

/* 相談内容の6つのブロック */
.specialization .issue-grid {
    margin: 0 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.specialization .issue-card {
    padding: 20px;
    background-color: #E8EAEE;
    box-sizing: border-box;
}

.specialization .issue-card-buttons {
    display: flex;
    gap: 10px;
}

.specialization .issue-card-buttons .issue-card-button {
    flex: 1;
}

@media screen and (max-width: 767px) {
    .specialization .issue-card-buttons {
        flex-direction: column;
    }
}

/* 見出し */
.specialization .issue-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1C3C52;
    font-size: 20px;
    font-weight: bold;
}

/* 見出し横の画像アイコン */
.specialization .issue-card-icon {
    width: 35px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 本文 */
.specialization .issue-card-text {
    margin: 15px 0;
    color: #222222;
    font-size: 14px;
    line-height: 1.2;
}

/* 白いボタン */
.specialization .issue-card-button {
    position: relative;
    display: block;
    padding: 9px 45px 9px 16px;
    background-color: #ffffff;
    color: #1C3C52 !important;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

/* 黄色い丸矢印 */
.specialization .issue-card-button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: #F0BE4B;
    color: #ffffff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    transform: translateY(-50%);
    transition: all 0.25s ease;
}

.specialization .issue-card-button::before {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    right: 17px;
    top: 13px;
    z-index: 2;
}

/* ホバー */
.specialization .issue-card-button:hover {
    c background-color: #fffaf0;
    box-shadow: 0 4px 10px rgba(28, 60, 82, 0.15);
    transform: translateY(-2px);
}

/* スマホでは1列 */
@media screen and (max-width: 767px) {
    .specialization .issue-grid {
        grid-template-columns: 1fr;
    }
}

/* 金山相談センター */
.ky-office .lead {
    text-decoration: underline;
}

.ky-office .flexbox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ky-office .bnrbox {
    background: transparent;
    padding: 30px 15px;
    text-align: center;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
}

.ky-office .bnrbox span.l01,
.ky-office .souzokubnr span.l01 {
    font-size: 20px;
    color: #1C3C52;
    display: block;
    font-weight: bold;
}

.ky-office .l01 .l01-emphasis {
    color: #EDC216;
    font-size: 30px;
    font-weight: bold;
}

.ky-office .image-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    margin: 20px auto;
    overflow: hidden;
    background-color: #e8eaee;
    border-radius: 50%;
}

.ky-office .image-circle img {
    display: block;
    width: 95%;
    object-fit: contain;
}

.ky-office .bnrbox span.l02 {
    font-size: 16px;
    color: #222222;
    display: block;
    margin-bottom: 15px;
}


.ky-office .example {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    box-sizing: border-box;
    width: 100%;
    padding: 32px 0 0;
    margin-bottom: 20px;
}

/* 各ボックス */
.ky-office .plus-box {
    position: relative;
    padding: 20px 15px 30px;
    background-color: #e8eaee;
    border: none;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ky-office .plus-box:last-of-type::after,
.ky-office .plus-box:last-of-type::before {
    display: none;
}

.ky-office .plus-box::before {
    position: absolute;
    content: "";
    background: #1C3C52;
    width: 40px;
    height: 10px;
    top: calc(50% - 10px);
    right: -27px;
    z-index: 2;
}

.ky-office .plus-box::after {
    position: absolute;
    content: "";
    background: #1C3C52;
    width: 10px;
    height: 40px;
    top: calc(50% - 25px);
    right: -12px;
    z-index: 2;
}

/* ボックス上部のタイトル */
.ky-office .plus-box-title {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 8px 16px;
    background-color: #1c3c52;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    transform: translate(-50%, -50%);
}

/* 画像がボックスの外へ出ないようにする */
.ky-office .plus-box img {
    text-align: center;
    width: 100%;
    max-width: 140px;
    height: auto;
}

/* 説明文 */
.ky-office .plus-box .l02 {
    display: block;
    margin: 0;
    color: #222222;
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
}

.ky-office .case {
    text-align: center;
    color: #1C3C52;
    font-weight: bold;
    font-size: 16px;
}

.ky-office .case .instant {
    padding: 3px 16px 2px;
    background-color: #1c3c52;
    color: #ffffff;
    font-size: 16px;
    font-weight: Medium;
}

.ky-office .profile-grid {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
}

.ky-office .profile-card {
    width: 235px;
}

.ky-office .lawyer>div {
    width: 21%;
}

.ky-office .lawyer p.name {
    font-size: 16px;
}

.ky-office .lawyer span {
    font-size: 13px;
}

.ky-office .lawyer>.aligncenter {
    width: 21%;
}

@media screen and (max-width: 959px) {
    .ky-office .flexbox {
        grid-template-columns: 1fr;
    }

    .ky-office .bnrbox {
        width: auto;
    }

    .ky-office .lawyer>div {
        width: auto;
    }

    .ky-office .lawyer>.aligncenter {
        width: auto;
    }

    .ky-office .example {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .ky-office .plus-box {
        flex: none;
        width: 100%;
    }

    .ky-office .plus-box::before {
        right: calc(50% - 20px);
        top: calc(100% + 23px);
    }

    .ky-office .plus-box::after {
        top: calc(100% + 9px);
        right: calc(50% - 6px);
    }

    .ky-office .plus-box-title {
        max-width: calc(100% - 32px);
    }

    .ky-office .plus-mark {
        flex: none;
        width: 100%;
        height: 56px;
        transform: none;
    }
}

/* スライダー03　相続相談センター */

.ky-souzoku .solution-item {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 20px;
    width: 75%;
    max-width: 650px;
    margin-bottom: 30px;
}

.ky-souzoku .solution-item:nth-of-type(2n) {
    margin-left: auto;
}

.ky-souzoku .solution-image {
    width: 170px;
    height: auto;
    flex-shrink: 0;
}

.ky-souzoku .solution-content {
    flex: 1;
}

.ky-souzoku .solution-heading {
    align-items: baseline;
    gap: 15px;
    margin-bottom: 10px;
}

.ky-souzoku .highlight-number {
    color: #EDC216;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
}

.ky-souzoku .highlight-text {
    color: #182F50;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

.ky-souzoku .solution-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.ky-souzoku .solution-btn {
    width: 100%;
    padding: 10px 45px 10px 15px;
    background: #fff;
    border: 2px solid #182F50;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    color: #182F50 !important;
    display: block;
    margin-top: 10px;
    position: relative;
}


/* 黄色い丸矢印 */
.ky-souzoku .solution-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: #F0BE4B;
    color: #ffffff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    transform: translateY(-50%);
    transition: all 0.25s ease;
}

.ky-souzoku .solution-btn::before {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    right: 24px;
    top: 13px;
    z-index: 2;
}

/* ホバー */
.ky-souzoku .solution-btn:hover {
    background-color: #fffaf0;
    box-shadow: 0 4px 10px rgba(28, 60, 82, 0.15);
    transform: translateY(-2px);
}

.ky-souzoku .detail-btn {
    color: #222222 !important;
    font-size: 16px;
    font-weight: bold;
    padding: 0 50px 5px 10px;
    border-bottom: 2px dotted #EDC216;
    position: relative;
    transition: all 0.25s ease;
    line-height: 2.5;
}

/* 黄色い丸矢印 */
.ky-souzoku .detail-btn::after {
    content: "";
    position: absolute;
    bottom: 5px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: #F0BE4B;
    color: #ffffff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    transition: all 0.25s ease;
}

.ky-souzoku .detail-btn::before {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    right: 24px;
    bottom: 13px;
    z-index: 2;
    transition: all 0.25s ease;
}

.ky-souzoku .detail-btn:hover:before {
    right: 9px;
}

.ky-souzoku .detail-btn:hover::after {
    right: 0px;
}

.ky-souzoku .team-detail-button {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}

.ky-souzoku .solution-link-arrow {
    font-size: 24px;
    line-height: 1;
}

.ky-souzoku .case-guide {
    margin: 50px auto;
    padding: 25px 30px 30px;
    background-color: #E8EAEE;
    text-align: center;
}

.ky-souzoku .case-guide-text {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: bold;
    color: #222222;
}

.ky-souzoku .case-guide .detail-button {
    margin-left: auto;
    margin-right: auto;
}

.ky-souzoku .flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}



@media screen and (max-width: 767px) {
    .ky-souzoku .solution-item {
        width: 90%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0 auto 60px;
    }

    .ky-souzoku .solution-heading {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 10px;
        line-height: 1.2;
    }

    .ky-souzoku .highlight-text span {
        font-size: 16px;
        font-weight: bold;
    }
}