/* =========================================================
   INFORMATION
   ---------------------------------------------------------
   ・LATEST / NEWS / SCHEDULE / WORKS 共通
   ・一覧 / タブ / ページネーション
   ========================================================= */


/* =========================================================
   1) Section Spacing
   ========================================================= */
.latest,
.news,
.schedule,
.more-works{
  padding-bottom: 120px;
}


/* =========================================================
   2) Information List
   ---------------------------------------------------------
   共通リストデザイン
   ========================================================= */
.info-list{
  width: min(66.666%, 960px);
  margin-inline: auto;
}

/* 1件 */
.info-item{
  padding-top: 16px;
  margin-inline: auto;
}

.info-item:not(:last-child){
  padding-bottom: 16px;
}

/* 上段（日時 / モデル / カテゴリ / NEW） */
.info-meta{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: calc(14px * var(--official-font-scale, 1));
  letter-spacing: .14em;
}

.info-meta .date{
  color: var(--muted);
}

.info-meta .model{
  display: inline-block;
  color: var(--deepblue);
  text-transform: uppercase;
}

.info-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: calc(12px * var(--official-font-scale, 1));
}

.info-title-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}

.info-title-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-title-image.no-image {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 165, 90, .45),
      transparent 65%
    ),
    radial-gradient(
      circle at 85% 25%,
      rgba(190, 175, 235, .35),
      transparent 65%
    ),
    radial-gradient(
      circle at 50% 85%,
      rgba(255, 221, 110, .40),
      transparent 70%
    ),
    #faf9f7;
}

.info-title-text {
  padding-top: 5px;
  padding-bottom: 5px;
  flex: 1;
  min-width: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}


/* =========================================================
   3) Category Badge
   ========================================================= */
.category{
  font-size: calc(8px * var(--official-font-scale, 1));
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
}

.category.event{
  color: #f62d59;
  background: linear-gradient(
    135deg,
    #ff9f9f64 20%,
    #ff969660 50%,
    #ff9a9a5c 100%
  );
}

.category.photo{
  color: #4caffc;
  background: linear-gradient(
    135deg,
    #bae1ff93 20%,
    #91cfff83 50%,
    #b4deff82 100%
  );
}

.category.music{
  color: #866ff0;
  background: linear-gradient(
    135deg,
    #c8bcff8d 20%,
    #c8bcff84 50%,
    #c8bcff77 100%
  );
}

.category.book{
  color: #ff8902;
  background: linear-gradient(
    135deg,
    #ffd3a0a5 20%,
    #ffbf758e 50%,
    #ffce96a0 100%
  );
}

.category.goods{
  color: rgb(9, 165, 100);
  background: linear-gradient(
    135deg,
    #6fdfb05b 20%,
    #6fdfb053 50%,
    #6fdfb079 100%
  );
}


/* =========================================================
   4) Information Tabs
   ========================================================= */
.info-tabs{
  width: min(66.666%, 960px);
  margin: 0 auto 40px;
  margin-inline: auto;

  display: flex;
  gap: 24px;

  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .6s ease, transform .6s ease;
}

.info-tabs.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.info-tabs a{
  position: relative;
  padding-bottom: 6px;

  font-size: calc(14px * var(--official-font-scale, 1));
  letter-spacing: .15em;
  color: #666;
  text-decoration: none;

  transition: color .2s ease;

  text-transform: uppercase;
}

.info-tabs a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #111;
  transition: width .25s ease;
}

/* hover */
.info-tabs a:hover{
  color: #111;
}

.info-tabs a:hover::after{
  width: 100%;
}

/* active */
.info-tabs a.is-active{
  color: #111;
}

.info-tabs a.is-active::after{
  width: 100%;
}


/* =========================================================
   5) Pagination
   ========================================================= */
.pager{
  max-width: 960px;
  margin: 60px auto 100px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 共通リンク */
.pager a{
  min-width: 42px;
  height: 42px;
  padding: 0 14px;

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

  font-size: calc(13px * var(--official-font-scale, 1));
  letter-spacing: .08em;
  text-decoration: none;

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;

  transition: all .25s ease;

  text-transform: uppercase;
}

/* hover */
.pager a:hover{
  background: var(--pink);
  color: #fff;
  transform: translateY(-2px);
}

/* 現在ページ */
.pager .is-active{
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  pointer-events: none;
}

/* Prev / Next */
.pager-prev,
.pager-next{
  padding: 0 18px;
  font-weight: 500;
}


/* =========================================================
   6) Responsive
   ---------------------------------------------------------
   Tablet
   ========================================================= */
@media (max-width: 767px){

  .info-list,
  .info-tabs{
    width: min(84%, 960px);
  }

}


/* =========================================================
   7) Responsive
   ---------------------------------------------------------
   Mobile
   ========================================================= */
@media (max-width: 767px){

  .latest,
  .news,
  .schedule,
  .more-works{
    padding-bottom: 72px;
  }

  .info-list,
  .info-tabs{
    width: 100%;
  }

  .info-tabs{
    gap: 18px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }

  .info-tabs a{
    font-size: calc(13px * var(--official-font-scale, 1));
    letter-spacing: .12em;
  }

  .info-meta{
    gap: 10px;
    flex-wrap: wrap;
    font-size: calc(12px * var(--official-font-scale, 1));
    letter-spacing: .1em;
  }

  .category{
    font-size: calc(9px * var(--official-font-scale, 1));
    padding: 2px 5px;
  }

  .info-title{
    font-size: calc(13px * var(--official-font-scale, 1));
    line-height: 1.7;
  }

  .pager{
    margin: 40px auto 80px;
    gap: 8px;
  }

  .pager a{
    min-width: 36px;
    height: 36px;
    font-size: calc(12px * var(--official-font-scale, 1));
  }

  .pager-prev,
  .pager-next{
    padding: 0 14px;
  }
}


/* =========================================================
   8) Responsive
   ---------------------------------------------------------
   Small Mobile
   ========================================================= */
@media (max-width: 480px){

  .info-tabs{
    gap: 14px;
  }

  .info-meta{
    gap: 8px;
  }

  .info-title{
    margin-top: 8px;
  }

  .pager{
    gap: 6px;
  }

  .pager a{
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
  }
}

a.more-link{
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  padding: 10px 18px;

  font-size: calc(12px * var(--official-font-scale, 1));
  letter-spacing: .12em;
  font-weight: 900;
  text-transform: uppercase;

  color: #696969;
  text-decoration: none;

  border: 1px solid rgba(0,0,0,.2);
  border-radius: 999px;

  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);

  transition: all .25s ease;
}

