@charset "utf-8";
/* ==========================================================================
   page/character.css  ―  キャラクター紹介ページ（page-character.php）
   --------------------------------------------------------------------------
   デザインカンプ「紹介ページ.pdf」の実測値に基づく。
   カンプは幅1200px。コンテンツは共通の .l-inner（84%、最大1440px）に追従。
   ========================================================================== */

.p-character-page {
  background-color: var(--color-bg-cream);
}

/* --- キャラクターカード --------------------------------------------------- */

/* ==========================================================================
   2. プカ太郎劇場
   --------------------------------------------------------------------------
   カンプ実測: カード列はコンテンツ幅より広い 1154px（アートボードの96%）。
   ========================================================================== */
.p-character-theater__container {
  width: 96%;
  max-width: calc(var(--inner-width) * 1.154);
  margin-top: 6.9rem;
  margin-inline: auto;
}

/*
 * 4列。件数が4の倍数に満たないときは中央にそろえたいので、
 * グリッドではなくフレックスで1枚あたりの幅を計算する。
 */
.p-character-theater__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.p-character-theater__item {
  flex: 0 1 calc((100% - 6rem) / 4);
  min-width: 0;
}

/* --- サムネイル＋タイトルのカード（劇場） --------------------------------- */
.p-character-media {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-white);
  border: .1rem solid var(--color-secondary);
  border-radius: var(--radius-m);
  transition: opacity .2s var(--ease);
}

.p-character-media__thumb {
  position: relative;
  display: block;
}

.p-character-media__image,
.p-character-media__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.p-character-media__placeholder {
  background-color: var(--color-bg-cream);
}

/* アップロードした動画。枠の比率をサムネイルと揃える。 */
.p-character-media__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: var(--color-text);
  object-fit: cover;
}

/* 動画のサムネイルに再生マークを重ねる。 */
.p-character-media__thumb--video::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 7.2rem;
  max-width: 30%;
  aspect-ratio: 72 / 50;
  border-radius: var(--radius-m);
  background-color: var(--color-primary);
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.p-character-media__thumb--video::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 2rem;
  max-width: 8%;
  aspect-ratio: 20 / 24;
  background-color: var(--color-text-invert);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  transform: translate(-40%, -50%);
  pointer-events: none;
}

.p-character-media__title {
  display: block;
  padding: 1.2rem 1.6rem 1.6rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   3. プカ太郎の日々（Instagram）
   ========================================================================== */
.p-character-insta {
  margin-top: 9.4rem;
}

.p-character-insta__panel {
  margin-top: 5.7rem;
  padding: 1.5rem 5.5rem 3rem;
  background-color: var(--color-bg-white);
  border-radius: var(--radius-m);
}

.p-character-insta__head {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.p-character-insta__avatar {
  flex: 0 0 auto;
  display: block;
  width: 6.6rem;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.p-character-insta__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-character-insta__user {
  font-weight: 700;
}

.p-character-insta__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.9rem;
  margin-top: 2.6rem;
}

.p-character-insta__image,
.p-character-insta__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.p-character-insta__placeholder {
  background-color: var(--color-bg-cream);
}

.p-character-insta__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3.2rem;
}

.p-character-insta__more {
  border-radius: var(--radius-s);
}

.p-character-insta__follow {
  --p-character-insta-blue: #3897f0;

  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 4.4rem;
  padding: .8rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-bg-white);
  background-color: var(--p-character-insta-blue);
  border: .1rem solid var(--p-character-insta-blue);
  border-radius: var(--radius-s);
}

.p-character-insta__follow::before {
  content: "";
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  background: url("../../img/character/icon-instagram.svg") no-repeat center / contain;
}

/* ==========================================================================
   4. プカ太郎オリジナルグッズ販売中！
   ========================================================================== */
.p-character-goods {
  margin-top: 9rem;
}

.p-character-goods__inner {
  margin-top: 1.2rem;
}

.p-character-goods__visual {
  position: relative;
  text-align: center;
}

.p-character-goods__image {
  position: relative;
  z-index: calc(var(--z-base) + 1);
  width: 100%;
  height: auto;
}

.p-character-goods__action {
  margin-top: 1.6rem;
  text-align: center;
}

/* ==========================================================================
   5. プカ太郎オリジナルコンテンツ
   ========================================================================== */
.p-character-contents {
  margin-top: 8rem;
  padding-bottom: 9rem;
}

.p-character-contents__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.1rem;
  margin-top: 6.9rem;
}

/* --- ダウンロードコンテンツのカード --------------------------------------- */
.p-character-download {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-white);
  border: .1rem solid var(--color-secondary);
  border-radius: var(--radius-m);
  transition: opacity .2s var(--ease);
}

.p-character-download__thumb {
  display: block;
}

.p-character-download__image,
.p-character-download__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 464 / 296;
  object-fit: contain;
}

.p-character-download__placeholder {
  background-color: var(--color-bg-cream);
}

