/* responsive.css
 *
 * Tablet (481-768px) and smartphone (480px and below) typography shared by all pages.
 * Loaded after every page stylesheet, so each rule repeats the selector it overrides.
 * PC (769px and above) is not touched here.
 *
 * Scale                          tablet   smartphone
 *   Section heading (h2)          2.6rem   2.2rem   (TOP heading images: height 5rem / 5rem)
 *   Sub heading (h3)              1.8rem   1.6rem
 *   Card title                    1.6rem   1.5rem
 *   Body text                     1.5rem   1.4rem
 *   Small text (cards, tables)    1.3rem   1.3rem
 *   Meta (card details, labels)   1.2rem   1.1rem
 */

/*-------------------------------------------
Tablet and smartphone
-------------------------------------------*/
@media screen and (max-width: 768px) {

    /* Body text */
    body p {
        font-size: 1.5rem;
    }

    .p-top-about__text,
    .p-top-about__text p,
    .p-handling__group-header>div>p,
    .p-privacy__intro,
    .p-privacy__policy-body p,
    .p-privacy__policy-body li,
    .p-company__message p,
    .p-news-single__content,
    .p-news-single__content p {
        font-size: 1.5rem;
        line-height: 1.8;
    }

    .p-top-news__item span,
    .p-news-archive__title {
        font-size: 1.5rem;
    }

    /* Section headings */
    .p-handling__group h2,
    .p-property-archive__title,
    .p-property-single__content-title,
    .p-property-single__inquiry h2,
    .p-property-single__related-header h2,
    .p-property-single__other-types h2 {
        font-size: 2.6rem;
    }

    .p-company__message h2,
    .p-news-single__title {
        font-size: 2.2rem;
    }

    /* TOP section heading images (same height on tablet and smartphone). */
    .p-top-new-properties__header h2 img,
    .p-top-property-guide__title img,
    .p-top-news__title img {
        width: auto;
        height: 5rem;
    }

    /* Sub headings */
    .p-top-property-guide__group-title,
    .p-top-new-properties__group-header h3,
    .p-privacy__policy-body h2,
    .p-privacy__contact-message h2 {
        font-size: 1.8rem;
    }

    .p-handling-card h3 {
        font-size: 1.8rem;
    }

    /* Card titles */
    .p-top-new-property-card__body h4,
    .p-property-archive .p-property-card__title,
    .p-property-single__related-grid .p-property-card__title {
        font-size: 1.6rem;
    }

    /* Small text */
    .p-top-news__feature-text,
    .p-handling-card__description,
    .p-handling-card__body a,
    .p-privacy__contact-message p,
    .p-privacy__contact-details,
    .p-privacy__contact-details strong {
        font-size: 1.3rem;
    }

    .p-company__table-row {
        font-size: 1.5rem;
    }

    .p-property-single__detail-grid>div,
    .p-property-single__features h4,
    .p-property-single__features p {
        font-size: 1.3rem;
    }

    /* Detail table: the label column fits the longest standard label ("土地面積の計測方式") on one line.
       Longer labels (e.g. free items added by the client) wrap inside the grey cell instead of running out of it. */
    /* The "設備・条件・備考" table uses the same label width, so both tables line up on every property. */
    .p-property-single__detail-grid>div,
    .p-property-single__features>div {
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    .p-property-single__detail-grid dt {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Meta */
    .p-top-new-property-card__meta,
    .p-property-archive .p-property-card__summary,
    .p-property-archive .p-property-card__address,
    .p-property-single__related-grid .p-property-card__summary,
    .p-property-single__related-grid .p-property-card__address {
        font-size: 1.2rem;
    }

    .p-top-property-guide__english {
        font-size: 1.1rem;
    }

    .p-top-property-guide__label {
        font-size: 1.5rem;
    }

    /* Buttons */
    p.p-top-news__archive-link .c-arrow-button {
        font-size: 1.4rem;
    }

    /* ".p-property-filter button { font: inherit; }" resets the button text to 1rem, so repeat it with higher specificity. */
    .p-property-filter .p-property-filter__submit {
        font-size: 1.4rem;
    }

    .p-top-news__feature-link {
        font-size: 1.2rem;
    }

    .p-property-archive__count {
        font-size: 1.5rem;
    }

    .p-property-single__basic>.c-button {
        font-size: 2rem;
    }

    .p-property-single__inquiry-contact {
        font-size: 3rem;
    }
}

/*-------------------------------------------
Smartphone
-------------------------------------------*/
@media screen and (max-width: 480px) {

    /* Body text */
    body p {
        font-size: 1.4rem;
    }

    .p-top-about__text,
    .p-top-about__text p,
    .p-handling__group-header>div>p,
    .p-privacy__intro,
    .p-privacy__policy-body p,
    .p-privacy__policy-body li,
    .p-company__message p,
    .p-news-single__content,
    .p-news-single__content p {
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .p-top-news__item span,
    .p-news-archive__title {
        font-size: 1.4rem;
    }

    /* Section headings */
    .p-handling__group h2,
    .p-property-archive__title,
    .p-property-single__content-title,
    .p-property-single__inquiry h2,
    .p-property-single__related-header h2,
    .p-property-single__other-types h2 {
        font-size: 2.2rem;
    }

    .p-company__message h2,
    .p-news-single__title {
        font-size: 2rem;
    }

    /* Property detail: heading on the left and "back to list" link on the right, on one line.
       1.6rem is the largest size that fits "他のカテゴリから探す" beside a 9-character link (the link stays at the 11px minimum). */
    .p-property-single__related-header,
    .p-property-single__other-types>header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem 1.2rem;
    }

    .p-property-single__related-header h2,
    .p-property-single__other-types h2 {
        font-size: 1.6rem;
        white-space: nowrap;
    }

    /* On very narrow screens (under about 375px) the link moves to the next line, still on the right. */
    .p-property-single__related-header>a,
    .p-property-single__other-types>header>a {
        margin-left: auto;
        padding-top: 0;
        white-space: nowrap;
    }

    /* Smaller "お気に入りに追加" button on the property detail page. */
    .p-property-single .c-favorite-button {
        padding: 0.7rem 1.2rem;
        border-radius: 0.8rem;
        font-size: 1.3rem;
    }

    .p-property-single .c-favorite-button__icon {
        flex-basis: 1.6rem;
        width: 1.6rem;
        height: 1.6rem;
    }

    /* Sub headings */
    .p-top-property-guide__group-title,
    .p-top-new-properties__group-header h3,
    .p-privacy__policy-body h2,
    .p-privacy__contact-message h2 {
        font-size: 1.6rem;
    }

    .p-handling-card h3 {
        font-size: 1.6rem;
    }

    /* Card titles */
    .p-top-new-property-card__body h4,
    .p-property-archive .p-property-card__title,
    .p-property-single__related-grid .p-property-card__title {
        font-size: 1.5rem;
    }

    /* Small text */
    .p-top-news__feature-text,
    .p-handling-card__description,
    .p-handling-card__body a,
    .p-privacy__contact-message p,
    .p-privacy__contact-details,
    .p-privacy__contact-details strong {
        font-size: 1.3rem;
    }

    .p-company__table-row {
        font-size: 1.3rem;
    }

    /* The property detail tables keep 1.2rem on smartphones (requested earlier). */
    .p-property-single__detail-grid>div,
    .p-property-single__features h4,
    .p-property-single__features p {
        font-size: 1.2rem;
    }

    .p-property-single__detail-grid>div,
    .p-property-single__features>div {
        grid-template-columns: 13rem minmax(0, 1fr);
    }

    /* Meta */
    .p-top-new-property-card__meta,
    .p-property-archive .p-property-card__summary,
    .p-property-archive .p-property-card__address,
    .p-property-single__related-grid .p-property-card__summary,
    .p-property-single__related-grid .p-property-card__address {
        font-size: 1.1rem;
    }

    .p-top-property-guide__english {
        font-size: 1.1rem;
    }

    /* Smallest text on smartphones is 11px (coding checklist). */
    .p-cta-contact__phone small {
        font-size: 1.1rem;
    }

    /* The English label images are drawn at about 10px; enlarge them to about 11px. */
    .p-handling-card__english img {
        zoom: 1.1;
    }

    .p-top-property-guide__label {
        font-size: 1.4rem;
    }

    /* Buttons */
    p.p-top-news__archive-link .c-arrow-button {
        font-size: 1.3rem;
        min-width: 100%;
        padding-right: 1.6rem;
    }

    /* At full width the arrow is placed right after the text instead of at the button edge. */
    p.p-top-news__archive-link .c-arrow-button::before,
    p.p-top-news__archive-link .c-arrow-button::after {
        position: static;
        order: 1;
    }

    p.p-top-news__archive-link .c-arrow-button::before {
        margin-left: 0.8rem;
    }

    p.p-top-news__archive-link .c-arrow-button::after {
        margin-left: -0.65rem;
    }

    .p-property-single__basic>.c-button {
        font-size: 1.8rem;
    }

    .p-property-single__inquiry-contact {
        font-size: 2.6rem;
    }
}