@charset "utf-8";

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  overflow-wrap: break-word;
  overflow-y: scroll;
  font-family: "Zen Maru Gothic", sans-serif;
}


html {
  box-sizing: border-box;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
}

html {
  box-sizing: border-box;
  height: 100%;
}

*,
::before,
::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:visited,
a:active {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

/*ページ遷移*/
@view-transition {
  navigation: auto;
}

/*画像を画面内に収める*/
img {
  width: 100%;
  height: auto;
}

/* stickyの安定化 */
.contents {
  align-self: flex-start;
}

/* 親にoverflowがあるとsticky死ぬ対策 */
.container,
.wrapper {
  overflow: visible;
}

/* ガラスUIのにじみ防止 */
.post-wrapper,
.profile-area,
.category-area {
  background-clip: padding-box;
}

/*スクロールバー色*/
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      color-stop rgba(157, 223, 227, 1),
      to rgb(243, 216, 255));
  background: linear-gradient(to bottom,
      rgba(157, 223, 227, 1) 50%,
      rgb(243, 216, 255));
  width: 5px;
  /* 固定値のほうが安定 */
  border-radius: 10px;
}

/* =======================================================
   ヘッダー　 header
=========================================================== */

header {
  width: 100%;
  padding: 80px 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  border-radius: 0 0 16px 16px;
  z-index: 100;
}

h1.title {
  color: #ffffff;
  font-size: 48px;
  letter-spacing: 0.02em;

  line-height: 0.9;
  font-family: "Ms Madi", cursive;
  font-weight: 400;
  font-style: normal;
}

h1.title a {
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(28, 81, 190, 0.65);
}


h1.title a {
  text-decoration: none;
  opacity: 0.8;
}

/* =======================================================
   ナビメニュー内のボタン
=========================================================== */

/* メニュー内の li を横並びにして高さ揃え */
header .gnav ul.menu {
  display: flex;
  align-items: center;
  /* 縦位置中央揃え */
  gap: 20px;
  /* ボタン間の余白 */
}

