@charset "UTF-8";

/* =====================
  common - pc
===================== */
body {
    font-size: 16px;
    /*font-family: "Times New Roman", '游明朝', 'Yu Mincho', YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
    line-height: 1.4;
    letter-spacing: 0em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

img {
    transition: 1.5s
}

/*.resp,.sp {
    display: none;
}*/

/* =====================
  animation
===================== */
.fadeUp01 {
    transition: 1s;
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px)
}
.fadeUp02 {
    transition: 1s;
    opacity: 0;
    transform: translate(60px, 0);
    -webkit-transform: translate(60px, 0)
}
.fadeUp03 {
    transition: 1s;
    opacity: 0;
    transform: translate(-60px, 0);
    -webkit-transform: translate(-60px, 0)
}
.fadeUpOn {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0)
}

/* =====================
  bottom - pc
===================== */
.bottom {
    width: 100%;
    max-width: 1200px;
    margin: 100px auto;
}
.bottom ul {
    margin: 0 auto
}
.bottom ul .left {
    float: left
}
.bottom ul .right {
    float: right
}
/* // end of bottom */


/* *********************
  small pc
********************* */
@media screen and (max-width:1100px){
    img{
        max-width: 100%;
    }

    /* =====================
      bottom - small small pc
    ===================== */
    .bottom{
        width: 90%;
        margin: 10vw auto 0;
        padding-bottom: 10vw;
    }
    .bottom .left{
        width: 49%;
        float: left;
    }
    .bottom .right{
        width: 49%;
        float: right;
    }
    .bottom img{
        width: 100%;
    }
}


/* *********************
  tablet
********************* */
@media screen and (max-width:768px){

}

@media screen and (max-width:800px){
    /* =====================
      bottom - phablet
    ===================== */
    .bottom .left{
        width: 100%;
        float: none;
        margin-bottom: 7vw;
    }
    .bottom .right{
        width: 100%;
        float: none;
        margin-top: 40px; 
    }
}

/* *********************
  phablet
********************* */
@media screen and (max-width:480px){

    .fadeUp01 {
        opacity: 0;
        transform: translate(0,2%);
        -webkit-transform: translate(0,2%)
    }
    .fadeUpOn {
        opacity: 1;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0)
    }

    
}

/* =====================
  bottom - smartphone
===================== */
@media screen and (max-width:375px){
    
}