@charset "UTF-8";

/* -----------------------------------
▼　LOGページデザイン　▼
----------------------------------- */

/* 大カテゴリごとのセクション */
.section-log {
    max-width: 800px;
    margin: 0 0 4rem 0; /* 上 | 右 | 下 | 左 */
    padding: auto;
}

/* LOGページメニュー */
.custom-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4rem 0 2rem 0; /* 余白調整 */
  font-size: 1.5em;
}
.menu-item {
  transition: color 0.2s;
  font-weight: bold;
  display: flex;
  align-items: center; /* アイコンとテキストの縦位置を揃える */
}
.menu-item i {
  font-size: 1em;
  margin-right: 0.3em; /* アイコンとテキスト間のスペース */
}
.menu-separator {
  margin: 0 16px;
  color: var(--usu-mozi-iro);
  font-weight: bold;
}

/* ログ見出し */
.midashi-mini {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}
.midashi-mini::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5rem;
  height: 2px;
  background-color: var(--mozi-iro);
  transform: translateY(-50%);
}

/* アテンション折りたたみ */
/* スタイル1（+/-） */
.attention-info summary::before {
  font-family: "Font Awesome 6 Free";
  content: "\f067"; /* プラスアイコン (＋) */
  font-weight: 900;
  position: absolute;
  left: 0;
  transition: transform 0.2s;
}
.accordion-info[open] summary::before {
  content: "\f068"; /* マイナスアイコン (－) */
}
/* 親のdetails要素を横中央寄せにする */
details.attention-info {
  display: flex;
  flex-direction: column;
  align-items: center; /* 横方向中央寄せ */
}
/* summaryの幅を内容に合わせて維持 */
summary {
  width: fit-content;
}

/* 最終更新日 */
.lastupdate {
  font-size: 1rem;
  font-weight: bold;
  color: var(--usu-mozi-iro);
  text-align: center;  /* 横中央寄せ */
}

/* -----------------------------------
▼　PICT・LOG用グリッド　▼
----------------------------------- */
.pict-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 列数指定 各列は均等幅 */
  gap: 0.5rem;
  justify-content: center;
  max-width: 1200px; /* 必要に応じて最大幅を調整 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
/* タブレット向け */
@media screen and (max-width: 999px) {
  .pict-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* スマホ向け */
@media screen and (max-width: 699px) {
  .pict-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* サムネイル画像の幅・高さをグリッドセルにフィットさせる */
.pict-list img {
  width: 100%;      /* セル幅いっぱい */
  aspect-ratio: 1;  /* 正方形を維持 */
  object-fit: cover;/* はみ出し部分をトリミング */
}

/* グリッド内アイコン */
.pict-icon {
    position: relative;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    line-height: 50px;
    border: 2px solid var(--mozi-iro);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: border 0.2s;
}
.pict-icon img {
    width: 100%;
    display: block;
}
/* アイコンホバー時 */
.pict-icon:hover {
  border: 3px solid #000;
}
.pict-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
}
.pict-icon:hover::after {
    opacity: 1;
}

/* NEWラベル */
.pict-icon.is-new {
    border: 3px solid #000;
}
.pict-icon.is-new .new-label {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    color: #fff;
    font-size: 0.68em;
    padding: 1px 6px;
    font-weight: bold;
    letter-spacing: 0.08em;
    border-radius: 2px 0 2px 0;
    line-height: 1.2;
    z-index: 3;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    align-items: center;
}
/* .is-newが付与されていなければNEWラベルを消す */
.pict-icon:not(.is-new) .new-label {
    display: none;
}

/* 個別ページへのリンクにsvgアイコン */
.pict-icon .log-label::after {
  position: absolute;
  content: "";
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="rgba(255,255,255,1)"><path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z"></path></svg>') no-repeat center center;
  filter: drop-shadow(0px 0px 4px #000);
  display: block;
  height: 20%;
  width: 20%;
  top: 6px;
  right: 3px;
  text-align: center;
  z-index: 2;
}
@media (max-width: 600px) {
    .section-log { padding: 1em 0.3em; }
    .midashi-category { font-size: 1em; }
}

/* -----------------------------------
▼　個別ログページ　▼
----------------------------------- */

/*------------------------------------------------
    Fancybox内のサイズ調整
------------------------------------------------*/
.fancybox-slide--iframe .fancybox-content {
  width: 1000px !important;   /* 基準サイズ */
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  border-radius: 8px; /* 角に丸み */
  background-color: var(--haikei-iro); /* 背景色 */
  padding: 2rem;     /* 内側余白 */
  overflow-y: auto;  /* 縦スクロール用 */
}
/*------------------------------------------------
    コンテンツ配置
------------------------------------------------*/
.logpage {
  margin: 5rem 2rem;
}

.logptitle {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平方向中央 */
  margin-top: 3rem; /* ページ上部からの余白 */
}
.midashi-log {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem; /* タイトルとアイコンの間隔 */
  text-align: center;
}

.icon-log {
  margin-bottom: 2rem; /* アイコン下の余白 */
}
.icon-log i {
  font-size: 3rem; /* アイコンの大きさ */
  color: var(--mozi-iro);
}

/* 個別ページキャプション */
.page-caption {
  font-size: 1rem;
  text-align: center;  /* 横中央寄せ */
  margin-bottom: 1rem;
}

/* 画像キャプションを含むひとまとまり */
.log-item {
  margin-bottom: 4rem;
  text-align: center; /* 画像もキャプションも中央寄せ */
}

/* 画像の配置とサイズ調整 */
.archive {
  display: inline-block; /* text-alignだと中央寄せ */
  max-width: 100%; /* 横長でも枠からはみ出さない */
  max-height: 90vh; /* 縦長でも画面を突き抜けない */
  height: auto;
  margin-bottom: 1rem;
  object-fit: contain; /* 縦横の比率を必ず維持 */
}

.log-caption {
  font-size: 0.95rem;
  color: var(--mozi-iro);
  line-height: 1.4;
}

/* -----------------------------------
▼　上書きCSS　▼
----------------------------------- */
.fancybox-slide {
  padding: 44px 0 44px 0 !important;
}
@media all and (max-height: 576px) {
  .fancybox-slide {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}