/* ホームボタン */
header .gnav ul.menu li.home a {
  display: flex !important;
  /* label と同じ flex に統一 */
  justify-content: center;
  align-items: center;
  width: 40px !important;
  height: 40px !important;
  background-image: url(./_img/home.png);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 999px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ロードボタン */
header .gnav ul.menu li.load a {
  display: flex !important;
  /* label と同じ flex に統一 */
  justify-content: center;
  align-items: center;
  width: 40px !important;
  height: 40px !important;
  background-image: url(./_img/refresh.png);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 999px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 投稿ボタン */
header .gnav ul.menu li.add label.add-btn {
  display: flex !important;
  /* a と同じ flex に */
  justify-content: center;
  align-items: center;
  width: 40px !important;
  height: 40px !important;
  background-image: url(./_img/pen.png);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 999px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ホバー効果 */
header .gnav ul.menu li.home a:hover,
header .gnav ul.menu li.load a:hover,
header .gnav ul.menu li.add label.add-btn:hover {
  box-shadow:
    0 0 12px rgba(160, 220, 255, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
  opacity: 0.7;
}

/* ===============================
   投稿ボタン
================================ */
header .gnav ul.menu li.add label.add-btn {
  display: block;
  width: 50px;
  height: 50px;

  background-image: url(./_img/pen.png);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;

  cursor: pointer;
}

/* ===============================
   チェックボックス非表示
================================ */
header .gnav input.popup-toggle {
  display: none;
}


/* ===============================
   ポップアップ基本 ---- Quick Post
================================ */

.window {
  font-family: "Zen Maru Gothic", sans-serif;
}

.window input,
.window textarea,
.window button,
.window select {
  font-family: inherit;
}

.popup .window {
  position: relative;
  width: min(900px, 90%);
  max-height: 85vh;

  padding: 3rem;
  border-radius: 16px;

  background: rgba(223, 236, 255, 1);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(116, 147, 198);
  ;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  overflow-y: auto;
}




/* フォームは縦並び維持（超重要） */
.window form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup {
  background: rgba(0, 0, 0, 0.35);
}

/* 入力エリア */
.window textarea,
.window .tegalogpost {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.5;

  width: 100%;
  min-height: 180px;
  padding: 20px;
  margin-top: 30px;
  border-radius: 12px;
  background: rgb(243, 248, 255);
  border: 1px solid rgba(203, 240, 255, 0.7);
}

/* 入力フォーカス */
.window textarea:focus,
.window input:focus {
  outline: none;
  border: 1px solid rgba(160, 220, 255, 0.8);
  box-shadow: 0 0 8px rgba(160, 220, 255, 0.4);
}

/* ==== 投稿ボタン＆changelink ======= */

/* フォームは縦並び */
.window form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 最後の行をボタンエリアにする（重要） */
.window form>div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tpostcountD9KP1 {
  margin: 0 5px;
}


/* 投稿ボタン */
.postbutton {
  display: block;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.window input[type="submit"] {
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(137, 161, 250, 0.8);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}

.window input[type="submit"]:hover {
  opacity: 0.7;
}

/* changelink */
.changelink {
  font-size: 12px;

  margin: 0;
  padding: 0;
  border: none;
  opacity: 0.7;
  display: inline-block;
  white-space: nowrap;
}

.changelink:hover {
  opacity: 1;
}

/* その他ボタン */
.window button {
  font-size: 13px;
  opacity: 0.8;
}

.window button:hover {
  opacity: 1;
}

/* 装飾ボタンエリア */
.window .decoBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.window .decoBtns input {
  white-space: nowrap;
}


/* ===============================
   装飾ボタン（2行目に送る）
================================ */

/* 装飾ボタンエリア */
.window .decoBtns {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 5px;
  padding: 0;
  border-top: 1px dashed rgba(180, 220, 255, 0.4);
}

/* ボタン見た目 */
.window .decoBtns input {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(180, 220, 255, 0.6);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: 0.2s;
}

.window .decoBtns input:hover {
  background: rgba(200, 230, 255, 0.7);
}


/* ===============================
   チェック系（干渉防止）
================================ */

/* 全チェック系を1ブロックに */
.window .catChecks,
.window .catChecks+div,
.window .catChecks+div+div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  width: 100%;
  margin-top: 8px;
}

/* ラベル */
.window .catChecks label,
.window input[type="checkbox"]+label {
  display: inline-block;
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(180, 220, 255, 0.6);
  cursor: pointer;
  transition: 0.2s;
}

/* ホバー */
.window .catChecks label:hover,
.window input[type="checkbox"]+label:hover {
  background: rgba(200, 230, 255, 0.6);
}

/* チェック時 */
.window input[type="checkbox"]:checked+label {
  background: rgba(140, 200, 255, 0.7);
  color: #fff;
}

/* チェックボックス本体は見えなくする */
.window input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.hashtagEasyInput {
  appearance: none;
  -webkit-appearance: none;

  background-color: #fff;
  border-radius: 6px;
  border: 1px solid rgba(180, 220, 255, 0.6);

  padding: 4px 8px;

  font-size: 11px;
  cursor: pointer;
}

.hashtagEasyInput {
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}



/* ===============================
   ポップアップ表示制御
================================ */

.popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
}

.popup.open {
  display: flex;
}

/* ===============================
   閉じるボタン
================================ */

.popup .window .btn_close {
  position: absolute;
  top: 20px;
  right: 20px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(255, 255, 255, 0.579);
  border: 1px solid rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(6px);

  cursor: pointer;
  transition: 0.25s;
}

.popup .window .btn_close i {
  font-size: 18px;
  color: rgba(75, 148, 224, 1);
}

.popup .window .btn_close:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.971);
  box-shadow: 0 0 10px rgba(160, 220, 255, 0.6);
}






/* 固定投稿 */
.fixedseparator {
  border: none;
  margin-bottom: -16px;
  padding-bottom: 0;
  text-align: left;
  color: var(--color-grey);
}

.fixedseparator::before {
  display: none;
}

.fixedseparator .fixedlabel {
  display: flex;
  align-items: center;
}

.fixedseparator .fixedlabel::before {
  content: '';
  display: block;
  margin-right: 4px;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-position: center center;
  background-image: url(./_img/pin.png);
  background-repeat: no-repeat;
}



/* ==================================================================================================================================
   メインエリア
====================================================================================================================================== */

.bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100svh;
  overflow: hidden;

  background-color: rgba(116, 194, 215, 0.525);
  border: 1px solid rgba(255, 255, 255, 0.323);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.bg::after {
  position: fixed;
  content: "";
  background: url(./_img/bg_filia_PC.png);
  opacity: 100%;
  background-size: 100%;
  /* 画面端ぼかしが見えないよう大きめに表示 */
  background-position: center bottom;
  z-index: -10;
  top: -40px;
  bottom: -40px;
  left: -40px;
  right: -40px;

  filter: blur(8px);
}

.contents-box {
  display: block;
  width: 100%;
  max-width: 60%;
  margin: 0 auto;
}

.wrapper {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row-reverse;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* ==================================================================================================================================
   サイドメニュー　side-menu
====================================================================================================================================== */

.container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row-reverse;
  width: 95%;
  max-width: 100%;
  margin: 0 auto;
}

/*--------固定プロフィールエリア*/

/*固定プロフィールエリア全体*/

.contents {
  position: sticky;
  top: 50px;
  width: 35%;
  height: auto;
  align-self: flex-start;
  padding-left: 40px;

  z-index: 10;
  overflow-wrap: break-word;
  color: #213e5b;
}

/*プロフィールエリア*/
.profile-area {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 10px;

  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);

  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 32px;

  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 2;
  text-align: center;
}

.profile-area p {
  font-size: 15px;
  font-weight: 500;
}

/*プロフィール画像*/

img.iconarea {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgb(255, 255, 255);
}

/*カテゴリ一覧*/

h2 {
  font-family: "Poppins", sans-serif;
  color: #395470;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-shadow: 0 0 5px #ffffff77;
}

.category-area {
  display: block;
  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);

  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 32px;

  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-weight: 500;

  margin-bottom: 32px;
}

/*カテゴリ一覧*/
ul.cattree {
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
  /*文字を区切り良く折り返す*/
}

.cattree li {
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/*カテゴリひとつひとつのスタイル*/
a.catlink {
  font-size: 14px;
  display: inline-flex;
  align-items: center;

  padding: 0.5rem 0rem;
}

a.catlink:before {
  font-family: "Font Awesome 5 Free";
  content: "\f02d";
  font-weight: 900;
  color: #f2faffff;
  padding: 0 13px 0 0;
}

.catlink:hover {
  transition: 0.4s ease;
  opacity: 0.5;
}

.num {
  font-size: 0.75rem;
  padding-left: 10px;
}

/*side-hashtag ------------------------ */

.tag-area {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  margin-bottom: 30px;
}

.hashtaglist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-weight: 500;

  margin-top: 2rem;
}

