.photoContact,
.photoContact * {
    box-sizing: border-box;
}

.photoContact {
    --photo-teal: #58a3a0;
    --photo-green: #7eae4d;
    --photo-ink: #52605e;
    background: linear-gradient(135deg, #fff 10%, #fbfaf4 55%, #f7fcfa 100%);
    color: var(--photo-ink);
    font-family: "fot-tsukuardgothic-std", "Noto Sans JP", sans-serif;
    min-height: 1010px;
    overflow: hidden;
    padding: 118px 0 90px;
    position: relative;
    z-index: 2;
}

.photoContact__inner {
    margin: 0 auto;
    max-width: 1580px;
    padding: 0 clamp(36px, 8.8vw, 168px);
    position: relative;
    z-index: 2;
}

.photoContact__visual {
    clip-path: ellipse(65% 57% at 69% 44%);
    height: 715px;
    overflow: hidden;
    position: absolute;
    right: -25px;
    top: 0;
    width: 750px;
}

.photoContact__visual::after {
    background: linear-gradient(90deg, rgba(255,255,255,.6), transparent 35%);
    content: "";
    inset: 0;
    position: absolute;
}

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

.photoContact__heading {
    max-width: 910px;
    position: relative;
}

.photoContact__heading h2 {
    color: var(--photo-teal);
    font-size: clamp(27px, 2.45vw, 47px);
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.55;
    margin: 0;
}

.photoContact__heading p {
    color: #5c6663;
    font-size: clamp(13px, 1vw, 18px);
    letter-spacing: .07em;
    line-height: 2;
    margin: 42px 0 0;
}

.photoContact__leaf,
.photoContact__decor {
    background: center / contain no-repeat url("../assets/images/leaves/14.svg");
    display: block;
}

.photoContact__decor { background-image: url("../assets/images/leaves/13.svg"); }

.photoContact__leaf {
    height: 100px;
    position: absolute;
    right: -22px;
    top: 2px;
    transform: rotate(-8deg);
    width: 120px;
}

.photoContact__cards {
    display: grid;
    gap: clamp(18px, 2vw, 32px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 75px;
    max-width: 1440px;
}

.photoContactCard {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.92);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(83, 125, 112, .05);
    min-height: 360px;
    padding: 32px clamp(24px, 2.2vw, 38px) 30px;
}

.photoContactCard--form {
    background: rgba(255, 254, 247, .95);
}

.photoContactCard--phone {
    background: rgba(247, 252, 251, .95);
}

.photoContactCard--stay {
    background: rgba(255, 250, 236, .96);
}

.photoContactCard__head {
    align-items: center;
    display: flex;
    gap: 18px;
}

.photoContactCard__icon {
    align-items: center;
    background: var(--photo-green);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 68px;
    height: 68px;
    justify-content: center;
}

.photoContactCard__icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.photoContactCard--stay .photoContactCard__icon {
    background: #e5ad55;
}

.photoContactCard--stay .photoContactCard__icon svg {
    width: 32px;
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.photoContactCard--phone .photoContactCard__icon {
    background: var(--photo-teal);
}

.photoContactCard--phone .photoContactCard__icon::before {
    content: none;
}

.photoContactCard__head span:not(.photoContactCard__icon) {
    color: var(--photo-green);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
}

.photoContactCard--phone .photoContactCard__head span:not(.photoContactCard__icon) {
    color: var(--photo-teal);
}

.photoContactCard--stay .photoContactCard__head span:not(.photoContactCard__icon) {
    color: #c58d39;
}

.photoContactCard h3 {
    color: #5c6462;
    font-size: clamp(20px, 1.5vw, 27px);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    margin: 4px 0 0;
    white-space: nowrap;
}

.photoContactCard p {
    color: #717977;
    font-size: 12px;
    letter-spacing: .07em;
    line-height: 1.8;
    margin: 24px 0 28px;
}

.photoContactCard > a {
    align-items: center;
    background: var(--photo-green);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: .13em;
    min-height: 55px;
    padding: 10px 20px;
    position: relative;
    text-decoration: none;
    transition: filter .25s ease, transform .25s ease;
    margin-top: auto;
}

.photoContactCard--phone > a {
    background: var(--photo-teal);
}

.photoContactCard--stay > a {
    background: #dca44e;
}

.photoContactCard > a:hover,
.photoContactCard > a:focus-visible {
    filter: brightness(.95);
    transform: translateY(-2px);
}

.photoContactCard > a span {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: var(--photo-green);
    display: flex;
    height: 38px;
    justify-content: center;
    position: absolute;
    right: 9px;
    width: 38px;
}

.photoContactCard--phone > a span {
    color: var(--photo-teal);
}

.photoContactCard--stay > a span {
    color: #c58d39;
}

.photoContact__note {
    background: rgba(242, 249, 247, .88);
    border-radius: 8px;
    color: #70817b;
    font-size: 14px;
    letter-spacing: .07em;
    margin: 42px auto 0;
    max-width: 990px;
    padding: 17px 28px;
    text-align: center;
}

.photoContact__note::before {
    color: var(--photo-teal);
    content: "▣";
    margin-right: 12px;
}

.photoContact__decor {
    height: 180px;
    position: absolute;
    width: 210px;
}

.photoContact__decor--left {
    bottom: 20px;
    left: 4px;
    transform: scaleX(-1) rotate(-18deg);
}

.photoContact__decor--right {
    bottom: 90px;
    right: 26px;
    transform: rotate(18deg);
}

@media (max-width: 1180px) {
    .photoContact__visual {
        opacity: .55;
        right: -170px;
    }

    .photoContact__heading {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    .photoContact {
        min-height: 0;
        padding: 78px 0 65px;
    }

    .photoContact__inner {
        padding: 0 20px;
    }

    .photoContact__visual {
        clip-path: ellipse(76% 52% at 75% 20%);
        height: 390px;
        opacity: .42;
        right: -155px;
        top: -20px;
        width: 470px;
    }

    .photoContact__heading h2 {
        font-size: 26px;
        max-width: 290px;
    }

    .photoContact__heading p {
        font-size: 11px;
        line-height: 1.9;
        margin-top: 28px;
        max-width: 300px;
    }

    .photoContact__heading p br {
        display: none;
    }

    .photoContact__leaf {
        display: none;
    }

    .photoContact__cards {
        gap: 16px;
        grid-template-columns: 1fr;
        margin-top: 48px;
    }

    .photoContactCard {
        min-height: 0;
        padding: 25px 24px 24px;
    }

    .photoContactCard__head {
        gap: 16px;
    }

    .photoContactCard__icon {
        flex-basis: 59px;
        height: 59px;
    }

    .photoContactCard__icon svg {
        width: 28px;
        height: 28px;
    }

    .photoContactCard__head span:not(.photoContactCard__icon) {
        font-size: 10px;
    }

    .photoContactCard h3 {
        font-size: 23px;
    }

    .photoContactCard p {
        font-size: 10px;
        margin: 18px 0 20px 75px;
    }

    .photoContactCard--stay p {
        margin-left: 0;
    }

    .photoContactCard > a {
        font-size: 14px;
        min-height: 48px;
    }

    .photoContactCard > a span {
        height: 32px;
        width: 32px;
    }

    .photoContact__note {
        font-size: 10px;
        line-height: 1.7;
        margin-top: 24px;
        padding: 13px 16px;
    }

    .photoContact__decor {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1080px) {
    .photoContact__cards {
        gap: 14px;
    }

    .photoContactCard {
        padding: 25px 20px 24px;
    }

    .photoContactCard__head {
        gap: 12px;
    }

    .photoContactCard__icon {
        flex-basis: 54px;
        height: 54px;
    }

    .photoContactCard__icon svg {
        width: 27px;
        height: 27px;
    }

    .photoContactCard h3 {
        font-size: 20px;
    }

    .photoContactCard p {
        margin-left: 0;
    }

    .photoContactCard > a {
        font-size: 13px;
        letter-spacing: .06em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photoContactCard > a {
        transition: none;
    }
}