@charset "UTF-8";

/*基本設定-----------------------------------------*/
html, body { 
    margin: 0px;
    padding: 0px;
   }

body {
    font-size: 1em;
    color: #333;
    line-height:1.5rem;
    background-color: #333;
    }   

/*フォント設定-----------------------------------------*/
body .en, .name, .num{
    font-family: "Stick No Bills", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
body .name{
    font-size: 1.5rem;
    font-weight: 700;
}
.bold{
    font-size: 1.5rem;
    font-weight: 600;
}
.light{
    font-weight: 200;
}
.num{
    font-size: 1.25rem;
    color: #7A7252;
    font-weight: 300;
}
body .jp{
    font-family: "stick", sans-serif;
    font-size: .85rem;
    color: #7A7252;
    font-weight: lighter;
    font-style: normal;
}
#main .id{
    font-size: 1rem;
}

/*装飾波線-----------------------------------------*/
.deco-horizontal{
    background-size: 18px 1px;
    background-image: linear-gradient(to right, transparent 4px, #000 4px, #000 6px,transparent 6px, transparent 10px, #000 10px, #000 14px, transparent 14px);
    background-repeat: repeat-x;
    background-position: left bottom;
}
.deco-vertical{
    background-size: 1px 18px;
    background-image: linear-gradient(to bottom, transparent 4px, #000 4px, #000 6px,transparent 6px, transparent 10px, #000 10px, #000 14px, transparent 14px);
    background-repeat: repeat-y;
    background-position: left top;
}


/* スマホサイズに指定　　*/
#container{
    margin: 0 auto;
  max-width : 390px;
  background-color: #fff;
  text-align: left;
  overflow: hidden;
}

/* リンクの文字色・リスト */
    a{
        text-decoration: none;
        color: #333;
        display: block;
    }
    li{list-style: none;}
 
/* 画像の下に隙間を空けない */    
 img{
    vertical-align: top;
 }

 
/*ヘッダー-----------------------------------*/
#header{
    padding: 0 15px;
    background-color: #fff;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between; 
    max-width: 390px;
    position: fixed;  
    box-shadow: rgba(255, 255, 255, 0.8) 0 3px 3px;
    z-index: 3;
}
#header > div{
    margin: auto 0;
    height: 60px;
}

#header .back_btn{
    width: 40px; height: 40px;
}

#header .name{
    height: 42px;
    width: 180px;
    text-align: center;
    margin: 0 0 3px 3px;
    padding: 9px 0;
    border: #333 solid 1px;
}
#header .deco-horizontal{
    height: 45px;
    width: 182px;
    
}

#header .menu p{
    text-align: center;
    margin: 0;   
    padding: 0;
}
#header .menu img{
    margin: 0;   
    padding: 0;
    height: 40px;   
}
#header .menu{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 45px;
    height: 60px;
}

/*メインビジュアル-----------------------------------*/
#mainvisual{
    height: 320px;
    background-image: url(img/mainvisual.jpg);
    background-position: 0px -40px;
    background-size: cover;
    display: flex;
    flex-flow: row-reverse;
    box-shadow: inset 0 3px 6px #fff;
}



/*水彩の仕切り-----------------------------------*/
#watercolor{
    margin-top: -50px;
    width: 100%;
    height: 150px; 
    position: relative;
    top: -50px;
}
#watercolor img{
    width: 100%;
}
#watercolor .tool-img{
    position: absolute;
    top: -40px;
    left: 100px;
    height: 190px;
}

/*アイコン-----------------------------------*/
#icon{
    margin-top: -160px;
    height: 100px;
    width: 150px;
    padding-top: 10px;
    position: absolute;
    z-index: 1;
    background-image: url(img/iconback.svg);
    background-size: 60%;
    background-position: left bottom;
}
.icon_area { 
    margin-left: 20px;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background-color: #fff;
    border: #000 solid 1px;
}
.icon_img { 
    margin: 5px;
    border-radius: 50%;
    height: 88px;
    width: 88px;
    background-position: 50% 20%;
    background-size: 130%;
    background-image: url(img/icon.jpg);
}

/*下半分-----------------------------------*/
#main{
    display: flex;
    background-color: #fff;
}

#info{
    max-width: 390px;
    margin: 0;
    margin-top: -40px;
    position: absolute;
    z-index: 2;
}
#info .name_area{
    margin: 0 30px;
    margin-bottom: 20px;
}
#info .id{
    font-weight: 200;
    color: #828282;
}

#info .follow_btn{
    position: absolute;
    height: 56px;
    width: 130px;
    background-image: url(img/follow_btn.svg);
    background-size: cover;
    right: 20px;
    top: -15px;
}
#info .follow_btn p{
    text-align: center;
    margin:15px auto;
}
#info a > p{
    color: #fff;
}
#info ul, li{
    display: flex;
}
#info ul{
    margin: 0 30px;
}
#info li {
    margin-right: 20px;
}
#info li  p{
    margin-left: 10px;
}
#info .deco-horizontal{
    margin: 10px 30px;
    padding-bottom: 4px;
}
#info .intro_text{
    padding-bottom: 10px;
    border-bottom: #000 solid 1px;
}

/* スケッチブック---------------------- */ 
#sketchbook{
    display: block;
    margin-top: 130px;
    width: 100%;
}
/* 付箋 */ 
#stick{
    position: relative;
    height: 60px;
}
#stick li{
    position: absolute;
    top: 0px;
}
#stick .works{
    left: 20px;
    
}
#stick .works img{
    height: 140px;
    width: 80px;
}
#stick .about, .posts{
    display: flex;
    flex-direction: column;
    width: 60px;
    text-align: center;
}
#stick .posts{
    left: 95px;
    color: #FF696C;
    font-weight: 400;
}
#stick .about{
    left: 160px;
    color: #658609;
    font-weight: 400;
}
/* 本の上 */ 
#sketchbook_area{
    background-image: url(img/sketchbook.svg);
    width: 100%;
    height: 720px;
    background-size: 105%;
    padding-top: 30px;
}
h4{
    height: 40px;
    width: 100px;
    margin-left: 230px;
    border: #000 solid 1px;
    text-align: center;
    padding-top: 7px;
    background-image: url(img/underline.svg);
    background-position: 0 20px;
}
.img_area{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.img_area img{
    width: 140px;
    border: #000 solid 1px;
    margin: 0 0 3px 3px;
}
.left_column{
    margin-right: 20px;
}
.right_column{
    margin-right: 30px;
}
#sketchbook .deco-horizontal{
    margin-bottom: 15px;
}
#sketchbook .deco-vertical{
    margin: 0;
}
#sketchbook button{
    display: block;
    margin: auto auto 50px auto;
}