.tag-area .hashtaglist li {
  display: inline-flex;
  align-items: center;
}

.tag-area .hashtaglist a {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;

  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);

  color: #1b2941;

  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.hashtaglist a:hover {
  color: #fff;
  background: linear-gradient(135deg,
      rgba(140, 200, 255, 0.6),
      rgba(180, 160, 255, 0.3));
  box-shadow:
    0 0 12px rgba(160, 220, 255, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
  transition: 0.4s ease;
  transform: scale(1.1);
}

.tag-area .num {
  display: none;
}

/* Clendar-area */

.clendar-area {
  margin-bottom: 30px;

  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-weight: 500;

  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);

  border-radius: 16px;
  padding: 2rem;
}

.clendar-area table {
  width: 80%;
  text-align: center;
}

.clendar-area caption {
  font-size: 16px;
  letter-spacing: 0.2em;
  font-weight: 500;
}

.clendar-area thead {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.calendar th,
.calendar td {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  padding: 0.5em;
  transition: background-color 0.3s;
}

/* 過去ログ検索窓 */
.datelimitbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.datelimitbox select {
  appearance: none;
  background-color: #fff;
  border: none;
  border-radius: 10px;
  height: 40px;
  padding: 0 12px;
  flex: 1;
  min-width: 160px;
}

.datelimitbox input[type="submit"] {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #213e5b;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 500;
  white-space: nowrap;
  transition: 0.3s;
}

.datelimitbox input[type="submit"]:hover {
  color: #fff;
  border: 1px solid rgba(203, 240, 255, 0.7);
  background: linear-gradient(135deg,
      rgba(140, 200, 255, 0.6),
      rgba(180, 160, 255, 0.3));
  box-shadow:
    0 0 12px rgba(160, 220, 255, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
}

/* ラジオボタンエリア */
.datelimitboxoptions {
  width: 100%;
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.datelimitboxoptions label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.datelimitbox select,
.datelimitbox input[type="submit"] {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ラジオボタン全体 */
.datelimitboxoptions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* labelをボタン化 */
.datelimitboxoptions label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;

  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  transition: 0.3s;
}

.datelimitboxoptions input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.datelimitboxoptions label:hover {
  background-color: rgba(200, 220, 255, 0.6);
}

.datelimitboxoptions input[type="radio"]:checked+label,
.datelimitboxoptions label:has(input[type="radio"]:checked) {
  color: #fff;
  background: linear-gradient(135deg,
      rgba(140, 200, 255, 0.6),
      rgba(180, 160, 255, 0.3));
  box-shadow:
    0 0 12px rgba(160, 220, 255, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
  border-color: rgba(144, 218, 247, 0.685);
}

.datelimitboxoptions label:active {
  transform: scale(0.95);
}

.image-area {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-weight: 500;

  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);

  border-radius: 16px;
  margin-bottom: 30px;
  padding: 2rem;
}

.image-gallery {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.image-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.image-gallery .imagesearch {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.2s ease;
}

.image-gallery .oneimage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
}

.image-gallery .imagesearch:hover {
  opacity: 0.85;
  transform: translateY(-2px);
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);
}



/* ==================================================================================================================================
   左の投稿一覧エリア
====================================================================================================================================== */

.contents-2 {
  width: 65%;
  padding-right: 40px;
}

/*Javascriptでふわっとフェードイン用CSSここから*/
article {
  margin: 0 auto 80px;
  width: 100%;

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  opacity: 0;
  transform: translateY(13%);
  transition:
    opacity 0.8s var(--ease-out-cubic),
    transform 0.8s var(--ease-out-quint);
}

article.isActive {
  opacity: 1;
  transform: translateY(0);
}

.post-wrapper {
  position: relative;

  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);

  border-radius: 16px;
  padding: 2rem 2.5rem 2.5rem 2.5rem;
}

.postdate {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  letter-spacing: 0.13em;
  font-weight: 400;
  color: #1b2941;
}

.postdate:before {
  font-family: "Font Awesome 5 Free";
  color: #297aac;
  font-weight: 400;
  text-shadow: 0 0 10px #fff;
  content: "\f3a5";
  margin-right: 10px;
}

.posthdr {
  display: flex;
  align-items: center;
  border-bottom: 2px dotted #ffffffac;
  padding-bottom: 8px;
}

.post-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.post-actions a {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 999px;
  opacity: 1;
  transition: 0.2s;
}

.post-actions a:hover {
  opacity: 0.6;
}

.editlink {
  background-image: url(./_img/edit.png);
}

.deletelink {
  background-image: url(./_img/delete.png);
}

/* ==================================================================================================================================
   投稿本文 ポスト
====================================================================================================================================== */

.comment {
  position: relative;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-weight: 500;

  text-align: justify;
  overflow-wrap: break-word;

  color: #213e5b;

  margin: 30px auto;
}

/* 投稿本文内のURL */
.comment a {
  display: inline-block;
  color: #296b95;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #fff;
  text-underline-offset: .3em;
  margin: 0 0.2em;
  transition: 0.3s;
}

.comment a:hover {
  color: #fff;
}

/*投稿本文内の画像*/
.comment img {
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  font-weight: 400;

  width: 100%;
  height: auto;
  margin: 3vh 0;
}

.post-bottom-item {
  position: absolute;
  bottom: -33px;
  right: 5px;
  z-index: 10;

  display: flex;
  font-size: 10px;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
}

.categories a {
  display: block;
  padding: 2px 10px;

  background-color: rgba(228, 237, 251, 0.5);
  border: 1px solid rgba(203, 240, 255, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.1);
  color: #1b2941;

  font-weight: 500;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.categories a:hover {
  background-color: rgba(203, 240, 255, 0.693);
  transition: 0.4s ease;
}


.dayseparator .catseparator {
  display: none;
}

/* ==================================================================================================================================
   ページネーション全体 ページ番号
====================================================================================================================================== */

.pagenavi {
  font-family: "Poppins", sans-serif;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 30px auto;
}

.pagenavi a {
  display: flex;
  padding: 0.3rem 0.6rem;
  text-decoration: none;
  color: #ffffff;
  transition: background 0.3s;
}

/* Back / Next */
.pagelinks {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.prevlink,
.nextlink {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;
  border-radius: 999px;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  width: 2.5rem;
  height: 2.5rem;

  color: #1b2941;
  line-height: 1;
  transition: 0.3s;
}

.prevlink:hover,
.nextlink:hover {
  color: #fff;
  border-color: rgba(144, 218, 247, 0.685);
  background-color: rgba(200, 220, 255, 0.6);
}

.prevlink::before {
  font-family: "Font Awesome 5 Free";
  content: "\f104";
  font-weight: 900;
  line-height: 1;
  margin: 0;
  display: block;
}

.nextlink::after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  line-height: 1;
  margin: 0;
  display: block;
}

.pagenums {
  display: flex;
  gap: 10px;
  text-align: center;
}

.pagenumlink {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #1b2941;

  width: 2.4rem;
  height: 2.4rem;

  border-radius: 50%;
  text-decoration: none;
}

.pagenumlink:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

.pagenumhere {
  background-color: rgba(159, 221, 246, 0.307);
  border: 1px solid rgba(144, 218, 247, 0.685);
  border-radius: 999px;
  align-items: center;

  width: 1.7rem;
  height: 1.7rem;

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    inset 0 0 6px rgba(255, 255, 255, 0.2);
}

.linkseparator {
  display: none;
}

/* ==================================================================================================================================
   フッター
====================================================================================================================================== */

footer .credit {
  text-align: center;
  gap: 10px;
  padding: 50px 0;

  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #fff;
}

footer a.admin {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(./_img/magic.png);
  background-size: cover;
  background-position: center center;
  margin-left: 3px;
}

/* ==================================================================================================================================
　　==================================================================================================================================
   てがろぐの機能の装飾-内側(個別投稿の表示用)のスキン（skin-onelog.html）
====================================================================================================================================== 
====================================================================================================================================== */

/* URLが書かれた場合の装飾 */
.url {
  word-break: break-all;
}

/* E:強調(Emphasis) */
.decorationE {
  color: #035c9cdb;
  font-weight: bold;
}

/* B:太字(Bold) */
.decorationB {
  font-weight: bold;
}

/* I:斜体(Italic) */
.decorationI {
  font-style: italic;
}

/* U:下線(Underline) */
.decorationU {
  text-decoration-line: none;
  padding: 0.1rem;
  margin-bottom: 0.2rem;
  background: linear-gradient(transparent 60%, #39d2f8b1 60%);
}

/* 文字色 背景 */
.decoBtnC {
  color: rgb(4, 130, 191);
}

.decoBtnM {
  background-color: rgba(182, 93, 233, 0.372);
}

/* 引用 */
.decorationQ {
  position: relative;
  border-top: 1px solid #296b95;
  border-bottom: 1px solid #296b95;
  padding: 20px;
  margin: 10px;
}

.decorationQ:before {
  position: absolute;
  color: #296b95;
  font-family: "Font Awesome 5 Free";
  content: "\f10d";
  font-weight: 900;
  line-height: 1;
  text-align: center;
  top: -25px;
  left: -10px;
  padding: 10px;
  font-size: 20px;
}

.decorationQ:after {
  position: absolute;
  right: -11px;
  bottom: -25px;
  padding: 10px;
  color: #296b95;
  font-family: "Font Awesome 5 Free";
  content: "\f10e";
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-size: 20px;
}

.decorationQ cite {
  display: block;
  padding-right: 30px;
  font-size: 0.8rem;
  text-align: right;
  color: #808080;
}

/* D:打消し線 */
.decorationD {
  text-decoration-line: line-through;
}

/* S:小文字(Small) */
.decorationS {
  font-size: 11px;
}

/* T:極小文字(Tiny) */
.decorationT {
  font-size: 10px;
}

/* =========================
   リスト装飾
========================= */

.decorationL {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}

.decorationL li {
  position: relative;
  padding-left: 1.6em;
  margin: 0.4rem 0;
  line-height: 1.6;
}

.decorationL li::before {
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  position: absolute;
  left: 0;
  top: 0.2em;

  color: #5ee0f1db;
  text-shadow: 0 0 5px #ffffff60;
  font-size: 0.9em;
}


/* === 続きを読むボタン ==== */

.decorationH {
  display: block !important;
  text-align: initial !important;
  margin: 2.5rem 0;
}

.readmoreopen {
  display: block !important;
  width: 90%;
  margin: 20px auto !important;

  text-align: center !important;
}

.readmorebutton {
  display: block;
  width: 90%;
  margin: 10px auto;
  padding: 10px;
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #1b2941;
  border-radius: 999px;

  background: linear-gradient(135deg,
      rgba(200, 230, 255, 0.25),
      rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(180, 220, 255, 0.6);
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  transition: 0.3s;
}

.readmorebutton:hover {
  color: #fff;
  background: linear-gradient(135deg,
      rgba(140, 200, 255, 0.6),
      rgba(180, 160, 255, 0.3));
  box-shadow:
    0 0 12px rgba(160, 220, 255, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  text-decoration: none;
}

/* -- 本文エリア白背景 -- */

.readmorearea {
  display: block;
  background: #ffffff7a;
  border-radius: 10px;
  padding: 30px 35px;
  margin-top: 10px;

  text-align: left;
  /* ←ここが重要 */
}

.readmoreclose {
  display: block;
  width: 20%;
  margin: 20px auto 0;
  padding: 5px;

  text-align: center;
  font-size: 0.9em;
  opacity: 0.7;
}

.readmoreclose:hover {
  color: #fff;
  border: 1px solid rgba(203, 240, 255, 0.7);
  opacity: 1;
  text-decoration: none;
}

/* 続きを読むボタン・畳むボタンの下線を消す */
.readmorebutton,
.readmorebutton:link,
.readmorebutton:visited,
.readmorebutton:hover,
.readmorebutton:active,
.readmoreclose,
.readmoreclose:link,
.readmoreclose:visited,
.readmoreclose:hover,
.readmoreclose:active {
  text-decoration: none !important;
}

/* 畳むボタンだけ中央固定 */
.comment a.readmoreclose {
  display: block !important;
  width: 20%;
  margin: 20px auto 0 !important;
  text-align: center !important;

  color: #1b2941 !important;
  text-decoration: none !important;
}




/*鍵入力フォーム パスキー -------------------- */
.passkeyform {
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 1rem 0;
  padding: 16px 10px;
  font-size: 13px;
  border-radius: 8px;
  background-color: #ffffff8c;
}

.passkeybox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.passkeyguide {
  display: flex;
  align-items: center;
}

.passkeyguide::before {
  content: "\f023";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 4px;
}

.passkeyinput {
  font-family: "Zen Maru Gothic", sans-serif;
  width: 8rem;
  height: 28px;
  padding: 4px 8px;
  border: 1px solid #fff;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.passkeysubmit {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px !important;
  height: 28px;
  font-size: 1em;
  padding: 4px 8px;
  border: none;
  border-radius: 0 4px 4px 0;
  background-color: rgba(96, 185, 241, 1);
  color: #fff;
}

.passkeysubmit:hover {
  color: #fff;
  border: 1px solid rgba(203, 240, 255, 0.7);
  background: linear-gradient(135deg,
      rgba(140, 200, 255, 0.6),
      rgba(180, 160, 255, 0.3));
  box-shadow:
    0 0 12px rgba(160, 220, 255, 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
}





/* =========================
   本文タグ
========================= */

.taglink {
  display: inline-block;
  margin: 0 0.2rem;
  color: rgb(13, 152, 221);
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.taglink,
.taglink:link,
.taglink:visited,
.taglink:hover,
.taglink:active {
  text-decoration: none !important;
  color: rgb(13, 152, 221);
}

.taglink:hover {
  text-decoration: none;
  color: rgb(189, 103, 239);
  opacity: 0.6;
}




/*追加装飾  */
h5 {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: #06478c;
  padding-left: 0.6em;
  z-index: 0;
}

h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(-45deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.7) 2px,
      rgba(255, 255, 255, 0.7) 4px);

  border-radius: 2px;
  z-index: -1;
}


h6 {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: #06478c;
}

h6:before {
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #0884b9e8;
  margin-right: 5px;
}


/* ==================================================================================================================================
   埋め込み画像 リンク
====================================================================================================================================== */

.imagelink {
  display: block;
  width: 100%;
  overflow: hidden;
}

.embeddedimage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;

  transition: transform 0.3s ease, opacity 0.3s ease;
}

.imagelink:hover .embeddedimage {
  transform: scale(1.02);
  /* 控えめに */
  opacity: 0.9;
}

.imagelink:hover,
.imagelink:hover .embeddedimage {
  box-shadow: none !important;
  filter: none !important;
}

/* ==================================================================================================================================
   埋め込みTweet
====================================================================================================================================== */

.twitter-tweet {
  max-width: 420px !important;
  margin: 1.5rem auto !important;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.3s;
}

/* hover（カード風） */
.twitter-tweet:hover {
  transform: scale(1.02);
  opacity: 0.8;
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);
}

/* blockquote側（中の余白調整） */
blockquote.twitter-tweet {
  margin: 0 !important;
  padding: 0.8em !important;
  background: transparent !important;
  border: none !important;
}

/* iframeのはみ出し防止 */
.twitter-tweet iframe {
  width: 100% !important;
  border-radius: 12px;
}


/* ==================================================================================================================================
   埋め込み動画リンク
====================================================================================================================================== */

.embeddedmovie {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
}

.embeddedmovie iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.embeddedmovie::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0);
  transition: 0.3s;
  pointer-events: none;
}

/* ホバー時 */
.embeddedmovie:hover::after {
  background: rgba(255, 255, 255, 0.15);
}

.embeddedmovie:hover {
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);
}