.p-character-download__body {
  display: block;
  padding: 1.6rem;
}

.p-character-download__title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-character-download__text {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.6;
}

/* ==========================================================================
   6. Media Queries
   ========================================================================== */

/* --- タブレット / narrow PC ----------------------------------------------- */
@media screen and (max-width: 1199px) {

  .p-character-theater__container {
    width: 84%;
    max-width: var(--inner-width);
  }

  .p-character-contents__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-character-theater__item {
    flex-basis: calc((100% - 2rem) / 2);
  }

  .p-character-insta__panel {
    padding: 3.2rem;
  }

  .p-character-insta__list {
    gap: 1.6rem;
  }
}

/* --- SP ------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  .p-character-theater__container {
    width: 90%;
    margin-top: 3.2rem;
  }

  .p-character-contents__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .p-character-theater__list {
    gap: 1.6rem;
  }

  .p-character-theater__item {
    flex-basis: calc((100% - 1.6rem) / 2);
  }

  .p-character-insta {
    margin-top: 6rem;
  }

  .p-character-insta__panel {
    margin-top: 3.2rem;
    padding: 2rem;
  }

  .p-character-insta__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
  }

  .p-character-insta__action {
    flex-direction: row;
    align-items: center;
    gap: .8rem;
  }

  .p-character-insta__follow {
    justify-content: center;
  }

  .p-character-goods {
    margin-top: 6rem;
  }

  .p-character-contents {
    margin-top: 6rem;
    padding-bottom: 6rem;
  }

  .p-character-ribbon__line {
    font-size: 3rem;
  }

  .p-character-contents__list {
    margin-top: 4rem;
  }

  .p-character-ribbon {
    border-top-width: .4rem;
  }

  .p-character-ribbon__text {
    width: 96%;
    min-height: 6.4rem;
    padding: 1rem 2.4rem;
    font-size: 2.2rem;
    line-height: 1.4;
    display: grid;
    place-items: center;
  }

  .p-character-media__title {
    padding: 1.2rem;
    font-size: 1.4rem;
    overflow-wrap: anywhere;
  }

  .p-character-contents .l-inner {
    width: 90%;
  }

  .p-character-download__body {
    padding: 1.2rem;
  }

  .p-character-download__title {
    font-size: 1.4rem;
    overflow-wrap: anywhere;
  }

  .p-character-insta__more,
  .p-character-insta__follow {
    min-height: 4.4rem;
    padding: .8rem;
    font-size: 1.2rem;
  }

  .p-character-goods__inner {
    width: 100%;
  }

  .p-character-goods__action {
    width: 90%;
    margin-inline: auto;
  }
}

/* --- ホバー --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .p-character-media:hover,
  .p-character-download:hover {
    opacity: .6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-character-media,
  .p-character-download {
    transition: none;
  }
}

.p-character-ribbon {
  border-top: .6rem solid var(--color-primary);
}

.p-character-ribbon__text {
  width: min(90%, 60rem);
  margin-inline: auto;
  padding: 1rem 3.2rem;
  color: var(--color-text-invert);
  background-image: url('../../img/common/top_title.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.p-character-insta__link {
  display: block;
}

.p-character-page a:focus-visible {
  outline: .2rem solid var(--color-primary);
  outline-offset: .4rem;
}

.p-character-hero {
  background-color: #feeaaa;
}

.p-character-hero__image {
  display: block;
  width: 100%;
  height: auto;
}

.p-character-picture {
  display: block;
}

/* 動画モーダル：一覧のサイズとは独立して、画面内に全体を収める。 */
.p-character-media__video {
  object-fit: contain;
  pointer-events: none;
}

html.is-character-modal-open {
  overflow: hidden;
}

.p-character-modal {
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 2.4rem);
  max-height: calc(100vh - 2.4rem);
  max-height: calc(100dvh - 2.4rem);
  margin: auto;
  padding: 1.6rem;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-m, 1.2rem);
  background: var(--color-bg-white, #fff);
  color: var(--color-text, #222);
}

.p-character-modal:not([open]) {
  display: none;
}

.p-character-modal::backdrop {
  background: rgba(0, 0, 0, .75);
}

/* 見出しは読み上げ用に残すだけなので、閉じるボタンだけを右に置く。 */
.p-character-modal__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.2rem;
}

/* ×だけの正方形。指で押せる大きさは確保する。 */
.p-character-modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: var(--color-primary, #ff3b25);
  color: var(--color-text-invert, #fff);
  font: inherit;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}

.p-character-modal__player {
  width: 100%;
  background: #000;
}

.p-character-modal__player video,
.p-character-modal__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  object-fit: contain;
}

.p-character-modal__error {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  overflow-wrap: anywhere;
}

.p-character-modal :focus-visible {
  outline: .2rem solid var(--color-primary, #ff3b25);
  outline-offset: .3rem;
}

@media print {
  .p-character-modal {
    display: none;
  }
}