/* ==================================================
   mofuko Contact Page
   PC版
================================================== */


/* ==================================================
   共通
================================================== */

body {
    color: #444444;
    background-color: #ffffff;
}

.contact-hero,
.contact-content,
.contact-closing {
    font-family: "Zen Old Mincho", serif;
}

.gold-line {
    display: block;

    width: 100px;
    height: 1px;

    background: linear-gradient(90deg,
            transparent 0%,
            #b99a5b 20%,
            #d6c08a 50%,
            #b99a5b 80%,
            transparent 100%);
}


/* ==================================================
   Contact Hero
================================================== */

.contact-hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 520px;

    padding: 70px 40px;

    overflow: hidden;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(200, 180, 130, 0.08) 0%,
            transparent 25%),
        radial-gradient(circle at 85% 75%,
            rgba(190, 190, 190, 0.12) 0%,
            transparent 30%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fcfbf8 100%);
}

.contact-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}

.contact-hero__en {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 66px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.14em;

    color: #3f3f3f;
}

.contact-hero .gold-line {
    margin: 34px auto;
}

.contact-hero__title {
    margin: 0;

    font-size: 20px;
    font-weight: 400;
    line-height: 2.15;
    letter-spacing: 0.12em;

    color: #555555;
}


/* ==================================================
   キラキラ
================================================== */

.sparkle {
    position: absolute;
    z-index: 1;

    display: block;

    width: 8px;
    height: 8px;

    opacity: 0.45;

    transform: rotate(45deg);

    background: linear-gradient(135deg,
            #c4a45f 0%,
            #f4e8bf 48%,
            #b99851 100%);

    box-shadow:
        0 0 10px rgba(196, 164, 95, 0.35),
        0 0 22px rgba(196, 164, 95, 0.18);
}

.sparkle::before,
.sparkle::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    background-color: rgba(196, 164, 95, 0.55);

    transform: translate(-50%, -50%);
}

.sparkle::before {
    width: 26px;
    height: 1px;
}

.sparkle::after {
    width: 1px;
    height: 26px;
}

.sparkle--01 {
    top: 22%;
    left: 14%;

    transform: rotate(45deg) scale(0.7);
}

.sparkle--02 {
    top: 34%;
    right: 18%;

    transform: rotate(45deg) scale(0.45);

    opacity: 0.28;
}

.sparkle--03 {
    bottom: 20%;
    left: 25%;

    transform: rotate(45deg) scale(0.35);

    opacity: 0.25;
}

.sparkle--04 {
    top: 18%;
    right: 32%;

    transform: rotate(45deg) scale(0.25);

    opacity: 0.2;
}

.sparkle--05 {
    bottom: 24%;
    right: 12%;

    transform: rotate(45deg) scale(0.65);
}

.sparkle--06 {
    top: 48%;
    left: 8%;

    transform: rotate(45deg) scale(0.25);

    opacity: 0.2;
}


/* ==================================================
   Contact Content
================================================== */

.contact-content {
    position: relative;

    padding: 100px 40px 170px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(194, 169, 111, 0.07) 0%,
            transparent 35%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fafafa 48%,
            #ffffff 100%);
}

.contact-content__inner {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}


/* ==================================================
   Contact Card
================================================== */

.contact-card {
    position: relative;

    width: 100%;

    padding: 85px 70px;

    text-align: center;

    background-color: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(185, 154, 91, 0.48);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.055),
        inset 0 0 0 8px rgba(255, 255, 255, 0.9);
}

.contact-card::before {
    content: "";

    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;

    border: 1px solid rgba(185, 154, 91, 0.18);

    pointer-events: none;
}

.contact-card+.contact-card {
    margin-top: 120px;
}

.contact-card__heading,
.contact-card__text,
.contact-button {
    position: relative;
    z-index: 2;
}

.contact-card__en {
    margin: 0 0 14px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #a1844c;
}

.contact-card__title {
    margin: 0;

    font-size: 24px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.12em;

    color: #414141;
}