/* -- Spotify-- */

.embeddedmusic {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

/* 上レイヤー */
.embeddedmusic::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0);
  transition: 0.3s;
  pointer-events: none;
}

.embeddedmusic:hover::after {
  background: rgba(255, 255, 255, 0.15);
}

.embeddedmusic:hover {
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);
}

/* .url.labeledlink {
  display: none;
} */





/* ================================================================ */
/* てがろぐVer 4.5.5β以降で使える、カード型リンク用CSSの抜粋です。 */
/* お使いのスキンのCSSに追記するなどしてご活用下さい。              */
/* ================================================================ */

/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */
.cardlink {
  display: flex;
  width: 100%;
  max-width: 100%;
  /* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
  padding: 30px 10px;
  /* 内側の余白量 */
  font-size: 12px;
  /* 文字サイズ */
  text-decoration: none;
  /* リンク文字の下線を消す */
  vertical-align: middle;
  /* 行内の上下方向では中央配置 */
}

.cardlink,
.cardlink * {
  text-decoration: none !important;
}

/* ------------------------------------- */
/* リンクカードの装飾(サイズS/L共通部分) */
/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
/* ------------------------------------- */

/* カード外枠 */
.cardlinkbox {
  border: 1px solid #fff;
  /* 枠線 */
  border-radius: 10px;
  /* 角丸 */
  background-color: #fff;
  /* 背景色 */
  display: flex;
  /* 内部レイアウトのFlexbox化 */
  transition: all 0.3s ease;
}

