/* モーダルのスタイル設定  */
 .modal {
   display: none;
   /* デフォルトでは非表示 */
   position: fixed;
   /* 画面上に固定 */
   z-index: 10;
   /* コンテンツの上に表示 */
   padding-top: 100px;
   /* トップの位置 */
   left: 0;
   top: 0;
   width: 100%;
   /* 幅は画面全体 */
   height: 100%;
   /* 高さも画面全体 */
   overflow: auto;
   /* 外部をスクロール可能に */
   background-color: rgb(0, 0, 0);
   /* 背景色 */
   background-color: rgba(0, 0, 0, 0.9);
   /* 透明度を設定 */
 }

 .modal-content {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
 }

 .close {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
 }

 .close:hover,
 .close:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
 }

 #caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 150px;
 }

 .post_cover {
   background-color: white;
   margin: 0px !important;
   border-radius: 5px;
   padding: 3px;
 }

 .photo_cover {
   aspect-ratio: 6 /4;
   width: 100%;
   height: auto;
   overflow: hidden;
   border-radius: 3px;
   margin-bottom: 5px;

   img {
     object-fit: cover;
     width: 100%;
     height: 100%;
     display: block;
   }
 }

 .post_inner_cover {
   time {
     font-size: 0.9rem;
     color: gray;
   }

   /* 本文抜粋 */
   p {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 5;
     /* 最大行数を5に設定 */
     overflow: hidden;
     margin-bottom: 5px;
   }
 }




 .SeeInsta {
   float: right;
   font-size: 12px;
   font-weight: 600;
   padding: 5px;
   background-color: rgb(233, 233, 233);
   ;
   border-radius: 5px;

   img {
     width: 15px;
     height: 15px;
     margin-right: 5px;
   }
 }