@charset "utf-8";
html,body{
    margin: 0px;
    padding: 0px;
}
body{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 5em;
    color: #ffffff;
    font-weight: 3em;
    background-color: #292929;
}
a{text-decoration: none;}

#container{
    background-color: #1b1b1b;
    margin: 0 auto;
    width: 100%;
    max-width :390px;
    height: 100vh;
    background-size: contain;
    text-align: left;
 }
     .topmenu{
         background-color: #1b1b1b;
         width: 100%;
         height: 107px;
          margin: auto;}
         
          .topmenu_logo{
             width: 100%;
             height: 107px;
             display: flex;
             align-items:flex-end;
          }
          


      

     #top_profile
     { max-height: 844px;
        max-width: 390px;
     }

        .top_profile_img{
         
         width: 100%;
         height: 844px;
         margin:0 0;
         background: url(img/back-ground.jpg);
        }
        .gurade-syonn1{
            width: 195px;
            height: 844px;
            background: linear-gradient(90deg, transparent,rgba(0,0,0,0.8));
            position: absolute;
            top: 107px;
            margin: 0 0 0 195px;

        }
     
 .minoue{
    position: absolute;
    top: 167px;
    margin: 0 0 0 244px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight:200;
 }   
.h1txt{
    position: absolute;
    top: 195px;
    margin: 0 0 0 240px;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-weight:700;
    font-size: 24px;
    }
 .top_copy{
    position: absolute;
    top: 202px;
    margin: 40px 0 0 244px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight:200;
 }

 .follow_amount{
    position: absolute;
    top: 290px;
    margin: 0 0 0 260px;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight:300;
  }
 .follow1{
    position: absolute;
    top: 290px;
    margin: 20px 0 0 255px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight:400;
    color: #ffffff;
 }

 .follower_amount{
    position: absolute;
    top: 290px;
    margin: 0 0 0 320px;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight:300;
 }
 .follower1{
    position: absolute;
    top: 290px;
    margin: 20px 0 0 313px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight:400;
    color: #ffffff;
 }

 #follow_button{
    width: 138px;
    height: 27px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 10px;
    border: 0.3px solid #ffffff;
    position: absolute;
    top: 350px;
    margin: 0 0 0 235px;
    }

      .followsuru{
         margin: 1px 20px  ;
         font-family: "Inter", sans-serif;
         font-size: 16px;
         font-weight:300;}

#latest_post{
    width: 366px;
    height: 50px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 15px;
    border: 1px solid #ffffff;
    position: absolute;
    top: 400px;
    margin: 0 10px;
    }

    .lp_time{
        width: 70px;
        position: absolute;
        margin: 13px 330px 13px 13px ;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:200;
        color: #ffffff;
    }
    .lp_message{
        width: 300px;
        position: absolute;
        margin: 13px 76px ;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:200;
        color: #ffffff;
    }

#condition{
    width: 366px;
    height: 125px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 15px;
    border: 1px solid #6af629;
    position: absolute;
    top: 460px;
    margin: 0 10px;
    }    
      .c_day{
        width: 100;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:200;
        color: rgba(255, 255, 255, 0.7);
        margin: 6px 10px;
      }
      .c_condition{
        width: 150;
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:200;
        color: #6af629;
        position: absolute;
        top: -12.5px;
        left: 97px;
      }
      #condition_img{
         width: 320px;
         height: 40px;
         margin: 15px auto;
         display: flex;
         }
          .ci_1{
            margin: 0 0 0 30px;
            }
          .ci_2{
            margin: 0 0 0 30px;
            }
          .ci_3{
            margin: 0 0 0 61px;
            
             }
#c_stick{
   margin: -68px 0 0 27px;
}

#past_post{
   width: 365px;
   height: 50px;
   margin: 20px 15px 0 0 ;
   display: flex;
   align-items: flex-end;

}
    .pp_month{
       width: 80px;
       height: 17px;
        font-family: "Inter", sans-serif;
        font-size: 36px;
        font-weight:400;
        color: #ffffff;
       
    }
    .pp_year{
       width: 100px;
       height: 10px;
      font-family: "Inter", sans-serif;
      font-size: 20px;
      font-weight:400;
      color: #ffffff;
}

#highlight{
   width: 380px;
   height: 144px;
   position: absolute;
   left: -6px;
   display: flex;
   justify-content: center;
   margin: 10px 0 0 0;
}
   .h_triangle1{
      margin: 9px 4px 0 0 ;
       }
   .h_1006{
      width: 87px;
      height: 128px;
      background-color: #252525;
      border-radius: 20px;
      border: 1px solid #ffffff;
      margin: 8px 5px 0 4px;
   }
    .h_1006moji{
      font-family: "Inter", sans-serif;
        font-size: 48px;
        font-weight:400;
        color: #aaaaaaa2;
        margin: 36px 27px;
    }
   .h_1007{
      width: 87px;
      height: 128px;
      background-image: url(img/1007_img.png);
      border-radius: 20px;
      border: 1px solid #ffffff;
      margin: 8px 5px 0px 5px ;
   }  
      .h_1007moji{
         font-family: "Inter", sans-serif;
           font-size: 48px;
           font-weight:400;
           color: #ffffff;
           margin: 36px 32px;
       }
   
   .h_1008{
      width: 87px;
      height: 128px;
      background-color: #292929af;
      border-radius: 20px;
      border: 1px solid #ffffff;
      margin: 8px 4px 0 5px;
   }
   .h_triangle2{
      transform: rotate(180deg);
      margin: 0 0 17px 4px;
      }
                 