.cardlinkbox:hover {
  background-color: rgb(214, 236, 255);
  /* 背景色 */
  border-color: rgb(240, 246, 255);
  /* 枠線色 */
  box-shadow: 0px 0px 15px 5px rgba(255, 255, 255, 0.2);

  opacity: 1;
  transform: scale(1.02);
}

/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
.cardlinkimage {
  background-image: linear-gradient(-30deg, rgba(200, 220, 255, 0.6), #e0ecf0);
  /* プレースホルダ的な背景グラデーション(※og:imageの画像指定が読み込まれたら、この値は上書きされます) */
  background-size: cover;
  /* 背景画像で枠を埋める */
  background-position: center center;
  /* 背景画像を中央に寄せる */
  background-repeat: no-repeat;
  /* 背景画像を繰り返さない */
  position: relative;
  overflow: hidden;

}

/* ホバー用の色レイヤー */
.cardlinkimage::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(180, 220, 255, 0.0);
  /* 初期は透明 */
  transition: 0.3s;
}

/* ホバー時にほんのり色を乗せる */
.cardlinkbox:hover .cardlinkimage::after {
  background: linear-gradient(135deg,
      rgba(180, 220, 255, 0.35),
      rgba(255, 255, 255, 0.1));
}

/* ▽リンクカード内のテキスト枠 */
.cardlinktextbox {
  display: flex;
  flex-direction: column;
  padding: 1.5em 2em;
}

