:root {
    /* ================================================
    インナー幅の設定
    ================================================ */

    /* コンテンツのインナー幅（Webサイトで一番多いインナー幅で設定） */
    --inner: 1480px;

    /* 余白設定 */
    --padding-pc: 25px;
    --padding-sp: 20px;

    /* ================================================ */
    /* 色に関する設定 */
    /* ================================================ */
    --white: #FFF;

    --black: #585858;
    --black-sub: #535353;

    --green:#138A48;
    --green-deep: #1C623B;
    --green-yellow: #E6FF22;
    --green-light: #F0F8E1;
    --green-pale: #64B186;
    --green-fax: #3CB37A;
    --green-a: #C0E0CE;

    --gray: #707070;
    --gray-thin: #838383;
    --gray-bg: #EFEFEF;
    --gray-a: #E5E5E5;
    --gray-b: #C6C6C6;
    --gray-c: #F8F8F8;
    --gray-d: #D5D5D5;
    --gray-e: #B1B1B1;
    --gray-f: #AFAFAF;
    --gray-g: #767676;

    --red: #DD6447;

    /* ================================================ */
    /* フォントについての設定 */
    /* ================================================ */
    --base-font: "noto-sans-cjk-jp", sans-serif;
    --sub-font:"zen-kaku-gothic-new", sans-serif;
    --accent-font:"zen-antique", sans-serif;
    --hiragino-font:"Hiragino Sans", "ヒラギノ角ゴ Pro W3", sans-serif;
}

body{
    color: var(--black);
    font-weight: 500;
    font-family: var(--base-font);
}

/* aタグのスタイルリセット*/
a {
    text-decoration: none;
    color: var(--black);
}

a:hover {
    opacity: 0.8;
}

.inner {
    max-width: var(--inner);
    width: 100%;
    padding-inline: 25px;
    margin-inline: auto;
}

@media (max-width:767px) {
    .inner{
        padding-inline: 20px;
    }
}

ul{
    list-style: none;
    padding: 0;
}

/* PCのみ表示 */
.pc-only {
    display: block;
}

@media (max-width:767px) {
    .pc-only{
        display: none;
    }
}

/*モバイルのみ表示*/
.sp-only{
    display: none;
}

@media (max-width:767px) {
    .sp-only {
        display: block;
    }
}