@charset "utf-8";
/* ==========================================================================
   contact.css  -  Contact Us     Design: Main.png (PC) / Contact-SP
   ========================================================================== */
.ct { padding-bottom: .56rem; }
.ct-head {
    padding: .2rem 0 .24rem;
    background: var(--c-warm);
}
.ct-head_title {
    margin-top: .08rem;
    font-size: .28rem;
    line-height: .36rem;
    font-weight: 700;
    text-transform: uppercase;
}
.ct-head_lead {
    max-width: 6rem;
    margin-top: .04rem;
    font-size: .14rem;
    line-height: .2rem;
    color: var(--c-ink-muted);
}
.ct-visit {
    display: grid;
    gap: .24rem;
    margin-top: .32rem;
}
.ct-list { margin-top: .16rem; }
.ct-list > div {
    display: grid;
    grid-template-columns: .36rem minmax(0, 1fr);
    column-gap: .12rem;
    padding: .12rem 0;
    border-bottom: 1px solid var(--c-line);
}
.ct-list_icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: .36rem;
    height: .36rem;
    border-radius: 50%;
    background: var(--c-warm);
}
.ct-list_icon .icon { width: .18rem; height: .18rem; }
.ct-list dt {
    font-size: .11rem;
    line-height: .16rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.ct-list dd {
    font-size: .15rem;
    line-height: .22rem;
}
.ct-list a:hover { text-decoration: underline; }
.ct-dir {
    display: inline-flex;
    align-items: center;
    gap: .08rem;
    height: .44rem;
    margin-top: .2rem;
    padding: 0 .16rem;
    border: 1px solid var(--c-ink);
    border-radius: .04rem;
    font-size: .14rem;
    font-weight: 500;
    transition: background-color var(--dur), color var(--dur);
}
.ct-dir .icon { width: .16rem; height: .16rem; }
.ct-dir:hover { background: var(--c-ink); color: var(--c-white); }

/* map placeholder (drawn) until "Show map" is pressed */
.ct-map {
    position: relative;
    min-height: 2.8rem;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: .1rem;
    background: #F0EDE9;
}
.ct-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.ct-map_art {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 33%, #fff 33%, #fff 35%, transparent 35%, transparent 66%, #fff 66%, #fff 68%, transparent 68%),
        linear-gradient(0deg, transparent 32%, #fff 32%, #fff 35%, transparent 35%, transparent 64%, #fff 64%, #fff 67%, transparent 67%);
}
.ct-map_pin {
    position: absolute;
    left: 50%;
    top: 52%;
    display: grid;
    place-items: center;
    width: .6rem;
    height: .6rem;
    margin: -.3rem 0 0 -.3rem;
    border-radius: 50%;
    background: #1c19171f;
}
.ct-map_pin .icon {
    width: .32rem;
    height: .32rem;
    fill: var(--c-ink);
    stroke: var(--c-gold);
}
.ct-map_card {
    position: absolute;
    left: .12rem;
    top: .12rem;
    max-width: 2.4rem;
    padding: .1rem .12rem;
    border-radius: .06rem;
    background: var(--c-white);
    box-shadow: 0 .02rem .1rem #1c19171f;
    font-size: .12rem;
    line-height: .17rem;
}
.ct-map_name { font-size: .13rem; font-weight: 700; }
.ct-map_addr { margin-top: .02rem; color: var(--c-ink-muted); }
.ct-map_card a {
    display: inline-block;
    margin-top: .06rem;
    font-weight: 700;
}
.ct-map_load {
    position: absolute;
    right: .12rem;
    bottom: .12rem;
    height: .36rem;
    padding: 0 .14rem;
    border-radius: .04rem;
    background: var(--c-ink);
    font-size: .13rem;
    font-weight: 600;
    color: var(--c-white);
}
.ct-map.is-loaded .ct-map_art,
.ct-map.is-loaded .ct-map_card,
.ct-map.is-loaded .ct-map_load { display: none; }

.ct-follow { margin-top: .48rem; }
.ct-follow_head {
    display: flex;
    flex-direction: column;
    gap: .06rem;
}
.ct-follow_head p {
    font-size: .13rem;
    color: var(--c-ink-muted);
}
.ct-follow_list {
    display: grid;
    gap: .1rem;
    margin-top: .16rem;
}
.ct-follow_list a {
    display: flex;
    align-items: center;
    gap: .12rem;
    padding: .14rem .16rem;
    border: 1px solid var(--c-line);
    border-radius: .08rem;
    transition: border-color .2s;
}
.ct-follow_list a:hover { border-color: var(--c-ink); }
.ct-follow_icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--c-warm);
    font-size: .18rem;
}
.ct-follow_text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: .12rem;
    color: var(--c-ink-muted);
}
.ct-follow_text strong {
    font-size: .16rem;
    line-height: .22rem;
    font-weight: 700;
    color: var(--c-ink);
}
.ct-follow_cta {
    font-size: .13rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .ct { padding-bottom: .8rem; }
    .ct-head { padding: .4rem 0; }
    .ct-head_title { font-size: .4rem; line-height: .52rem; }
    .ct-head_lead { font-size: .16rem; line-height: .24rem; }
    .ct-visit {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: .24rem;
        align-items: start;
        margin-top: .48rem;
    }
    .ct-map { min-height: 3.6rem; }
    .ct-list > div { grid-template-columns: .4rem minmax(0, 1fr); column-gap: .16rem; padding: .18rem 0; }
    .ct-list_icon { width: .4rem; height: .4rem; }
    .ct-list dd { font-size: .16rem; line-height: .24rem; }
    .ct-map_card { left: .16rem; top: .16rem; padding: .14rem .16rem; font-size: .13rem; line-height: .19rem; }
    .ct-map_name { font-size: .15rem; }
    .ct-follow { margin-top: .64rem; }
    .ct-follow_head {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: .2rem;
    }
    .ct-follow_head p { font-size: .14rem; }
    .ct-follow_list a { padding: .2rem; }
    .ct-follow_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .16rem;
        margin-top: .24rem;
    }
}

@media (min-width: 1280px) {
    .ct-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); gap: .32rem; }
    .ct-map { min-height: 6rem; }
}