/* ▽リンクカードのテキスト枠内の3要素共通 */
.cardlinktitle,
.cardlinkdescription,
.cardlinkurl {
  /* ↓表示行数を制限するための準備 (※システム側では文字数は制限せずに「記述されている全文字」をHTMLに出力しますので、表示分量を制限したい場合はCSSで制御する必要があります。) */
  display: -webkit-box;
  /* -webkit-line-clampを使うために必要な記述1 ※A */
  -webkit-box-orient: vertical;
  /* -webkit-line-clampを使うために必要な記述2 ※A */
  overflow: hidden;
  /* 表示量を制限する場合に必須の記述 */
  /* ↓制限の仕様 */
  line-clamp: 1;
  /* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
  -webkit-line-clamp: 1;
  /* 1行だけ見せる (今のブラウザにはこちらが必要で、そのためには上記「※A」も必要) */
  text-overflow: ellipsis;
  /* 省略記号(三点リーダー) */
}

/* リンクタイトル */
.cardlinktitle {
  color: #296b95;
  font-size: 13px;
  padding-bottom: 0.5em;
  letter-spacing: 0.05em;
}

/* リンク概要文 */
.cardlinkdescription {
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: #747c90;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

/* リンクドメイン */
.cardlinkurl {
  color: #747c90;
  /* 文字色 */
}

.cardlinkdescription,
.cardlinkurl:hover {
  color: #5f687f;
  font-size: 13px;
  letter-spacing: 0.05em;
}



/* ----------------------------------- */
/* リンクカードの装飾(サイズL用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
.cardsize-L {
  flex-direction: column;
  /* 画像とテキストは縦に並べる(Flexbox) */
}

/* ▽リンクカード内の画像枠 */
.cardsize-L .cardlinkimage {
  aspect-ratio: 1.91 / 1;
  /* 画像枠の縦横比を指定= (横)1.91：(縦)1 */
  width: 100%;
  /* 横幅は枠最大に拡げる */
  height: auto;
  /* 高さは自動計算 */
  border-radius: 10px 10px 0 0;
}

/* ▽リンクカード内のテキスト枠 */
.cardsize-L .cardlinktextbox {
  border-top: 1px solid #ffffff;
  /* 上側の枠線 */
}

/* ▽リンクカードのテキスト枠内の3要素 */
.cardsize-L .cardlinktitle {
  font-weight: bold;
}

/* 太字 */
.cardsize-L .cardlinkdescription {
  min-height: 2.5em;
}

/* 内容量が少ない場合でも一定の高さを確保 */

.cardsize-L .cardlinkurl {
  border-top: 1px solid #747c90;
  /* 上側の枠線 */
  margin-top: 0.5em;
  /* 上側の枠線より上の余白量 */
  padding-top: 0.5em;
  /* 上側の枠線より下の余白量 */
  font-size: 12px;
  /* 文字サイズ(小さめ) */
}



