@charset "UTF-8";

/* ==========================================================================
   TOPページ専用CSS（front-page.css）
   front-page.php にのみ読み込まれる。functions.php の wp_enqueue_scripts でエンキュー。
   ========================================================================== */

/* ==========================================================================
   フリーワード検索（SP TOPページのみ表示。PC はサイドバーにあるため非表示）
   ========================================================================== */

.p-index-search-sp {
  display: none;
}

@media (max-width: 767px) {
  .p-index-search-sp {
    display: block;
    margin: 0 auto 50px;
  }
  .p-index-search-sp .p-sidebar-search {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   記事スライダー（TOPページ .p-index-slider--type1）
   front-page.php のヘッダー直下スライダー。Slick.js で制御。
   ========================================================================== */

/* オーバーレイ：テキストを左下に左寄せで縦積み（最新記事→タイトル→カテゴリ/日付） */
.p-header-blog__item-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.2) 42%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
.p-header-blog__item-overlay__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  color: #fff;
  padding: 0 8% 88px;
  gap: 12px;
}
.p-header-blog__item-overlay__inner::before {
  display: none;
}
.p-header-blog__item-overlay .p-header-blog__item-title {
  text-align: left;
  /* _slider_headline の改行はそのまま反映。長すぎる入力の保険として最大行数だけ制限 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  letter-spacing: 0;
}

/* 下段：カテゴリ + 日付を左寄せで1行（タイトルのすぐ下に重なる位置） */
.p-header-blog__item-overlay__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0 8% 45px;
  gap: 8px 10px;
  background: none;
  pointer-events: none;
}
.p-header-blog__item-overlay__bottom-left,
.p-header-blog__item-overlay__bottom-right {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px 13px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* カテゴリと公開日の間に縦線 */
.p-header-blog__item-overlay__bottom-right::before {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.6);
}

/* カテゴリ「コラム」：白枠・背景なし */
.p-header-blog__item-overlay__category span {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  padding: 8px 12px;
  margin-right: 4px;
  transition:
    background 0.2s,
    color 0.2s;
}
.p-header-blog__item-overlay__category:hover {
  opacity: 1;
}
.p-header-blog__item-overlay__category:hover span {
  background: #fff;
  color: #333;
}

/* 日付：「公開」「更新」ラベルをアイコン画像に置き換え */
.p-header-blog__item-overlay__date,
.p-header-blog__item-overlay__modified {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #fff;
  line-height: 1;
  font-weight: bold;
}
.p-header-blog__item-overlay__date::before,
.p-header-blog__item-overlay__modified::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}
.p-header-blog__item-overlay__date::before {
  width: 15px;
  height: 13px; /* public_icon.png 32×28 */
  background-image: url("../img/public_icon_top.png");
}
.p-header-blog__item-overlay__modified::before {
  width: 13px;
  height: 13px; /* update_icon.png 25×25 */
  background-image: url("../img/update_icon_top.png");
}

/* 最新記事：白背景のテキストラベル（アイコンなし）。左下スタックの先頭 */
.p-header-blog__item a {
  position: relative;
}
.p-header-blog__item-new-badge {
  position: static;
  align-self: flex-start;
  z-index: 4;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 13px;
  display: inline-block;
  letter-spacing: 0;
  border-radius: 0;
}
.p-header-blog__item-new-badge::before {
  display: none;
}

