/* all over the front page */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
}
:root{
    --site-max-width:100%;
    --site-main-width:100%;
    --site-division:1400;
    --site-font-size-ratio:calc(100vw / var(--site-division));
    --site-color-black:#000000;
    --site-color-white:#ffffff;
}
::before,
::after{
    box-sizing: border-box;
}
fieldset{
    border: none;
}
img{
    vertical-align: middle;
}
body{
    max-width: var(--site-max-width);
    margin: auto;
}
main{
    max-width: var(--site-main-width);
    margin: auto;
}
/* header start */
header{
    background-color: var(--site-color-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(6 * var(--site-font-size-ratio));
}
header>a{
    display: block;
}
header>a:first-of-type{
    width: calc(230 * var(--site-font-size-ratio));
}
header>a:last-of-type{
    width: calc(450 * var(--site-font-size-ratio));
}
header>a>img{
    width: 100%;
}
/* header end */
/* footer start */
footer{
    background-color: var(--site-color-black);
    text-align: center;
    padding: 3vw;
}
footer>*{
    color: #ffffff;
}
footer>a{
    text-decoration: none;
    font-size: 3vw;
    padding: 0vw 3vw;
}
footer>small{
    display: block;
    font-size: 2.5vw;
    margin-top: 3vw;
}
/* footer end */
/* -------------------------------base(mobile)↓-------------------------------------- */
/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
    header>a:first-of-type{
        width: calc(133 * var(--site-font-size-ratio));
    }
    header>a:last-of-type{
        width: calc(311 * var(--site-font-size-ratio));
    }
    footer{
        text-align: right;
        padding: 15px 5px;
    }
    footer>a{
        font-size: 14px;
        padding: 0 15px;
    }
    footer>small{
        font-size: 12px;
        display: inline;
    }
}

@media screen and (min-width: 1400px){
    :root{
        --site-max-width:1960px;
        --site-main-width:1400px;
        --site-font-size-ratio:1px;
    }
    body{
        background-color: var(--site-color-black);
    }
    main{
        background-color: var(--site-color-white);
    }
}
/* -----------------desktop(include ipad)↓-------------------- */

/* all over the front page */