html{
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
a{
    text-decoration:none;
}
.header{
    background:#fafafa;
}
.header-logo{
    /* 余白の調整 */
    margin:0px;
    padding:30px 15px;
    /* 文字の指定 */
    font-size:36px;
    font-weight:bold;
    /* 文字を中央寄せにします */
    text-align:center;
}
.header-menu ul{
    /* flexboxで並び順を指定 */
    display:flex;
    align-items:center;
    justify-content:center;
    /* 余白の調整 */
    margin:0px;
    padding:0px;
    /* リストのスタイルを無効にする */
    list-style:none;
}
.header-menu ul li{
    display:block;
    margin:0px;
    padding:10px;
}
.header-menu ul li a{
    color:#999999;
}
.header-menu ul li a:hover{
    color:#444444;
}
.firstview{
    padding:150px 10px;
    /* 文字の指定 */
    font-size:60px;
    font-weight:bold;
    color:#ffffff;
    text-align:center;
    /* 背景の指定 */
    background-color:#02a8a8;
}
.main{
    /* 余白の調整 */
    margin:0px;
    padding:100px 0px;
}
.main.bg-grey{
    /* 背景の指定 */
    background:#fafafa;
}
.content{
    max-width:1100px;
    margin:0px auto;
    padding:0px 15px 0px 15px;
}
.content-heading{
    /* 余白の調整 */
    margin:0px 0px 50px 0px;
    padding:15px;
    /* 文字の指定 */
    font-size:16px;
    font-weight:bold;
    color:#ffffff;
    /* 背景の指定 */
    background-color:#02a8a8;
    border-radius:8px;
}
.portfolio{
    /* flexboxで並び順を指定 */
    display:flex;
    flex-wrap:wrap;
    margin:0px -10px 0px -10px;
}
.portfolio .portfolio-item{
    /* 幅の調整 */
    width:calc(100% / 3 - 20px);
    /* 余白の調整 */
    margin:10px;
}
.portfolio .portfolio-item img{
    /* 余白の調整 */
    display:block;
    margin:0px auto;
    max-width:100%;
}
.profile{
    /* flexboxで並び順を指定 */
    display:flex;
    align-items: center;
    flex-wrap:wrap;
}
.profile-photo{
    /* 余白の調整 */
    padding:30px;
    /* 横幅の調整 */
    width:100%;
}
@media (min-width: 992px){
    .profile-photo{
        /* 余白の調整 */
        padding:30px;
        /* 横幅の調整 */
        width:30%;
    }
}
.profile-photo img{
    display:block;
    margin:0px auto 30px auto;
    width:100%;
    max-width:200px;
    border-radius:50%;
    /* 影を付ける設定 */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}
.profile-content{
    /* 横幅の調整 */
    width:100%;
}
@media (min-width: 992px){
    .profile-content{
        /* 余白の調整 */
        padding:30px;
        /* 横幅の調整 */
        width:70%;
    }
}
.profile-content p{
    /* 余白の調整 */
    margin:0px 0px 20px 0px;
    /* 文字の調整 */
    font-size:16px;
    font-weight:normal;
    color:#666666;
    line-height:1.8;
    letter-spacing:0.2em;
}

.footer{
    background:#444444;
    padding:60px 15px;
}
.footer-logo{
    /* 余白の調整 */
    margin:0px 0px 20px 0px;
    /* 文字の調整 */
    font-size:36px;
    font-weight:bold;
    color:#ffffff;
    text-align:center;
}
.footer-menu ul{
    /* flexboxで並び順を指定 */
    display:flex;
    align-items:center;
    justify-content:center;
    /* リストのスタイルを無効にする */
    list-style:none;
}
.footer-menu ul li{
    display:block;
    margin:0px;
    padding:15px;
}
.footer-menu ul li a{
    color:#999999;
}
.footer-menu ul li a:hover{
    color:#ffffff;
}