@charset "utf-8";

.contact {
    padding: 0 30px;
}

.page-title {
    font-family: "Montserrat";
    font-size: 2.4rem;
    font-weight: 600;

    margin-top: 40px;
}

/* =======================================================
本文（固定ページ「Links」の本文で編集する）

  見出し2 … 緑の帯（グループ名）
  段落   … 1件分。1行目に名前、改行してリンクや補足
==========================================================*/
.contact__entry h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    /* もとは高さ 45px 固定だった。文言が長いときに溢れないよう
       最低の高さにし、余白と行間で同じ高さに収まるようにしている。 */
    min-height: 45px;
    margin-top: 20px;
    padding: 5px 15px;
    border-radius: 10px;
    line-height: 1.4;

    background-color: #92CCA4;
    color: #fff;

    font-family: "Source Sans Pro";
    font-size: 2rem;
    font-weight: 700;
}

.contact__entry p {
    font-family: "Source Sans Pro";
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2;
    margin-top: 25px;
}

/* リンクと、下線だけ引いた文字（リンク先が無いもの）は同じ見た目にする */
.contact__entry a,
.contact__entry u {
    font-family: "Phetsarath", sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}

/* もともと常時下線があるため、下線を足すのではなく色の変化で反応させる */
.contact__entry a {
    transition: color .3s ease;
}

.contact__entry a:hover {
    color: #4E9E6A;
}

.footer {
    margin-top: 60px;
}

/* =======================================================
PC
==========================================================*/
@media screen and (min-width:1000px) {

    .contact {
        padding: 0 57px;
    }

    .page-title {
        font-size: 6.4rem;
    }

    .contact__entry h2 {
        font-size: 2.4rem;
    }

    .contact__entry p {
        font-size: 2.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .contact__entry a {
        transition: none;
    }
}