/* PC：スライダー矢印 */
@media (min-width: 992px) {
  .p-index-slider--type1 .slick-arrow,
  .p-index-slider--type1.slick-slider .slick-arrow {
    color: #333;
    font-size: 18px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin-top: -35.5px;
    opacity: 0.6;
    z-index: 20;
    pointer-events: auto;
  }
  .p-index-slider--type1 .slick-arrow:hover {
    background: #000;
    color: #fff;
    opacity: 1;
  }
  .p-index-slider--type1 .slick-prev {
    left: 21.7%;
  }
  .p-index-slider--type1 .slick-next {
    right: 21.7%;
  }
  /* PC：スライダードット（枠内に線状で配置。現在＝長め白、他＝短めグレー） */
  .p-index-slider--type1 {
    padding-bottom: 0;
  }
  .p-index-slider--type1 .slick-dots {
    bottom: 18px;
    z-index: 6;
    line-height: 0;
  }
  .p-index-slider--type1 .slick-dots li {
    width: auto;
    height: auto;
    margin: 0 4px;
    vertical-align: middle;
  }
  .p-index-slider--type1 .slick-dots li button {
    width: 9px;
    height: 3px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45) !important;
    opacity: 1;
    transition:
      width 0.25s ease,
      background-color 0.2s ease;
  }
  .p-index-slider--type1 .slick-dots li.slick-active button {
    width: 26px;
    background: #fff !important;
    border: none;
    opacity: 1;
  }
  .p-index-slider--type1 .slick-dots li:hover button {
    background: rgba(255, 255, 255, 0.75) !important;
    border: none;
    opacity: 1;
  }
}

/* PC：スライダー枠を 1240 x 430 に（中央寄せ） */
@media (min-width: 992px) {
  .p-index-slider--type1 {
    width: 90%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }
  .p-index-slider--type1 .p-header-blog__item-thumbnail {
    padding-top: 34.6774%; /* 430 / 1240 */
  }
  /* centerMode解除（functions.js）に合わせて矢印を枠の端へ */
  .p-index-slider--type1 .slick-prev {
    left: 0;
  }
  .p-index-slider--type1 .slick-next {
    right: 0;
  }
}

/* TOPスライダー矢印を常時表示（PC・SP共通）。
   slickが生成する<button>内のグリフ有無に依存せず ::before でアイコンを描画する */
#js-index-slider.p-index-slider--type1 .slick-arrow {
  display: block !important;
  opacity: 1;
  width: 40px;
  height: 40px;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 0;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  transform: translateY(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease;
}
#js-index-slider.p-index-slider--type1 .slick-arrow:hover {
  background: #333;
  color: #fff;
  opacity: 1;
}
#js-index-slider.p-index-slider--type1 .slick-arrow:hover::before {
  color: #fff;
}
#js-index-slider.p-index-slider--type1 .slick-arrow::before {
  display: block;
  font-family: "design_plus";
  font-size: 13px;
  line-height: 40px;
  color: #333;
}
#js-index-slider.p-index-slider--type1 .slick-prev {
  left: 28px;
}
#js-index-slider.p-index-slider--type1 .slick-next {
  right: 28px;
}
#js-index-slider.p-index-slider--type1 .slick-prev::before {
  content: "\e90f";
}
#js-index-slider.p-index-slider--type1 .slick-next::before {
  content: "\e910";
}

