*{
    margin:0;
    padding:0;
}

#wrapper{
    /*backgorund-color:;*/
}

h1{
    text-align: center;
}

#header-sns{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.header-sns-items{
    display: inline-block;
    width:100px;

    a{
        text-decoration: none;
        color:#000;
    }

    a:visited{
        color:#000;
    }


}

.header-sns-items:hover{
    border:5px solid #ddd;
}

.header-sns-items div:nth-child(1) img{
        width:30px;
}



#header-menu{
    text-align: center;

    div{
        display: inline-block;
        margin-bottom:10px;
        max-width: 400px;
        min-width: 140px;
        margin:0 auto 10px auto;
    }

    a{
        padding-top:10px;
        padding-bottom:10px;
        display: block;
        width:100%;
        height:100%;
        color:#000;
        text-decoration: none;
    }

    a:visited{
        color:#000;
    }

    a:hover{
        background-color: #ccc;
    }
}

#content{
    width:80%;
    min-width: 500px;
    margin:10px auto;
}

#top-profile{
    text-align: center;

    line-height: 40px;

    h2{
        border-bottom:1px #000 solid;
        width:95%;
        margin:5px auto;
    }

}

#top-product{
    text-align: center;

    line-height: 40px;

    h2{
        border-bottom:1px #000 solid;
        width:95%;
        margin:5px auto;
    }


}


#copyright{
    text-align: center;
}

.inline{
    display: inline-block;
}

.valign-m{
    vertical-align: middle;
}

.gradationBorder {
  --border-width: 3px;
  position: relative;
  border-bottom: var(--border-width) solid #FF8787;
  border-image: linear-gradient(45deg, #FF8787, #85d3e8 70%, #3D97A0) 1;
}

.gradationBorder::before {
  content: '';
  position: absolute;
  bottom: calc(var(--border-width) * -1);
  left: 0;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 5px,
    #fff 0,
    #fff 8px
  );
  height: var(--border-width);
  width: 100%;
}

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


    #header-menu div{
        display: block;
    }

}

#contact-form{

    margin:20px auto;
    text-align: center;

    div{
        line-height: 30px;
        text-align: left;
        width:300px;
        margin:10px auto;
    }

    input,textarea,button{
        width:300px;
    }

    textarea{
        height:90px;
    }

    button{
        height:30px;
    }
}

#article-list{
    text-align: center;

    line-height: 40px;

    h2{
        border-bottom:1px #000 solid;
        width:95%;
        margin:5px auto;
    }

}

#article-post-item{
    text-align: center;

    line-height: 40px;

    h2{
        border-bottom:1px #000 solid;
        width:95%;
        margin:5px auto;
    }

    p{
        text-align: left;
    }

    .article-body{
        text-align: left;
        width:95%;
        margin:5px auto;
    }

}