@charset "utf-8";

/* ===========================
main
=========================== */
.container{
    min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative;/* ←相対位置 */
    padding-bottom: 121px; /* ←フッターの高さを指定 */
    box-sizing: border-box;
    /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}

.copy {
    position: absolute;/* ←絶対位置 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.pcBr {
    display: none;
}

.section--contact {
    padding: 0 5.3%;
}

.contact__explanation {
    margin-top: 56px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8;
}

.contact__address {
    margin-top: 40px;
    font-family: Outfit;
    font-size: 2rem;
    line-height: 1;
}

.contact__requirements{
    margin-top: 40px;
}

.contact__intro {
    font-size: 1.4rem;
    line-height: 1.8;
}

.contact__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 132px;
    padding: 15px 14px 15px 8px;
    border: 1px solid var(--accent-blue);
    background: var(--bg-blue-ultra-soft);
    margin-top: 8px;
    max-width: 516px;
}

.contact__item::before {
    content: "•";
    position: absolute;
    left: 4px;
    top: 49%;                 /* 高さの中央に配置 */
    transform: translateY(-50%); /* 正確に中央へ */
    color: var(--primary-blue);
    font-size: 1.6rem;
    line-height: 1;
}

.contact__item {
    position: relative;
    display: flex;
    align-items: center; /* テキストを縦中央に */
    font-size: 1.4rem;
    line-height: 1.8;
    padding-left: 13px;
}

.contact__note {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-top: 8px;
}



/* main tb */
@media screen and (min-width: 585px){
    .pcBr {
        display: block;
    }
}


@media screen and (min-width: 768px){
    .container{
        padding-bottom: 144px;
    }

    .copy {
        padding-top: 108px;
    }

    .section--contact {
        padding: 0 7.3%;
    }

    .contact__explanation {
        font-size: 1.6rem;
    }

    .contact__address {
        margin-top: 56px;
        font-size: 2.8rem;
    }

    .contact__requirements{
        margin-top: 56px;
    }

    .contact__intro {
        font-size: 1.6rem;
    }

    .contact__list {
        height: 148px;
        max-width: 604px;
    }

    .contact__item::before {
        font-size: 1.8rem;
    }

    .contact__item {
        font-size: 1.6rem;
        padding-left: 13px;
    }

    .contact__note {
        font-size: 1.4rem;
        margin-top: 6px;
    }

    /* スクロールバーと同じサイズの横幅 */
    html.has-slider {
        scrollbar-gutter: stable;
    }

    /* 旧ブラウザ用フォールバック */
    @supports not (scrollbar-gutter: stable) {
    html.has-slider {
        overflow-y: scroll;
    }
    }
}

@media screen and (min-width: 1100px){
    .contact__top {
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .contact__explanation {
        padding-bottom: 13px;
    }

    .contact__address {
        text-align: right;
        padding-right: 102px;
        margin-top: 51px;
    }

    .contact__requirements {
        margin-left: auto;
        width: 480px;
        margin-top: 64px;
    }
}

@media screen and (min-width: 1440px){
    .article {
        padding: 0 8.3%;
    }

    .section--contact {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    }

}

@media screen and (min-width: 1536px){
    .contact__requirements {
        width: 609px;
    }

    .contact__address {
        padding-right: 232px;
    }

    .contact__explanation {
        padding-right: 128px;
    }

}