/* SP：オーバーレイ常時表示・ドット外出し */
@media (max-width: 991px) {
  .p-header-blog__item .p-header-blog__item-overlay {
    display: flex !important;
  }
  .wp-is-mobile .p-header-blog__item .p-header-blog__item-overlay {
    display: flex !important;
  }
  .p-header-blog__item .p-header-blog__item-overlay__bottom {
    display: flex !important;
  }
  .wp-is-mobile .p-header-blog__item .p-header-blog__item-overlay__bottom {
    display: flex !important;
  }
  .p-header-blog__item .l-inner.u-visible-sm {
    display: none !important;
  }
  .p-index-slider--type1.slick-slider {
    overflow: visible;
    margin-bottom: 80px;
  }
  .p-index-slider--type1 .slick-list {
    overflow: hidden;
  }
  /* SP：スライダー画像は 402:269 */
  .p-index-slider--type1 .p-header-blog__item-thumbnail {
    padding-top: 66.9154%;
  }
  /* SP：オーバーレイのテキストは左下。タイトルのすぐ下にカテゴリ/日付 */
  .p-header-blog__item-overlay__inner {
    padding: 0 5% 63px;
  }
  /* SP：ドットは非表示 */
  .p-index-slider--type1 .slick-dots {
    display: none !important;
  }
  /* SP：矢印は画像の外（下）、中央に横並び。背景は黒・影なし */
  #js-index-slider.p-index-slider--type1 .slick-arrow {
    top: 100%;
    bottom: auto;
    transform: none;
    margin-top: 40px;
    background: #1a1a1a;
    box-shadow: none;
  }
  #js-index-slider.p-index-slider--type1 .slick-arrow::before {
    color: #fff;
    line-height: 30px;
  }
  #js-index-slider.p-index-slider--type1 .slick-prev {
    left: auto;
    right: calc(50% + 15px);
    width: 30px;
    height: 30px;
    margin-top: 10px;
  }
  #js-index-slider.p-index-slider--type1 .slick-next {
    left: calc(50% + 15px);
    right: auto;
    width: 30px;
    height: 30px;
    margin-top: 10px;
  }
  .p-header-blog__item-overlay__bottom {
    padding: 0 5% 20px;
  }
  .p-header-blog__item-overlay__category span {
    font-size: 13px;
    padding: 8px 16px;
  }
  .p-header-blog__item-overlay__bottom-right {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 10px;
  }
  .p-header-blog__item-overlay .p-header-blog__item-title {
    font-size: 22px;
  }

  .p-header-blog__item-new-badge {
    padding: 8px 17px;
  }

  .p-header-blog__item-overlay__date,
  .p-header-blog__item-overlay__modified,
  .p-header-blog__item-overlay__author {
    font-size: 13px;
  }
}

/* ==========================================================================
   人気記事ランキング（TOPページ .p-ranking）
   template-parts/ranking-section.php。閲覧数順 → 日付順フォールバック。
   6件超は初期非表示、「さらに読み込む」ボタンで展開（ranking-section.php 内 JS）。
   ========================================================================== */

.p-ranking {
  margin-bottom: 65px;
}
.p-ranking__heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: 0;
  line-height: 1.5;
}
.p-ranking__list {
  margin-bottom: 0;
}
.p-ranking__item {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 22px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid #ece8e1;
}
.p-ranking__item-thumb-link {
  grid-column: 1;
  text-decoration: none;
}
/* col2：本文リンク＋メタを縦積み（メタがテキストのすぐ下に来るように） */
.p-ranking__item-col {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.p-ranking__item-body-link {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.p-ranking__item-body-link:hover {
  opacity: 0.4;
}
.p-ranking__item-thumb-link:hover {
  opacity: 0.6;
}
.p-ranking__item-thumbnail {
  position: relative;
}
.p-ranking__item-thumbnail img {
  display: block;
  width: 200px;
  height: 150px;
  object-fit: cover;
}
.p-ranking__item-rank {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: #313131;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.p-ranking__item-rank--1,
.p-ranking__item-rank--2,
.p-ranking__item-rank--3 {
  background: #313131;
}
.p-ranking__item-body {
  flex: 1;
  min-width: 0;
}
.p-ranking__item-title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.55;
  margin-bottom: 10px;
  color: #333;
}
.p-ranking__item-excerpt {
  font-size: 13px;
  color: #444444;
  line-height: 1.7;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-ranking__item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  margin-top: 4px;
  font-size: 13px;
}
.p-ranking__item-meta-right {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  color: #333;
}
.p-ranking__item-date,
.p-ranking__item-modified,
.p-ranking__item-author {
  color: #333;
}
.p-ranking__item-category {
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin-bottom: 16px;
}
.p-ranking__item-category span {
  background: #f4f1ea;
  color: #666666;
  padding: 0 5px;
  font-size: 13px;
  font-weight: bold;
}
.p-ranking__item-category:hover {
  opacity: 1;
}
.p-ranking__item-category:hover span {
  background: #000;
  color: #fff;
}
/* メタのアイコン（公開日・更新日）。白アイコンを filter で濃色化して明るい背景でも見えるように */
.p-ranking__item-date::before,
.p-ranking__item-modified::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
  filter: brightness(0);
  opacity: 0.85;
}
.p-ranking__item-date::before {
  width: 18px;
  height: 18px; /* public_icon.png 32×28 */
  background-image: url("../img/public_icon.png");
}
.p-ranking__item-modified::before {
  width: 13px;
  height: 13px; /* update_icon.png 25×25 */
  background-image: url("../img/update_icon.png");
}
.p-ranking__item--hidden {
  display: none;
}
.p-ranking__item--visible {
  animation: rankingFadeIn 0.4s ease;
}
@keyframes rankingFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.p-ranking__more-wrap {
  text-align: center;
  margin-top: 50px;
}
.p-ranking__load-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #333;
  border: 1px solid #333;
  color: #333;
  padding: 12px 50px;
  font-size: 16px;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  color: #fff;
}
.p-ranking__load-more:hover {
  background: #000;
  color: #fff;
}
.p-ranking__load-more span::before {
  content: "+";
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
}