/* ----------------------------------- */
/* リンクカードの装飾(サイズS用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
.cardsize-S {
  flex-direction: row;
  /* 画像とテキストは横に並べる(Flexbox) */
}

/* ▽リンクカード内の画像枠 */
.cardsize-S .cardlinkimage {
  min-width: 100px;
  /* 最小の横幅 */
  min-height: 100px;
  /* 最小の高さ */
  border-radius: 10px 0 0 10px;
  flex-shrink: 0;
  /* 枠サイズを自動縮小させない */
}

/* ▽リンクカード内のテキスト枠 */
.cardsize-S .cardlinktextbox {
  border-left: 1px solid #ffffff;
  /* 左側の枠線 */
  justify-content: center;
  /* Flexboxの上下方向での中央寄せ */
}

/* ▽リンクカードのテキスト枠内の3要素 */
.cardsize-S .cardlinktitle {
  order: 2;
}

/* タイトルは、2番目に表示 */
.cardsize-S .cardlinkdescription {
  letter-spacing: 0.07em;
  order: 3;
}

/* 概要文　は、3番目に表示 */
.cardsize-S .cardlinkurl {
  font-size: 11px;
  order: 1;
}

/* ドメインは、1番上に表示 */




/* 検索語のハイライト-------------------- */
.situation:empty {
  display: none;
}


/* 日付境界バー */
.dateseparator {
  font-size: 0.8em;
  padding: 16px;
  text-align: center;
  border-bottom: 2px dotted var(--color-mgrey);
}

.dateseparator::before {
  content: "▼";
}

/* 固定投稿 */
.fixedseparator {
  border: none;
  margin-bottom: -16px;
  padding-bottom: 0;
  text-align: left;
  color: var(--color-grey);
}

.fixedseparator::before {
  display: none;
}

.fixedseparator .fixedlabel {
  display: flex;
  align-items: center;
}

.fixedseparator .fixedlabel::before {
  content: "";
  display: block;
  margin-right: 4px;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-position: center center;
  background-image: url(../_img/icn_pin.png);
  background-repeat: no-repeat;
}

/* 各投稿の個別ページで表示される囲みナビ-------------------- */
.utilitylinks {
  padding: 24px 16px;
}

/* 各投稿の個別ページで表示される囲みナビ-------------------- */
.utilitylinks {
  padding: 24px 16px;
}



/* =========================
   リアクション
========================= */

.reaction-wrapper {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 30px;
}

.reaction-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reaction-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.reaction-btn img {
  width: 35px;
  height: 35px;
  display: block;
  margin: 0 !important;
  transition: transform 0.2s, filter 0.2s;
}

.reaction-btn:hover img {
  opacity: 0.8;
  transform: scale(1.08);
}

.reaction-btn:active img {
  transform: scale(0.95);
}

.reaction-count {
  font-size: 14px;
  line-height: 1;
  color: #555;
}

/* ▼フォントズレ微調整（必要なら） */
/* .reaction-count {
  transform: translateY(-1px);
} */




/* ==================================================================================================================================
   レスポンシブ
====================================================================================================================================== */