a.more-link strong{
  margin-left: 4px;
  color: var(--yellow);
  transition: color .25s ease;
}

a.more-link:hover strong{
  color: #fff;
}

a.more-link:hover{
  color: #fff;
  background: #b1b1b1;
  border-color: #b1b1b1;
  transform: translateY(-2px);
}

a.more-link:active{
  transform: translateY(0);
  opacity: .85;
}

@media (max-width: 480px){

  a.more-link{

    padding: 6px 12px;
    font-size: calc(11px * var(--official-font-scale, 1));
    letter-spacing: .12em;
    font-weight: 300;

  }

}
/* Model thumbnails in information lists. */

.info-list > .info-item-with-models{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start}.info-item-with-models .info-item-content{min-width:0}.info-item-with-models .info-divider{grid-column:1 / -1}.info-model-thumbnails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:64px}.info-model-thumbnail{display:block;min-width:0;aspect-ratio:1;overflow:hidden;border-radius:9px;background:#f5edf3;text-decoration:none;box-shadow:0 2px 8px #5c385915}.info-model-thumbnail:only-child{grid-column:1 / -1;border-radius:14px}.info-model-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}.info-model-placeholder{display:flex;width:100%;aspect-ratio:1;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#f5e6ef,#e8f1f8);color:#99708c;font-size:calc(12px * var(--official-font-scale, 1));line-height:1;letter-spacing:0}.info-model-thumbnails>.info-model-placeholder{grid-column:1 / -1;font-size:calc(10px * var(--official-font-scale, 1))}.info-model-thumbnail:focus-visible{outline:2px solid #b54870;outline-offset:3px}
@media(max-width:767px){.info-list > .info-item-with-models{grid-template-columns:52px minmax(0,1fr);column-gap:12px}.info-model-thumbnails{width:52px}}

.info-item-with-models .info-title{display:block}.info-item-with-models .info-meta{flex-wrap:wrap;gap:6px 12px}.info-item-with-models .info-title-text{overflow-wrap:anywhere}

/* Quiet cards coordinated with the model icons and homepage picks. */
:is(#top, .model-detail) .info-list > li.info-item {
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 18px 20px;
  border: 1px solid #e9e2e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px -10px rgba(105, 77, 99, .22);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
:is(#top, .model-detail) .info-list > li.info-item:last-child { margin-bottom: 0; }
:is(#top, .model-detail) .info-list > li.info-item .info-divider { display: none; }
:is(#top, .model-detail) .info-list > li.info-item .info-meta {
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: calc(12px * var(--official-font-scale, 1));
  line-height: 1.7;
  letter-spacing: .04em;
}
:is(#top, .model-detail) .info-list > li.info-item .date {
  color: #8a7f8a;
  font-variant-numeric: tabular-nums;
}
:is(#top, .model-detail) .info-list > li.info-item .model a {
  color: #9b527b;
  text-decoration: none;
}
:is(#top, .model-detail) .info-list > li.info-item .info-title {
  display: block;
  margin-top: 7px;
  color: #49414a;
  font-size: calc(14px * var(--official-font-scale, 1));
  font-weight: 400;
  line-height: 1.85;
  text-align: left;
  overflow-wrap: anywhere;
}
:is(#top, .model-detail) .info-list > li.info-item .info-title-text { padding: 0; }
:is(#top, .model-detail) .info-list > li.info-item .info-title a { color: inherit; text-decoration: none; }
:is(#top, .model-detail) .info-list > li.info-item a:focus-visible { outline: 2px solid #b56a94; outline-offset: 3px; border-radius: 4px; }
:is(#top, .model-detail) .info-list > li.info-item:focus-within { border-color: #d3adbf; box-shadow: 0 5px 20px -10px rgba(153, 92, 130, .3); }
@media (hover: hover) {
  :is(#top, .model-detail) .info-list > li.info-item:hover { background: #fffafd; border-color: #dfc4d4; box-shadow: 0 6px 20px -10px rgba(153, 92, 130, .28); }
  :is(#top, .model-detail) .info-list > li.info-item .info-title a:hover,
  :is(#top, .model-detail) .info-list > li.info-item .model a:hover { color: #a34f7c; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 767px) {
  :is(#top, .model-detail) .info-list > li.info-item { padding: 14px 12px; margin-bottom: 10px; border-radius: 12px; }
  :is(#top, .model-detail) .info-list > li.info-item .info-meta { font-size: calc(11px * var(--official-font-scale, 1)); gap: 5px 8px; }
  :is(#top, .model-detail) .info-list > li.info-item .info-title { font-size: calc(10px * var(--official-font-scale, 1)); line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#top, .model-detail) .info-list > li.info-item { transition: none; }
}

.model-detail .profile-wrap .info-list { width: 100%; max-width: none; }