/* カスタマイズ用CSS */

/* カスタムカラー定義 */
:root {
    --white-color: #FFFFFF;   /* メインカラー */
    --navy-color: #002642; /* アクセントカラー */
    --beige-color: #E6E2E2; /* アクセントカラー2 */
    --text-color: #031624;   /* 文字色 */
    --favorite-red: #DD7474; /* 赤 */
    --link-blue: #3D79A6; /* 青 */
}

/* 全ページの設定 */
.ec-layoutRole,
.ec-role,
.ec-layoutRole .ec-layoutRole__contents,
.ec-registerRole {
    background: var(--white-color);
    font-family: 'Inter', sans-serif;
    color: #031624;
    transition: 0.3s;
    user-select: none;
}

.ec-layoutRole .ec-layoutRole__contents {
    padding: 30px 0;
}

.front_page .ec-layoutRole .ec-layoutRole__contents,
.product_page .ec-layoutRole .ec-layoutRole__contents,
.product_page .ec-layoutRole .ec-layoutRole__contents {
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .ec-pageHeader h1, .ec-pageHeader .h1 {
        color: #031624;
    }
}
.ec-pageHeader h1, .ec-pageHeader .h1 {
    color: #031624;
}
.ec-link {
    color: #3D79A6;
}

/* PCサイズの時、コンテンツ幅を1000pxにする */
@media only screen and (min-width: 1100px) {
    .ec-layoutRole .ec-layoutRole__main {
        width: 1000px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1100px) {
.ec-layoutRole .ec-layoutRole__main {
    padding: 0 20px;
    }
}

@media only screen and (max-width: 767.5px) {
    .ec-layoutRole .ec-layoutRole__main {
        width: 100%;
        padding: 0 30px;
    }
}

@media only screen and (max-width: 480px) {
    .ec-layoutRole .ec-layoutRole__main {
        width: 100%;
        padding: 0 10px;
    }
}