/* ==========================================================================
   特集記事（TOPページ .p-tokushu）
   front-page.php 内でタグ別に記事をグリッド表示。
   ========================================================================== */

.p-tokushu {
  margin-bottom: 60px;
}
.p-tokushu__heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: 0;
  line-height: 1.5;
}
.p-tokushu__section {
  margin-bottom: 40px;
}
/* セクション見出し：#タグ ── 罫線 ── 記事一覧 › */
.p-tokushu__section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.p-tokushu__tag-label-text {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  letter-spacing: 0;
  text-decoration: none;
  transition: opacity 0.2s;
  font-weight: 700;
}
.p-tokushu__tag-label-text:hover {
  opacity: 0.4;
}
.p-tokushu__section-line {
  flex: 1;
  height: 1px;
  background: #ece8e1;
}
.p-tokushu__section-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: bold;
  color: #8a6f45;
  text-decoration: none;
  transition: opacity 0.2s;
}
.p-tokushu__section-more:hover {
  opacity: 0.4;
}
.p-tokushu__item-date {
  display: block;
  margin-top: 15px;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}
.p-tokushu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.p-tokushu__item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
p.p-tokushu__item-title {
  font-size: 13px;
  line-height: 1.5;
  font-weight: bold;
}
.p-tokushu__item-thumbnail {
  overflow: hidden;
  aspect-ratio: 240 / 150;
  margin-bottom: 10px;
}
.p-tokushu__item-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-tokushu__item-link:hover {
  opacity: 1;
}
.p-tokushu__item-link:hover .p-tokushu__item-thumbnail img {
  opacity: 0.6;
}
.p-tokushu__item-link:hover p.p-tokushu__item-title {
  opacity: 0.4;
}
.p-tokushu__item-content {
  font-size: 13px;
  line-height: 1.7;
  color: #333;
  margin-top: 10px;
}
.p-tokushu__item-content p {
  margin: 0 0 8px;
}
.p-tokushu__item-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   メディア情報（TOPページ .p-media-info）
   front-page.php 内で掲載メディア一覧をリスト表示。
   ========================================================================== */

.p-media-info {
  margin-bottom: 70px;
}
.p-media-info__heading {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 25px;
  letter-spacing: 0;
  line-height: 1.5;
}
.p-media-info__list {
  list-style: none;
  padding: 0;
}
.p-media-info__item {
  border-top: 1px solid #ece8e1;
}