@media screen and (max-width: 768px) {

  html,
  body {
    overflow-x: hidden;
    /* 横スクロールを消す */
  }

  .contents-2,
  .contents,
  .wrapper,
  .container {
    box-sizing: border-box;
    /* padding を幅に含める */
    max-width: 100%;
    /* 画面幅を超えない */
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .contents-box {
    max-width: 95%;
  }


  .bg::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: -10;
    background: url(./_img/bg_filia_res.png) no-repeat center bottom;
    background-size: cover;
    filter: blur(8px);
  }

  .wrapper,
  .container {
    flex-direction: column;
  }

  .contents,
  .contents-2 {
    width: 100%;
    padding: 0 1rem;
  }

  /* ------------------------
     ヘッダー
  ------------------------ */
  header {
    flex-direction: column;
    padding: 30px 0 50px;
    gap: 10px;
    text-align: center;
  }

  header .gnav ul.menu {
    justify-content: center;
    gap: 10px;
  }

  header h1.title {
    font-size: 40px;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }

  /* ------------------------
     メインコンテナ
  ------------------------ */
  .wrapper,
  .container {
    flex-direction: column-reverse;
    /* サイドバーを下に回す */
    max-width: 100%;
    margin: 0 auto;
  }

  /* ------------------------
     投稿エリア
  ------------------------ */
  .contents-2 {
    width: 100%;
    padding: 0 10px;
  }

  /* ------------------------
     サイドバー（プロフィール・カテゴリ等）
  ------------------------ */

  h2 {
    margin-left: 5px;
  }

  .contents {
    width: 100%;
    position: relative;
    top: auto;
    right: auto;
    padding: 20px 10px 0 10px;
    margin-bottom: 50px;
  }

  .profile-area,
  .category-area,
  .tag-area,
  .clendar-area,
  .image-area {
    padding: 1.5rem;
    margin-bottom: 20px;
  }

  .profile-area img.iconarea {
    margin: 0 auto;
  }

  .cattree li {
    margin-left: 5px;
  }

  /* ------------------------
     投稿本文
  ------------------------ */
  .post-wrapper {
    padding: 1.5rem;
  }

  .post-actions {
    gap: 0px;
  }

  /* ------------------------
     ページネーション
  ------------------------ */
  .pagenavi {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 30px 0;
  }

  .pagelinks {
    display: flex;
    gap: 12px;
  }

  .pagenums {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* ------------------------
     フッター
  ------------------------ */
  footer .credit {
    padding: 30px 10px;
    font-size: 12px;
    text-align: center;
  }

  /* コンテンツ+++++++++++++ */

  .twitter-tweet {
    max-width: 550px;
    /* Twitter推奨幅 */
    width: 100%;
    margin: 0 auto !important;
  }




  /* ===============================
   ポップアップ基本 ---- Quick Post
================================ */

  .popup .window {
    padding: 2rem;
  }

  /* 入力エリア */
  .window textarea,
  .window .tegalogpost {
    padding: 15px;
    margin-top: 20px;
    letter-spacing: 0.05em;
  }

  .popup .window .btn_close {
    top: 23px;
    right: 27px;
    width: 42px;
    height: 42px;
  }

  .popup .window .btn_close i {
    font-size: 15px;
  }

  /* ==== 投稿ボタン＆changelink ======= */

  .window input[type="submit"] {
    margin: 5px;
  }




  /* ==================================================================================================================================
　　==================================================================================================================================
   内側（skin-onelog.html）
====================================================================================================================================== 
====================================================================================================================================== */


  /* ----本文装飾  ----- */
  /* === 続きを読むボタン ==== */

  .decorationH {
    display: block !important;
    text-align: initial !important;
    margin: 2.5rem 0;
  }

  .readmoreopen {
    display: block !important;
    width: 90%;
    margin: 20px auto !important;

    text-align: center !important;
  }

  .readmorebutton {
    display: block;
    width: 90%;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: #1b2941;
    border-radius: 999px;

    background: linear-gradient(135deg,
        rgba(200, 230, 255, 0.25),
        rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(180, 220, 255, 0.6);
    backdrop-filter: blur(10px);
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.15),
      inset 0 0 10px rgba(255, 255, 255, 0.2);
    transition: 0.3s;
  }

  .readmorebutton:hover {
    color: #fff;
    background: linear-gradient(135deg,
        rgba(140, 200, 255, 0.6),
        rgba(180, 160, 255, 0.3));
    box-shadow:
      0 0 12px rgba(160, 220, 255, 0.6),
      inset 0 0 12px rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    text-decoration: none;
  }

  /* -- 本文エリア白背景 -- */

  .readmorearea {
    padding: 15px 20px;
  }

  .passkeybox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px;
  }

  .passkeyguide {
    width: 100%;
    margin-bottom: 8px;
    justify-content: center;
  }

  .passkeyinput {
    width: 45%;
  }

  .submitcover {
    width: 30%;
    display: flex;
  }

  .passkeysubmit {
    width: 100%;
    white-space: nowrap;
  }

  /* 引用 */
  .decorationQ {
    font-size: 12.5px;
    letter-spacing: 0.03em;
    padding: 20px 10px;
    margin: 10px 5px;
  }

  .decorationQ:before {
    top: -20px;
    font-size: 15px;
  }

  .decorationQ:after {
    bottom: -20px;
    font-size: 15px;
  }





  /* =========================
   リアクション
========================= */

  .reaction-wrapper {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 30px;
  }

  .reaction-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .reaction-btn img {
    width: 30px;
    height: 30px;
  }

  .reaction-count {
    font-size: 13px;
  }







  /* ================================================================ */
  /* リンクカード */
  /* ================================================================ */

  /* ---------------------- */
  /* ▼カード型リンクの装飾 */
  /* ---------------------- */
  .cardlink {
    display: flex;
    width: 100%;
    max-width: 100%;
    /* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
    padding: 20px 5px;
    /* 内側の余白量 */
    font-size: 12px;
    /* 文字サイズ */
    text-decoration: none;
    /* リンク文字の下線を消す */
    vertical-align: middle;
    /* 行内の上下方向では中央配置 */
  }

  .cardlinktextbox {
    padding: 1.5em;
  }

  .cardlink,
  .cardlink * {
    text-decoration: none !important;
  }

  /* ------------------------------------- */
  /* リンクカードの装飾(サイズS/L共通部分) */
  /* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
  /* ------------------------------------- */

  .cardlinktitle {
    font-size: 13px;
    letter-spacing: 0.035em;
  }

  /* リンク概要文 */
  .cardlinkdescription {
    font-size: 11px;
    letter-spacing: 0.05em;
  }

  /* リンクドメイン */
  .cardlinkurl {
    color: #747c90;
  }

  .cardlinkdescription,
  .cardlinkurl:hover {
    font-size: 11px;
  }

  /* ----------------------------------- */
  /* リンクカードの装飾(サイズL用の追記) */
  /* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
  /* ----------------------------------- */


  /* 内容量が少ない場合でも一定の高さを確保 */

  .cardsize-L .cardlinkurl {
    font-size: 11px;
  }

  /* ----------------------------------- */
  /* リンクカードの装飾(サイズS用の追記) */
  /* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
  /* ----------------------------------- */

  /* ▽リンクカードのテキスト枠内の3要素 */
  .cardsize-S .cardlinktitle {
    font-size: 13px;
    letter-spacing: 0.035em;
  }

  /* タイトルは、2番目に表示 */
  .cardsize-S .cardlinkdescription {
    font-size: 11px;
    letter-spacing: 0.05em;
  }

  /* 概要文　は、3番目に表示 */
  .cardsize-S .cardlinkurl {
    font-size: 11px;
    letter-spacing: 0.05em;
  }

}