.contact-card__line {
    display: block;

    width: 55px;
    height: 1px;

    margin: 26px auto 0;

    background-color: #b99a5b;
}

.contact-card__text {
    margin: 38px 0 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 2.15;
    letter-spacing: 0.08em;

    color: #656565;
}


/* ==================================================
   Contact Button
================================================== */

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

    min-width: 340px;
    min-height: 66px;

    margin-top: 42px;
    padding: 16px 36px;

    font-family: "Zen Old Mincho", serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;

    border: 1px solid;

    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.contact-button i {
    font-size: 24px;
}

.contact-button:hover {
    transform: translateY(-3px);
}


/* LINE */

.contact-button--line {
    color: #ffffff;
    background-color: #4d705f;
    border-color: #4d705f;
}

.contact-button--line:hover {
    color: #4d705f;
    background-color: #ffffff;

    box-shadow: 0 14px 32px rgba(77, 112, 95, 0.16);
}


/* TikTok */

.contact-button--tiktok {
    color: #ffffff;
    background-color: #333333;
    border-color: #333333;
}

.contact-button--tiktok:hover {
    color: #333333;
    background-color: #ffffff;

    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}


/* ==================================================
   Closing Message
================================================== */

.contact-closing {
    position: relative;

    padding: 150px 40px 170px;

    overflow: hidden;

    background:
        radial-gradient(circle at 20% 30%,
            rgba(185, 154, 91, 0.07) 0%,
            transparent 28%),
        radial-gradient(circle at 80% 70%,
            rgba(180, 180, 180, 0.1) 0%,
            transparent 30%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfaf7 100%);
}

.contact-closing__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

.contact-closing .gold-line {
    margin: 0 auto;
}

.contact-closing__text {
    margin: 52px 0 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.1em;

    color: #656565;
}

.contact-closing__message {
    margin: 28px 0 52px;

    font-size: 21px;
    font-weight: 500;
    line-height: 2.1;
    letter-spacing: 0.13em;

    color: #454545;
}

.sparkle--07 {
    top: 30%;
    left: 17%;

    transform: rotate(45deg) scale(0.5);
}

.sparkle--08 {
    bottom: 25%;
    right: 19%;

    transform: rotate(45deg) scale(0.35);

    opacity: 0.25;
}

.sparkle--09 {
    top: 20%;
    right: 31%;

    transform: rotate(45deg) scale(0.25);

    opacity: 0.2;
}

/* ==================================================
   SNS Buttons
================================================== */

.contact-sns {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    margin-top: 42px;
}

.contact-sns .contact-button {
    min-width: 280px;
    margin-top: 0;
}


/* Instagram */

.contact-button--instagram {
    color: #ffffff;

    background:
        linear-gradient(135deg,
            #6654c0 0%,
            #a5489d 42%,
            #d75b72 72%,
            #d39b52 100%);

    border-color: transparent;
}

.contact-button--instagram:hover {
    color: #9c477f;
    background: #ffffff;
    border-color: rgba(156, 71, 127, 0.45);

    box-shadow:
        0 14px 32px rgba(156, 71, 127, 0.15);
}


/* ==================================================
   Payment
================================================== */

.payment-methods {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    max-width: 660px;

    margin: 48px auto 0;
}

.payment-method {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-height: 125px;
    padding: 24px;

    text-align: left;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(249, 247, 241, 0.98) 100%);

    border: 1px solid rgba(185, 154, 91, 0.3);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.045),
        inset 0 0 0 5px rgba(255, 255, 255, 0.72);
}

.payment-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 54px;
    height: 54px;

    font-size: 22px;

    color: #a1844c;

    border: 1px solid rgba(185, 154, 91, 0.45);
    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.8);
}

.payment-method__en {
    margin: 0 0 6px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #a1844c;
}

.payment-method__name {
    margin: 0;

    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 0.1em;

    color: #414141;
}

.payment-note {
    position: relative;
    z-index: 2;

    margin: 28px 0 0;

    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.06em;

    color: #888888;
}