#uturikawari_gurade{
   width: 390px;
   height: 100px;
   position: absolute;
   left: -11px;
   top: 392px;
   background: linear-gradient(180deg, transparent,#1b1b1b);
}                  
             
#sitahanbun{
   width: 390px;
   height: 550px;
   background-color: #1b1b1b;
   position: absolute;
   top: 492px;
   left: -11px;
}
  .s_month{
   width: 80px;
   height: 17px;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight:400;
    color: #ffffff;
    position: absolute;top: -145px;left: 15px;
  }
      #s_pp{
         width: 366px;
         height: 400px;
         background-color: rgba(0,0,0,0.6);
         border-radius: 15px;
         border: 1px solid #6af629;
         position: absolute;
   
         margin: -52px 10px;

      }
      .s_day{
         width: 100;
         
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:200;
        color: rgba(255, 255, 255, 0.7);
        margin: 12px 10px;
      }
      .s_condition{
         width: 150;
         
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:200;
        color: #6af629;
        position: absolute;
        top: -6px;
        left: 97px;
      }
      .p_stick{
         position: absolute;
         top: 58px;
         margin: 0px 30px 20px 30px;
            }
      #p_pp1{
         width: 346px;
         height: 80px;
         background-color: #2a2a2a;
         border-radius: 15px;
         margin: 65px 10px 10px 10px;
            }
         .p_jikan1{
            font-family: "Inter", sans-serif;
            font-size: 12px;
            font-weight:300;
            color: #ffffff;
            position: relative;
            top: 8px;
            margin: 0 0 0 20px;
               }
               .p_text1{
                  width: 300px;
                  height: 40px;
                  font-family: "Inter", sans-serif;
                  font-size: 16px;
                  font-weight:300;
                  color: #ffffff;
                  margin: 18px auto;
                }
#p_pp1{
         width: 346px;
         height: 80px;
         background-color: #2a2a2a;
         border-radius: 15px;
         margin: 65px 10px 10px 10px;
            }
         .p_jikan1{
            font-family: "Inter", sans-serif;
            font-size: 12px;
            font-weight:300;
            color: #ffffff;
            position: relative;
            top: 8px;
            margin: 0 0 0 20px;
               }
               .p_text1{
                  width: 300px;
                  height: 40px;
                  font-family: "Inter", sans-serif;
                  font-size: 16px;
                  font-weight:300;
                  color: #ffffff;
                  margin: 18px auto;
                }
   #p_pp2{
      width: 346px;
      height: 80px;
      background-color: #2a2a2a;
      border-radius: 15px;
      margin: 5px 10px 10px 10px;
       }
         .p_jikan2{
            font-family: "Inter", sans-serif;
            font-size: 12px;
            font-weight:300;
            color: #ffffff;
            position: relative;
            top: 8px;
            margin: 0 0 0 20px;
             }
               .p_text2{
                  width: 300px;
                  height: 40px;
                  font-family: "Inter", sans-serif;
                  font-size: 16px;
                  font-weight:300;
                  color: #ffffff;
                  margin: 18px auto;
                   }
   #p_pp3{
      width: 346px;
      height: 100px;
      background-color: #2a2a2a;
      border-radius: 15px;
      margin: 5px 10px 10px 10px;
       }
         .p_jikan3{
            font-family: "Inter", sans-serif;
            font-size: 12px;
            font-weight:300;
            color: #ffffff;
            position: relative;
            top: 8px;
            margin: 0 0 0 20px;
             }
               .p_text3{
                  width: 300px;
                  height: 40px;
                  font-family: "Inter", sans-serif;
                  font-size: 16px;
                  font-weight:300;
                  color: #ffffff;
                  margin: 18px auto;
                   }
#kitaku{
   width: 366px;
   height: 80px;
   background-color: rgba(0,0,0,0.6);
   border-radius: 15px;
   border: 1px solid #919191;
   margin: 45px 0 0 0 ;
}
  .k_month{
   font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:200;
        color: #919191;
        margin: 12px 10px;
        }
       .k_condition{
         width: 150; 
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight:400;
        color: #919191;
        position: relative;
        top: -38px;
        left: 97px;
        }
        .k_stick{
         position: absolute;
         top: 470px;
         margin: 0 26px 0 26px
         
        }












      .topmenu_logo_move{
         width: 100%;
         height: 107px;
         display: flex;
         align-items:flex-end;
         position: fixed;
         top: 0;
      }
      .yajirusi{
         position: absolute;
         top: 65px;
         left: 20px;
      }
      .kyouyuu{
         position: absolute;
         top: 62px;
         left: 300px;         
      }
      .menu{
         width: 32px;
         height: 32px;
         position: absolute;
         top: 57px;
         left: 345px;  
      }