.p-media-info__link {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.p-media-info__link:hover {
  opacity: 0.4;
}
.p-media-info__date {
  flex-shrink: 0;
  margin-right: 42px;
  padding-top: 3px;
  font-size: 13px;
  letter-spacing: 0;
  color: #333;
}
.p-media-info__type {
  flex-shrink: 0;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 6px 10px;
  border: 1px solid #cfcac0;
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #333;
}
.p-media-info__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #333;
  line-height: 1.6;
  font-weight: bold;
}
.p-media-info__more-wrap {
  text-align: center;
}
.p-media-info__more {
  display: inline-block;
  border: 1px solid #000;
  color: #333;
  padding: 10px 40px;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: 0;
  transition:
    background 0.2s,
    color 0.2s;
}
.p-media-info__more:hover {
  background: #000;
  color: #fff;
}

/* ==========================================================================
   レスポンシブ（max-width: 767px）TOPページ専用
   ========================================================================== */

@media (max-width: 767px) {
  .p-ranking__load-more {
    padding: 12px 0;
    width: 100%;
    justify-content: center;
  }

  .p-ranking__more-wrap {
    margin-top: 20px;
  }

  /* --- ランキング --- */
  .p-ranking {
    margin-bottom: 50px;
  }
  .p-ranking__heading {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
  }
  /* SP：左=写真、右=カテゴリ→タイトル→時間 の縦積み */
  .p-ranking__item {
    grid-template-columns: 30% 1fr;
    column-gap: 10px;
    row-gap: 0;
    padding: 14px 0;
  }
  .p-ranking__item-thumb-link {
    grid-row: 1;
    grid-column: 1;
  }
  .p-ranking__item-col {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* meta を解除してカテゴリと日付を col2 直下の並び替え対象にする */
  .p-ranking__item-meta {
    display: contents;
  }
  .p-ranking__item-category {
    order: 1;
    align-self: flex-start;
    margin-bottom: 0;
  }
  .p-ranking__item-body-link {
    order: 2;
  }
  /* SP のみ：公開日・更新日をまとめて item の右下に寄せる */
  .p-ranking__item-meta-right {
    position: absolute;
    right: 0;
    bottom: 14px;
    gap: 10px;
    font-size: 13px;
  }
  .p-ranking__item-thumbnail {
    width: 100%;
  }
  .p-ranking__item-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .p-ranking__item-title {
    font-size: 14px;
  }
  .p-ranking__item-excerpt {
    display: none;
  }
  .p-ranking__item-category span {
    font-size: 13px;
  }
  .p-ranking__item-date::before,
  .p-ranking__item-modified::before {
    margin-right: 4px;
  }

  /* --- 特集記事 --- */
  .p-tokushu {
    margin-bottom: 50px;
  }
  .p-tokushu__heading {
    font-size: 18px;
    margin-bottom: 30px;
    text-align: center;
  }
  .p-tokushu__tag-label-text {
    font-size: 14px;
  }
  .p-tokushu__section-head {
    gap: 12px;
    margin-bottom: 28px;
  }
  /* SP：記事一覧リンクは非表示 */
  .p-tokushu__section-more {
    display: none;
  }
  .p-tokushu__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  p.p-tokushu__item-title {
    font-size: 14px;
    font-weight: bold;
  }

  /* --- メディア情報 --- */
  .p-media-info {
    margin-bottom: 30px;
  }
  .p-media-info__heading {
    font-size: 18px;
    text-align: center;
  }
  /* SP：日付＋カテゴリを1行目、タイトルを下段に折り返し */
  .p-media-info__link {
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
  }
  .p-media-info__date {
    margin-right: 0;
    padding-top: 0;
  }
  .p-tokushu__item-date {
    font-size: 13px;
    margin-top: 5px;
  }
  .p-media-info__type {
    margin-right: 0;
    min-width: 0;
    padding: 4px 10px;
  }
  .p-media-info__title {
    flex: none;
    width: 100%;
    font-size: 14px;
  }

  /* --- レイアウト（TOPのみサイドバー非表示） --- */
  .l-secondary {
    display: none;
  }
}