/* letter-spacingの計算式: letter-spacing: calc(【letter-spacingの%値】 / 100 * 【font-sizeのpx値】 / 10 * 1rem); */
/* line-heightの計算式: line-height: calc(【line-heightの%値】 / 100); */

main {
    background-color: #f5f5EE;
    position: relative;
}

.wrapper {
    display: flex;
    padding: 2.5rem;
    margin-bottom: 4rem;
    justify-content: end;
}

/* 共通コンポーネント */

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 5rem;
}

.more__btn {
    font-family: "Zen Maru Gothic";
    font-size: 2rem;
    line-height: calc(102 / 100);
    letter-spacing: calc(2 / 100 * 20 / 10 * 1rem);
    color: #FFFFFF;
    font-weight: 400;
    background-color: #E08D5B;
    border-radius: 4.2rem;
    padding: 1.2rem 5.6rem 1.2rem 3.1rem;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.more__btn:hover,
.more__btn:focus-visible {
    color: #E08D5B;
    background-color: #FFFFFF;
    border: 0.1rem solid #E08D5B;
}

.more__btn::before {
    content: "";
    width: 2rem;
    height: 0.3rem;
    background-color: #5cacc9;
    position: absolute;
    top: 61%;
    right: 2rem;
}

.more__btn::after {
    content: "";
    width: 1.5rem;
    height: 0.3rem;
    background-color: #5cacc9;
    position: absolute;
    top: 48%;
    right: 1.9rem;
    transform: rotate(45deg);
}

.more__btn--white {
    font-family: "Zen Maru Gothic";
    font-size: 2rem;
    line-height: calc(102 / 100);
    letter-spacing: calc(2 / 100 * 20 / 10 * 1rem);
    color: #434343;
    font-weight: 400;
    background-color: #ffffff;
    border-radius: 4.2rem;
    padding: 1.2rem 5.6rem 1.2rem 3.1rem;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.more__btn--white:hover,
.more__btn--white:focus-visible {
    color: #ffffff;
    background-color: #E08D5B;
}

.more__btn--white::before {
    content: "";
    width: 2rem;
    height: 0.3rem;
    background-color: #5cacc9;
    position: absolute;
    top: 61%;
    right: 2rem;
}

.more__btn--white::after {
    content: "";
    width: 1.5rem;
    height: 0.3rem;
    background-color: #5cacc9;
    position: absolute;
    top: 48%;
    right: 1.9rem;
    transform: rotate(45deg);
}

/* サイドバー */
/* heroセクション */
.right-area {
    width: 89rem;

}

.hero {
    position: relative;
    margin-left: 1.2rem;
    margin-bottom: 1.5rem;
    aspect-ratio: 1772 / 1232;
    background-image: url(../img/front-page/keyvisual_img_pic1.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius:1rem;
}

.hero__title {
    font-family: "Zen Maru Gothic";
    font-size: 3rem;
    font-weight:bold;
    line-height: calc(162 / 100);
    letter-spacing: calc(2 / 100 * 30 / 10 * 1rem);
    color: #434343;
    position: absolute;
    right: 0rem;
    bottom: 7rem;
    padding-top: 0;
    text-align: left;
}

.hero__subtitle {
    font-family: "Zen Maru Gothic";
    font-size: 1.5rem;
    font-weight:bold;
    line-height: calc(183 / 100);
    letter-spacing: calc(2 / 100 * 12 / 10 * 1rem);
    color: #434343;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    text-align: left;
}

.red-text {
    color: #FF5A1C;
}

.green-text {
    color: #86B662;
}
.hero__alphabet {
    font-family: "Zen Maru Gothic";
    font-size: 1.5rem;
    line-height: calc(183 / 100);
    letter-spacing: calc(75 / 100 * 15 / 10 * 1rem);
    font-weight: bold;
    color: #FFFFFF;
    position: absolute;
    top: 2rem;
    right: 0rem;
    text-align:right;
    filter: drop-shadow(0 0 1rem rgba(76, 76, 76, 0.93));
}

/* 新着情報 */

.news {
    max-width: 88.6rem;
    margin-left: 1.2rem;
    background-color: #FFFFFF;
    border-radius: 3.6rem;
    padding: 4rem 2.7rem 3.7rem 5.5rem;
}

.news__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news__head {
    display: flex;
    align-items: center;
}

.news__title {
    font-family: "Zen Maru Gothic";
    font-size: 2.4rem;
    line-height: calc(113 / 100);
    letter-spacing: calc(2 / 100 * 24 / 10 * 1rem);
    color: #434343;
    font-weight: 400;
    margin-right: 2.7rem;
}

.news__alphabet {
    font-family: "Zen Maru Gothic";
    font-size: 2.4rem;
    line-height: calc(113 / 100);
    letter-spacing: calc(2 / 100 * 24 / 10 * 1rem);
    color: #A1A1A1;
    font-weight: 400;
    position: relative;
}

.news__alphabet::before {
    content: "";
    width: 1.5rem;
    height: 0.1rem;
    background-color: #A1A1A1;
    display: inline-block;
    position: absolute;
    top: 54%;
    left: -2rem;
}

.news__list {
    margin-top: 3.1rem;
    display: flex;
    flex-direction: column;
    gap: 2.1rem;
}

.news__item {
    display: flex;
    gap: 2.1rem;
    align-items: center;
    min-width: 0;
}

.news__date,
.news__category,
.article__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    line-height: calc(114 / 100);
    letter-spacing: calc(2 / 100 * 14 / 10 * 1rem);
    font-weight: 400;
}

.news__date {
    color: #434343;
    flex-shrink: 0;
}

.news__category {
    color: #E08D5B;
    flex-shrink: 0;
    border: 0.1rem solid #E08D5B;
    border-radius: 1.3rem;
    padding: 0.3rem 1.2rem;
    max-width: 11rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.article__title {
    color: #434343;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* コンセプトセクション */
.concept {
    margin: 3.8rem 0 0;
}

.concept__about {
    display: flex;
    align-items: flex-start;
    margin-bottom:5rem;
}

.concept__media {
    position: relative;
    z-index: 2;
    flex: 0 0 45.7%;
}

.concept__body {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    margin-left: -3.1rem;
    padding-top: 3.2rem;
}

.concept__head {
    position: relative;
    display: flex;
    height: 10.1rem;
    padding-left:5rem;
}

.concept__title {
    font-family: "Zen Maru Gothic";
    font-size: 3.5rem;
    line-height: calc(125 / 100);
    letter-spacing: calc(2 / 100 * 35 / 10 * 1rem);
    color: #555555;
    font-weight: 500;
    position: absolute;
    top: 9.2rem;
    right: 2.6rem;
    z-index: 2;
}

.concept__alphabet {
    font-family: "Zen Maru Gothic";
    font-size: 7.5rem;
    line-height: calc(143 / 100);
    letter-spacing: calc(2 / 100 * 75 / 10 * 1rem);
    color: #2A2A2A;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    margin-left: 0;
}

.concept__alphabet span:nth-child(1) {
    font-size: 14rem;
    color: #86B662;
    opacity: 45%;
    line-height: 1;
}

.concept__alphabet span:nth-child(2) {
    opacity: 10%;
    line-height: 1;
    margin-left: -0.5rem;
}

.concept__img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 61.9rem;
    border-radius: 0 2rem 2rem 0;
    overflow: hidden;
}

.concept__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

.concept__content {
    position: relative;
    z-index: 1;
    background-color: #F48441;
    padding: 4.5rem 4.7rem 3.2rem 9rem;
    width: 100%;
    min-height: 40.7rem;
    border-radius: 0;
    overflow: hidden;
    margin-top:8rem;
    border-radius:1.5rem;
}

.concept__bgtreat{
    position:absolute;
    bottom: 0rem;
    right:0rem;
}

.concept__catchphrase {
    font-family: "Zen maru Gothic";
    font-size: 2.8rem;
    line-height: calc(167 / 100);
    letter-spacing: calc(2 / 100 * 31 / 10 * 1rem);
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 3.1rem;
}

.concept__description {
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    line-height: calc(197 / 100);
    letter-spacing: calc(2 / 100 * 18 / 10 * 1rem);
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 2.3rem;
}

.concept__gallery {
    display: flex;
    gap: 3rem;
    padding: 1rem 2.5rem;
    margin-bottom: 4rem;
}

.concept__gallery-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    width: 82.1rem;
}

.concept__gallery-item {
    width: 100%;
    position: relative;
}

.concept__thumb {
    overflow: hidden;
    border-radius: 1.5rem;
}

.concept__thumb img {
    filter: brightness(60%);
    transition: transform 0.4s ease;
}

.concept__gallery-item a:hover .concept__thumb img,
.concept__gallery-right a:hover .concept__thumb img {
    transform: scale(1.05);
}

.concept__thumbtext {
    position: absolute;
    bottom: 10%;
    left: 5%;
    color: #FFFFFF;
    font-family: "Zen Maru Gothic";
    font-size: 2.4rem;
    line-height: calc(125 / 100);
    letter-spacing: calc(2 / 100 * 24 / 10 * 1rem);
    font-weight: bold;
}

.concept__gallery-right {
    position: relative;
    width: 38.7rem;
}

.concept__thumb-arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    background-color: #ffffff;
    border-top-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.3s ease;
}

.concept__thumb-arrow::before,
.concept__thumb-arrow::after {
    content: "";
    position: absolute;
    right: 33%;
    top: 65%;
    width: 2.5rem;
    height: 0.2rem;
    background-color: #5CACC9;
    border-radius: 0.1rem;
    transform-origin: right center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.concept__thumb-arrow::before {
    /* 上側の線 */
    transform: rotate(0deg);
}

.concept__thumb-arrow::after {
    /* 下側の線 */
    transform: rotate(45deg);
}

a:hover .concept__thumb-arrow {
    background-color: #5CACC9;
}

a:hover .concept__thumb-arrow::before,
a:hover .concept__thumb-arrow::after {
    background-color: #ffffff;
}

/* 訪問診療バナー */
.visit__banner {
    display: block;
    padding: 0 2.5rem;
    margin-bottom: 4.1rem;
}

.visit__banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    background-color: #5CACC9;
    width: 100%;
    height: 30rem;
    border-radius: 1.5rem;
    overflow: hidden;
}

.visit__banner-textarea {
    margin-left: 1.9rem;
    position: relative;
    z-index: 1;
}

.visit__banner-img {
    position: absolute;
    bottom: -1.1rem;
    right: 0rem;
    width: 70rem;
    height: auto;
    height: 100%;
    z-index: 0;
}

.visit__banner-arrow {
    position: relative;
    z-index: 1;
    margin-right: 2.5rem;
    margin-bottom: 1.3rem;
    width: 6rem;
    height: 6rem;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.visit__banner-arrow::before,
.visit__banner-arrow::after {
    content: "";
    position: absolute;
    right: 1.8rem;
    top: 60%;
    width: 2.4rem;
    height: 0.2rem;
    background-color: #5CACC9;
    border-radius: 0.1rem;
    transform-origin: right center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.visit__banner-arrow::before {
    transform: translateY(-50%) rotate(0deg);
}

.visit__banner-arrow::after {
    transform: translateY(-50%) rotate(45deg);
}

a.visit__banner:hover .visit__banner-arrow {
    background-color: #5CACC9;
}

a.visit__banner:hover .visit__banner-arrow::before,
a.visit__banner:hover .visit__banner-arrow::after {
    background-color: #ffffff;
}

.visit__banner-title {
    font-family: "Zen Maru Gothic";
    font-size: 3.1rem;
    line-height: calc(132 / 100);
    letter-spacing: calc(8 / 100 * 31 / 10 * 1rem);
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 2.4rem;
    margin-top: 7.3rem;
}

.visit__banner-text {
    font-family: "Noto Sans JP";
    font-size: 1.7rem;
    line-height: calc(197 / 100);
    letter-spacing: calc(2 / 100 * 17 / 10 * 1rem);
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 5.2rem;
}

.visit__banner-title span {
    color: #E08D5B;
    background-color: #FFF;
    border-radius: 1rem;
    padding: 0rem 0.3rem;
}

/* 採用バナー */

.recruit__banner {
    display: block;
    padding: 0 2.5rem;
}

.recruit__banner-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    background-color: #57B975;
    width: 100%;
    height: 30rem;
    border-radius: 1.5rem;
    overflow: hidden;
}

.recruit__banner-img {
    position: absolute;
    top: 2rem;
    left: 5rem;
    width: 85%;
    height: 94%;
    z-index: 0;
}

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

.recruit__banner-arrow {
    position: absolute;
    right: 2.5rem;
    bottom: 1.3rem;
    z-index: 1;
    width: 6rem;
    height: 6rem;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.recruit__banner-arrow::before,
.recruit__banner-arrow::after {
    content: "";
    position: absolute;
    right: 1.8rem;
    top: 60%;
    width: 2.4rem;
    height: 0.2rem;
    background-color: #57B975;
    border-radius: 0.1rem;
    transform-origin: right center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.recruit__banner-arrow::before {
    transform: translateY(-50%) rotate(0deg);
}

.recruit__banner-arrow::after {
    transform: translateY(-50%) rotate(45deg);
}

a.recruit__banner:hover .recruit__banner-arrow {
    background-color: #57B975;
}

a.recruit__banner:hover .recruit__banner-arrow::before,
a.recruit__banner:hover .recruit__banner-arrow::after {
    background-color: #ffffff;
}

.recruit__banner-logo {
    width: 6rem;
    height: 6.2rem;
}

.recruit__banner-textarea {
    width: 32.1rem;
    height: 28.3rem;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-top: 3.9rem;
}

.recruit__banner-textarea .recruit__banner-title {
    color: #57B975;
}

.recruit__banner-textarea .recruit__banner-text {
    color: #57B975;
}

.recruit__banner-title {
    font-family: "Zen Maru Gothic";
    font-size: 2.8rem;
    line-height: calc(132 / 100);
    letter-spacing: calc(8 / 100 * 31 / 10 * 1rem);
    font-weight: 500;
    margin-bottom: 1.2rem;
    margin-top: 1rem;
}

.recruit__banner-text {
    font-family: "Noto Sans JP";
    font-size: 1.7rem;
    line-height: calc(197 / 100);
    letter-spacing: calc(2 / 100 * 17 / 10 * 1rem);
    font-weight: 500;
}

/* 採用エリア（採用バナー + 採用情報セクションを重ねる親） */
.recruit-area {
    position: relative;
}

/* 採用情報セクション */
.recruit {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(to right, #F48441, #FFBDA4);
    padding: 30rem 8rem 8rem;
    /* 上部マスクカット + バナー重なり分の余白 */
    margin-top: -15rem;
    position: relative;
    z-index: 1;

    /* 上辺全体を非対称な楕円でカット（左が深く、右端まで緩やかに弧が続く） */
    -webkit-mask-image: radial-gradient(ellipse 280% 100% at -28% -20%, transparent 50%, black 50.1%);
    mask-image: radial-gradient(ellipse 280% 100% at -28% -20%, transparent 50%, black 50.1%);
}

.recruit__inner {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.recruit__gallery {
    width: 53.4rem;
    padding-top: 7.6rem;
}

.recruit__gallery-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem 2rem;
}

.recruit__gallery-item:nth-child(odd) {
    margin-top: -7.6rem;
}

.recruit__gallery-item {
    width: 100%;
    position: relative;
    will-change: transform;
}

.recruit__gallery-img {
    width: 25.7rem;
    height: 29.8rem;
    overflow: hidden;
    border-radius: 1.5rem;
    margin-bottom: 1.7rem;
}

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

.recruit__title {
    font-family: "Noto Sans JP";
    font-size: 6.4rem;
    line-height: calc(125 / 100);
    letter-spacing: calc(3 / 100 * 64 / 10 * 1rem);
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.recruit__alphabet {
    font-family: "Zen Maru Gothic";
    font-size: 2rem;
    line-height: calc(125 / 100);
    letter-spacing: calc(2 / 100 * 15 / 10 * 1rem);
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 7.6rem;
}

.recruit__catchphrase {
    font-family: "Zen Maru Gothic";
    font-size: 3.6rem;
    line-height: calc(125 / 100);
    letter-spacing: calc(9 / 100 * 36 / 10 * 1rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4rem;
}

.recruit__catchphrase span {
    color: #f5DC00;
}

.recruit__text {
    font-family: "Noto Sans JP";
    font-size: 1.7rem;
    line-height: calc(254 / 100);
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 7.6rem;
}

@media screen and (max-width: 699.98px) {

    /* === 共通レイアウト === */
    .wrapper {
        flex-direction: column;
        padding: 0;
        margin-bottom: 0;
    }

    .right-area {
        width: 100%;
    }

    /* === heroセクション (Figma: 画像 358×230 / 全体~270 high) === */
    .hero {
        max-width: none;
        width: auto;
        height: 31.5rem;
        aspect-ratio: auto;
        margin: 0 0rem;
        padding: 0;
        background-position: top center;
        background-size: 100% 31.5rem;
        background-repeat: no-repeat;
        border-radius: 0;
        overflow: visible;
        position: relative;
        background-image: url(../img/front-page/keyvisual_img_pic1sp.webp);
        margin-bottom:2rem;
    }

    .hero__title {
        position: absolute;
        right: 1rem;
        bottom: 5.9rem;
        font-size: 1.6rem;
        font-weight: 500;
        line-height: calc(127 / 100);
        letter-spacing: calc(-3 / 100 * 20 / 10 * 1rem);
        color: #434343;
        z-index: 2;
        text-align: left;
    }

    .hero__subtitle {
        position: absolute;
        top: auto;
        left: auto;
        right: 0.2rem;
        bottom: -0.2rem;
        max-width: calc(100% - 12.4rem);
        font-size: 1.1rem;
        font-weight: 500;
        line-height: calc(183 / 100);
        letter-spacing: calc(6 / 100 * 12 / 10 * 1rem);
        color: #434343;
        z-index: 2;
        text-align: left;
    }

    .hero__alphabet {
        position: absolute;
        top: 8.6rem;
        left: 21.6rem;
        right: auto;
        bottom: auto;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: calc(167 / 100);
        letter-spacing: calc(75 / 100 * 15 / 10 * 1rem);
        color: #fff;
    }

    /* === 新着情報 (Figma: card 357 wide, 表示記事数に応じ縦伸び) === */
    .news {
        max-width: none;
        width: auto;
        height: auto;
        min-height: 28.4rem;
        margin: 0.2rem 1rem 0;
        padding: 1.385rem 1.3rem 7.5rem 1.2rem;
        border-radius: 0.4rem;
        position: relative;
        box-sizing: border-box;
    }

    .news__inner {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
    }

    .news__head {
        gap: 0.7rem;
        align-items: baseline;
    }

    .news__title {
        font-size: 1.9rem;
        font-weight: 400;
        line-height: 1.13;
        letter-spacing: calc(2 / 100 * 19 / 10 * 1rem);
        margin: 0 2rem 0 0;
    }

    .news__alphabet {
        font-size: 1.6rem;
        line-height: 1.14;
        letter-spacing: calc(2 / 100 * 16 / 10 * 1rem);
        margin-left: 2rem;
    }

    .news__alphabet::before {
        width: 1.5rem;
        height: 0.1rem;
        left: -2rem;
        top: 50%;
    }

    .news__list {
        margin-top: 2.21rem;
        gap: 1.5rem;
        width: 33.2rem;
    }

    .news__item {
        display: grid;
        grid-template-columns: 7.8rem 1fr;
        grid-template-rows: 2.5rem auto;
        column-gap: 0.9rem;
        row-gap: 0.3rem;
        flex-wrap: nowrap;
        gap: 0.3rem 0.9rem;
    }

    .news__category {
        grid-column: 1;
        grid-row: 1;
        width: 7.8rem;
        height: 2.5rem;
        box-sizing: border-box;
        font-size: 1.4rem;
        line-height: 1.14;
        letter-spacing: calc(2 / 100 * 14 / 10 * 1rem);
        padding: 0.45rem 0;
        text-align: center;
        border-radius: 1.25rem;
        max-width: 7.8rem;
    }

    .news__date {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-size: 1.4rem;
        line-height: 1.14;
        letter-spacing: calc(2 / 100 * 14 / 10 * 1rem);
    }

    .article__title {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 33.2rem;
        max-width: 100%;
        font-size: 1.4rem;
        line-height: 1.14;
        letter-spacing: calc(2 / 100 * 14 / 10 * 1rem);
    }

    .news .more__btn {
        /* Figma: w 197 h 43.53, bg #e08d5b rounded 42, left 84 top 539.52 */
        position: absolute;
        bottom: 1.09rem;
        left: 50%;
        transform: translateX(-50%);
        width: 19.7rem;
        height: 4.353rem;
        box-sizing: border-box;
        padding: 0 3rem 0 3.1rem;
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 4.353rem;
        letter-spacing: calc(2 / 100 * 18 / 10 * 1rem);
        border-radius: 4.2rem;
    }

    .news .more__btn::before {
        width: 1.8rem;
        right: 2rem;
        top: 55%;
    }

    .news .more__btn::after {
        width: 1.4rem;
        right: 1.9rem;
        top: 43%;
    }

    /* === コンセプトセクション === */

    .concept__about {
        display: block;
        padding: 0;
        position: relative;
        margin-top: 3.5rem;
    }

    .concept__media {
        width: auto;
        margin: 0 1rem;
        position: relative;
        z-index: 2;
    }

    .concept__body {
        width: auto;
        margin: -5rem 1rem 0;
        padding-top: 0;
        position: relative;
        z-index: auto;
    }

    .concept__head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        margin: 0;
        height: 10.2rem;
        padding-bottom: 0;
        padding-right: 0;
        z-index: 3;
    }

    .concept__img {
        max-width: none;
        width: 31rem;
        height: 26rem;
        margin: 0 auto;
        border-radius: 1.5rem;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

    .concept__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .concept__alphabet {
        position: absolute;
        left: 0.6rem;
        bottom: 0;
        margin: 0;
        font-size: 3rem;
        line-height: 1;
        letter-spacing: calc(2.7 / 100 * 30 / 10 * 1rem);
        z-index: 7;
        white-space: nowrap;
    }

    .concept__alphabet span:nth-child(1) {
        font-size: 10rem;
        color: rgba(134, 182, 98, 0.45);
        opacity: 1;
        z-index:10;
    }

    .concept__alphabet span:nth-child(2) {
        color: rgba(255, 255, 255, 0.26);
        opacity: 1;
        margin-left: 0.2rem;
    }

    .concept__title {
        position: absolute;
        top: auto;
        bottom: 0.7rem;
        left: auto;
        right: 0.7rem;
        font-size: 2rem;
        font-weight: 500;
        color: #555;
        line-height: 1.32;
        letter-spacing: calc(2 / 100 * 20 / 10 * 1rem);
        z-index: 7;
    }

    .concept__content {
        margin: -9rem 0 0;
        padding: 12.5rem 1.5rem 2rem;
        background-color: #f48441;
        width: 100%;
        height: auto;
        min-height: 0;
        border-radius: 1.5rem;
        position: relative;
        z-index: 1;
    }
    .concept__bgtreat{
        width:24.7rem;
        height:24.7rem;
        bottom:10rem;
    }

    .concept__catchphrase {
        font-size: 2rem;
        font-weight: 700;
        line-height: calc(167 / 100);
        letter-spacing: calc(2 / 100 * 20 / 10 * 1rem);
        color: #fff;
        margin-bottom: 2rem;
    }

    .concept__description {
        font-size: 1.7rem;
        font-weight: 400;
        line-height: calc(197 / 100);
        letter-spacing: calc(2 / 100 * 17 / 10 * 1rem);
        color: #fff;
        margin-bottom: 0;
    }

    .concept__more {
        text-align: center;
        margin-top: 4rem;
    }

    .more__btn--white {
        width: 22rem;
        height: 5.7rem;
        padding: 0 3rem 0 3.1rem;
        box-sizing: border-box;
        font-size: 2rem;
        font-weight: 500;
        line-height: 5.7rem;
        letter-spacing: calc(2 / 100 * 20 / 10 * 1rem);
        border-radius: 4.2rem;
    }

    .more__btn--white::before {
        top: 55%;
        right: 2rem;
        width: 2rem;
    }

    .more__btn--white::after {
        top: 43%;
        right: 1.9rem;
        width: 1.5rem;
    }

    /* === コンセプトギャラリー (SP: ドクター紹介を上に大きく / 下に2x2グリッド) === */
    .concept__gallery {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem 1rem 3rem;
        margin: 0;
    }

    .concept__gallery-right {
        order: 1;
        width: 35.5rem;
    }

    .concept__gallery-right .concept__thumb {
        height: auto;
    }

    .concept__gallery-right .concept__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .concept__gallery-right .concept__thumbtext {
        font-size: 2rem;
        bottom: 1rem;
        left: 0.6rem;
        letter-spacing: calc(2 / 100 * 20 / 10 * 1rem);
    }

    .concept__gallery-list {
        order: 2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        width: 35.5rem;
    }

    .concept__gallery-item {
        width: 100%;
        height: 8.1rem;
    }

    .concept__gallery-item .concept__thumb {
        height: 100%;
    }

    .concept__gallery-item .concept__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .concept__thumbtext {
        font-size: 2.1rem;
        font-weight: 700;
        line-height: 1.02;
        bottom: 0.8rem;
        left: 0.4rem;
        letter-spacing: calc(2 / 100 * 21 / 10 * 1rem);
    }

    .concept__thumb-arrow {
        /* Figma: w 29 h 25 (右card は w 28.926 h 24.794) */
        width: 2.9rem;
        height: 2.5rem;
        border-top-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
    }

    .concept__thumb-arrow::before,
    .concept__thumb-arrow::after {
        width: 1.3rem;
        height: 0.15rem;
        right: 30%;
        top: 65%;
    }

    .concept__thumb-arrow::after {
        width: 1rem;
    }

    /* === 訪問診療バナー (Figma: 357×412 bg #5CACC9 border-radius 29) === */
    .visit__banner {
        padding: 0 1rem;
        margin-bottom: 0;
    }

    .visit__banner-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: 41.2rem;
        border-radius: 2.9rem;
        padding: 3.1rem 1.6rem 0 1.3rem;
    }

    .visit__banner-textarea {
        margin-left: 0;
    }

    .visit__banner-title {
        /* Figma: font 19px line-height 1.32 tracking 1.52px (8%) */
        font-size: 1.9rem;
        font-weight: 500;
        line-height: calc(132 / 100);
        letter-spacing: calc(8 / 100 * 19 / 10 * 1rem);
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .visit__banner-title span {
        /* 訪問診療 白ピル: bg-white color #e08d5b padding 微小 rounded 3.171 */
        font-size: 1.9rem;
        padding: 0 0.4rem;
        border-radius: 0.32rem;
        margin: 0 0.2rem;
    }

    .visit__banner-text {
        /* Figma: font 16px line-height 1.97 */
        font-size: 1.6rem;
        font-weight: 500;
        line-height: calc(197 / 100);
        letter-spacing: 0;
        margin-bottom: 0;
        margin-left: 0.3rem;
    }

    .visit__banner-img {
        /* SP画像 (concept_img_banner_sp1.webp) をバナー下部に自然な比率で配置 */
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        top: auto;
        width: 100%;
        height: auto;
        z-index: 0;
    }

    .visit__banner-img img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center bottom;
        display: block;
    }

    .visit__banner-arrow {
        position: absolute;
        bottom: 1.3rem;
        right: 2.5rem;
        margin: 0;
        width: 4.2rem;
        height: 4.2rem;
        z-index: 1;
    }

    .visit__banner-arrow::before,
    .visit__banner-arrow::after {
        right: 1.3rem;
        width: 1.8rem;
    }

    /* === 採用バナー (Figma: 357×493 bg #57b975 border-radius 29 / 楕円 30.6×27 中央寄せ) === */
    .recruit__banner {
        padding: 0 1rem;
        margin-top: 2rem;
    }

    .recruit__banner-inner {
        height: 49.3rem;
        border-radius: 2.9rem;
        justify-content: center;
        align-items: flex-start;
        padding-top: 3.2rem;
    }

    .recruit__banner-textarea {
        /* Figma: ellipse 30.6×27, padding-top で logo(top 67=6.7rem from banner top)を配置 */
        width: 30.6rem;
        height: 27rem;
        padding-top: 3.5rem;
        z-index: 1;
    }

    .recruit__banner-logo {
        width: 6rem;
        height: 6.2rem;
    }

    .recruit__banner-title {
        font-size: 2.2rem;
        font-weight: 500;
        line-height: calc(132 / 100);
        letter-spacing: calc(2 / 100 * 22 / 10 * 1rem);
        margin-top: 0.5rem;
        margin-bottom: 0.4rem;
        text-align: center;
    }

    .recruit__banner-text {
        font-size: 1.8rem;
        font-weight: 500;
        line-height: calc(150 / 100);
        letter-spacing: 0;
        text-align: center;
    }

    .recruit__banner-img {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        z-index: 2;
    }

    .recruit__banner-img img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center bottom;
        display: block;
    }

    .recruit__banner-arrow {
        display: flex;
        width: 4.2rem;
        height: 4.2rem;
        right: 2.5rem;
        bottom: 1.3rem;
        z-index: 3;
    }

    .recruit__banner-arrow::before,
    .recruit__banner-arrow::after {
        right: 1.3rem;
        width: 1.8rem;
    }

    /* === 採用情報セクション (Figma: photos 2x2 段違い, "Let's team up!" font33等) === */
    /* mask-imageを::beforeに移すことでgallery写真がマスクに隠れないようにする */
    .recruit {
        flex-direction: column;
        padding: 9rem 1rem 6rem;
        margin-top: -6rem;
        margin-bottom: 0;
        -webkit-mask-image: none;
        mask-image: none;
        background: transparent;
    }

    .recruit::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, #F48441, #FFBDA4);
        -webkit-mask-image: radial-gradient(ellipse 290% 30% at -45% 0%, transparent 50%, black 50.5%);
        mask-image: radial-gradient(ellipse 290% 30% at -45% 0%, transparent 50%, black 50.5%);
        z-index: 0;
        pointer-events: none;
    }

    .recruit__gallery,
    .recruit__inner {
        position: relative;
        z-index: 1;
    }

    .recruit__inner {
        order: 2;
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
    }

    .recruit__head {
        display: block;
        text-align: left;
    }

    .recruit__gallery {
        order: 1;
        width: 100%;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .recruit__gallery-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2.3rem;
    }

    .recruit__gallery-item {
        width: 100%;
    }

    .recruit__gallery-item:nth-child(odd) {
        margin-top: 0;
    }

    .recruit__gallery-item:nth-child(even) {
        margin-top: 3.9rem;
    }

    .recruit__gallery-img {
        width: 100%;
        height: auto;
        aspect-ratio: 133 / 154;
        border-radius: 1rem;
        margin-bottom: 0;
    }

    .recruit__title {
        /* Figma: font 33 Noto Sans JP Bold tracking 0.99px (3%) line-height 1.25 */
        font-size: 3.3rem;
        font-weight: 700;
        line-height: calc(125 / 100);
        letter-spacing: calc(3 / 100 * 33 / 10 * 1rem);
        margin-bottom: 0.5rem;
    }

    .recruit__alphabet {
        /* Figma: font 20 Noto Sans JP SemiBold tracking 0.4 (2%) line-height 1.25 */
        font-size: 2rem;
        font-weight: 600;
        line-height: calc(125 / 100);
        letter-spacing: calc(2 / 100 * 20 / 10 * 1rem);
        margin-bottom: 4rem;
    }

    .recruit__catchphrase {
        /* Figma: font 30 Zen Maru Gothic Bold line-height 1.25 (笑顔=#f5dc00) */
        font-size: 2.8rem;
        font-weight: 700;
        line-height: calc(125 / 100);
        letter-spacing: 0;
        margin-bottom: 2rem;
        text-align: left;
    }

    .recruit__text {
        /* Figma: font 17 Noto Sans JP Medium line-height 2.54 */
        font-size: 1.7rem;
        font-weight: 500;
        line-height: calc(254 / 100);
        letter-spacing: 0;
        margin-bottom: 2rem;
        text-align: left;
    }

    .header.off {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .header.off {
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .hero__alphabet {
        left: auto;
        top:1rem;
        right: 0rem;
        letter-spacing: calc(65 / 100 * 15 / 10 * 1rem);
    }


    /* 各種ご案内 */

}