html{scroll-behavior:smooth;}
body{background-color:#151d28}
/*本文*/
.content{color:white}
/*リンク*/
.content a:link {color:#0f73ff;text-decoration:none}
.content a:visited{color:#0f73ff;text-decoration:none}
.content a:hover {color:#0f73ff;text-decoration:underline}
.content a:active {color:#0f73ff;text-decoration:underline}

.post-tl-top{border-bottom:solid 0.5px #abb8c8;margin-bottom:1em !important;width: 100vw;
  margin: 0 calc(50% - 50vw);}
.post-tl-icondiv{text-align:center; -webkit-tap-highlight-color:transparent;}
.post-tl-icon div a:hover, .post-tl-icon div a:active {text-decoration: none;}
.post-tl-icon{width:38px;margin:0 auto 0.2em auto;cursor:pointer}
.filter-buttons{display:flex;justify-content:space-around}
.filter-btn{position:relative;display: inline-block;padding-bottom:0.7em;}
.filter-btn.active{font-weight:bold}
.filter-btn.active::after {
  content: "";
  position: absolute;
  right:8%;left:8%;
  height: 3px;
  background: #238efe;
  bottom: -1.5px;     /*下の要素に重ねる量を調整*/
  border-radius: 999px;/*高さの半分以上で両端が丸くなる（ピル型）*/
  z-index: 2;
  pointer-events: none;
}

@media (min-width:751px){.post{margin:0 20%;border-bottom:solid 1px #abb8c8}}
@media only screen and (max-width:767px){
.post {margin:0 2%;position: relative;}
.post::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  height: 0.5px;
  background-color: #abb8c8;}}
.post{padding-bottom:1.5em;margin-bottom:1em}

.post-back{margin-bottom:1em}
.post-back>a>img{height:1.2em}
.post-back a:link {color:#abb8c8;text-decoration:none}
.post-back a:visited{color:#abb8c8;text-decoration:none}
.post-back a:hover {color:#0f73ff;text-decoration:none}
.post-back a:active {color:#0f73ff;text-decoration:none}
.post a{letter-spacing:0;overflow-wrap:anywhere}
.post-date{color:#abb8c8;text-align:right}
.post-letters{width:100%}

/*▽▽一定の文字数で折りたたむ▽▽*/
.post-letters {
  position: relative;
  overflow: visible; /* ラベルは絶対配置なので container 側は visible */
}

/* 挿入される要素の基本 */
.post-letters input[type="checkbox"] {
  display: none;
}

/* ラッパー（本文を包む） */
.post-letters .pl-container {
  overflow: hidden;
  max-height: 150px; /* 🟥折りたたみ時に見える高さ（jsと揃える） */
  transition: max-height 0.45s ease;
}

/* 展開時は十分大きな max-height にしてアニメーション */
.post-letters input[type="checkbox"]:checked ~ .pl-container {
  max-height: 2000px;
}

/* ラベル（グラデーション＋ボタン） */
.post-letters .pl-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  text-align: center;
  /* 濃めのグラデーション（背景色に近い暗め） */
  background: linear-gradient(
    to bottom,
    rgba(21,29,40,0) 0%,
    rgba(21,29,40,0.88) 60%,
    rgba(21,29,40,0.98) 100%
  );
  pointer-events: auto;
}

/* ラベルのボタン（擬似要素） */
.post-letters .pl-label::after,
.post-letters .pl-label::before {
  content: '';
  position: absolute;
}
.post-letters .pl-label::after {
  bottom: 20px;
  width: 13em;
  content: '続きを読む';
  color: #ffffff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  text-align: center;
  padding: 0.35rem 0;
  z-index: 6;
  font-weight: 600;
  pointer-events: none;
}
.post-letters .pl-label::before {
  bottom: 33px;
  left: calc(50% - 3.5em);
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 6;
  pointer-events: none;
}
/* チェック時はラベルを完全に消す（重なりで本文が隠れる問題を解消） */
.post-letters input[type="checkbox"]:checked + .pl-label {
  display: none;
}

/* チェック時にボタン文言を変えたい場合（display:none にしているので不要） */
/* .post-letters input[type="checkbox"]:checked + .pl-label::after { content: '閉じる'; } */

/* ラベルを非表示にするクラス（JS で短文判定時に付与） */
.post-letters .pl-label.hidden {
  display: none;
}

/* 本文内の余白調整（任意） */
.post-letters .pl-container > *:first-child {
  margin-top: 0;
}
.post-letters .pl-container > *:last-child {
  margin-bottom: 0;
}
/*△△一定の文字数で折りたたむ△△*/

.post-img-1 img{width:100%;border-radius:10px;display:block}
.post-img-1{display:flex;flex-direction:column;gap:0.5em;margin-top:0.8em}
/*リンクはみ出し防止*/
.post-img-1 > a {display:block;overflow:hidden;border-radius:10px;}

.post-img-2 {
  width: 100%;
  display: flex;
  gap: 0.3em;
  border-radius: 10px;
  overflow: hidden;
  height: 180px; /* 好きな高さに調整 */
  box-sizing: border-box;
  margin-top:0.8em}
.post-img-2 > a {
  flex: 1 1 0;    /* 各リンクを均等に伸ばす */
  min-width: 0;   /* はみ出し防止（重要） */
  display: block; /* リンク全体をクリック可能にする */
  overflow: hidden;}
.post-img-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* トリミングして埋める */
  display: block;
  object-position: center; /* 必要に応じて調整 */}


/*▽▽3枚以上▽▽*/
.post-img-3 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 常に2列 */
  gap: 0.3em;                             /* 画像同士のgap */
  box-sizing: border-box;
  margin-top: 0.8em;
  --row-height: 200px;                    /* 各行の高さ（必要に応じて調整） */
  grid-auto-rows: var(--row-height);      /* 各行の高さを揃える */}
/* 各リンク（画像コンテナ） */
.post-img-3 > a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  text-decoration: none;
  border-radius: 0; /* 角丸は個別に付与 */}
/* 画像を枠いっぱいにトリミングして表示 */
.post-img-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;}
/* 常に上段（最初の2つ）の角丸 */
.post-img-3 > a:nth-child(1) {
  border-top-left-radius: 10px;
  overflow: hidden;}
.post-img-3 > a:nth-child(2) {
  border-top-right-radius: 10px;
  overflow: hidden;}
/* 要素数が偶数で終わる場合：最下段の左右角に丸みを付与 */
.post-img-3 > a:nth-last-child(2):not(:nth-child(1)) {
  border-bottom-left-radius: 10px;
  overflow: hidden;}
.post-img-3 > a:nth-last-child(1):not(:nth-child(1)) {
  border-bottom-right-radius: 10px;
  overflow: hidden;}
/* 要素数が奇数で最後の要素が単独で下段に来る場合：
   最後の要素を2列分占有して幅100%にし、下の角丸を付ける */
.post-img-3 > a:last-child:nth-child(odd) {
  grid-column: 1 / -1;                    /* 2列分を占有して幅100% */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;}
/* レスポンシブ例：小さい画面で行高さを下げる */
@media (max-width: 480px) {
  .post-img-3 {--row-height: 140px;}}
/*△△3枚以上△△*/




.post-buttons{display:flex;justify-content:space-around;color:#abb8c8;margin-bottom:1em;margin-top:1em}
.post-buttons img{height:20px}


.lightbox img{
    pointer-events: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;
}
/* 長押しメニューと選択を無効化 */
.protectimg {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: auto;
}