@charset "UTF-8";

/* --------------------------------------
シングルページ
---------------------------------------*/
.single_title_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--c_grey);;
}
.single_news_date {
  color: rgba(var(--c_black_rgb), 0.4);
  font-family: var(--font-roboto);
  font-size: var(--fs-base);
}

/* アイキャッチ画像 */
img.tmb_img {
    width: auto;
    height: auto;
    max-width: min(100%, 800px);
    max-height: 800px;
    object-fit: contain;
    margin: auto;
    border-radius: 0.8rem;
}

/* --------------------------------------
リッチエディター本文
---------------------------------------*/
.rich_editor {
    width: 100%;
}
.rich_editor > * + * {
    margin-top: 1.5rem;
}
.rich_editor p {
    font-size: var(--fs-base);
    text-align: justify;
}
.rich_editor h1,
.rich_editor h2,
.rich_editor h3,
.rich_editor h4 {
    line-height: 1.6;
    font-weight: 400;
}
.rich_editor ul {
    list-style: disc;
    padding-left: 1.5em;
}
.rich_editor ol {
    list-style: decimal;
    padding-left: 1.5em;
}
.rich_editor ul li {
    list-style: disc;
}
.rich_editor ol li {
    list-style: decimal;
}
.rich_editor li + li {
    margin-top: 0.5rem;
}
.rich_editor a {
    text-decoration: underline;
}
.rich_editor img {
    width: auto;
    height: auto;
    max-width: min(100%, 800px);
    max-height: 800px;
    object-fit: contain;
    display: block;
    margin: 1.5rem auto;
}
.rich_editor blockquote {
    border-left: 4px solid var(--c_key);
    padding-left: 1rem;
}
.rich_editor table {
    width: 100%;
    border-collapse: collapse;
}
.rich_editor th,
.rich_editor td {
    border: 1px solid var(--c_key);
    padding: 0.75rem;
}


/* --------------------------------------
投稿の移動
---------------------------------------*/
.post_links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.post_link {
    width: 20%;
    height: 40px;
    display: flex;
}
.post_link_next {
  justify-content: right;
}
.post_link_prev {
  justify-content: left;
}
.post_link a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  background: var(--c_white);
  border: 1px solid var(--c_grey);
  border-radius: 50%;
  box-sizing: border-box;
  text-decoration: none;
  transition: 0.3s;
}
.post_link a::before {
  content: "";
  position: absolute;
  top: 50%;
  
  border-top: 1px solid rgba(var(--c_black_rgb), 0.6);
  border-right: 1px solid rgba(var(--c_black_rgb), 0.6);
  transition: 0.3s;
  /* 矢印の大きさ */
  width: 0.6rem;
  height: 0.6rem;
}
/* 左向き矢印 */
.post_link_prev a::before {
  left: 53%;
  transform: translate(-40%, -50%) rotate(-135deg);
}
 /* 右向き矢印 */
.post_link_next a::before {
  left: 47%;
  transform: translate(-60%, -50%) rotate(45deg);
}
.post_link a:hover {
  background: var(--c_tx);
  border-color: var(--c_tx);
}
.post_link a:hover::before {
  border-color: var(--c_white);
}



/* --------------------------------------
ギャラリー詳細ページ
---------------------------------------*/
.gallery_hero_space {
  width: 100%;
  height: 70px;
}
/* 上部の大きなメインビジュアル全体 */
.gallery_hero_wrap {
  position: relative;
  width: 100vw;
  aspect-ratio: 2/1;
  max-height: 500px;
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--c_white);
}
@media screen and (max-width: 768px) {
  .gallery_hero_wrap {
    aspect-ratio: 4/3;
  }
}
@media screen and (max-width: 500px) {
  .gallery_hero_wrap {
    aspect-ratio: 1/1;
  }
}
/* ヒーロー背景画像 */
.gallery_hero_img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gallery_hero_img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--c_black_rgb), 0) 0%, rgba(var(--c_black_rgb), 0.8) 100%);
}
.gallery_hero_img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* object-position: top center; */
}
/* ヒーロー上のテキスト */
.gallery_hero_tx {
  position: relative;
  z-index: 1;
  width: 96%;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: var(--mgn3rem);
}
.gallery_single_date {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-roboto);
  font-size: var(--fs-mini);
  line-height: 1;
}
.gallery_hero_tx h2.text_title {
  font-size: var(--fs-md);
}

/* ギャラリー画像一覧 */
.gallery_img_list {
  width: 100%;
  margin: var(--mgn5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}
.gallery_img_list li {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.6rem;
  border: 1px solid rgba(var(--c_black_rgb), 0.1);
  box-sizing: border-box;
}
.gallery_img_list a {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.gallery_img_list a::after {
  content: "\f002";
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--c_black_rgb), 0.45);
  color: var(--c_white);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
}

.gallery_img_list img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .gallery_img_list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 500px) {
  .gallery_img_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* Lightbox前後ボタン */
.lb-outerContainer {
  overflow: visible !important;
}
.lb-nav {
  top: calc(100% + 2.6rem) !important;
  left: 0 !important;
  width: 100% !important;
  height: 2rem !important;
  display: block !important;
  pointer-events: none;
}
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
  position: absolute;
  top: 0;
  width: 2rem !important;
  height: 2rem !important;
  float: none !important;
  opacity: 1 !important;
  border: 1px solid var(--c_white);
  border-radius: 50%;
  background: transparent !important;
  box-sizing: border-box;
  pointer-events: auto;
}
.lb-nav a.lb-prev {
  left: 0;
}
.lb-nav a.lb-next {
  right: 0;
}
.lb-nav a.lb-prev::after,
.lb-nav a.lb-next::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: rgba(var(--c_white_rgb), 0.18);
  opacity: 0;
  transition: opacity 0.3s;
}
.lb-nav a.lb-prev:hover::after,
.lb-nav a.lb-next:hover::after {
  opacity: 1;
}
.lb-nav a.lb-prev::before,
.lb-nav a.lb-next::before {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 1px solid var(--c_white);
  opacity: 0.85;
}
.lb-nav a.lb-prev::before {
  left: 0.78rem;
  border-left: 1px solid var(--c_white);
  transform: translateY(-50%) rotate(-45deg);
}
.lb-nav a.lb-next::before {
  right: 0.78rem;
  border-right: 1px solid var(--c_white);
  transform: translateY(-50%) rotate(45deg);
}

/* Lightbox表示画像の幅調整 */
.lb-outerContainer {
  background-color: rgba(var(--c_white_rgb), 0)!important;
  width: 750px !important;
  max-width: 750px !important;
  height: auto !important;
}
.lb-image {
  border: none !important;
  width: 750px !important;
  max-width: 750px !important;
  height: auto !important;
}
.lb-dataContainer {
  width: 750px !important;
  max-width: 750px !important;
}
@media screen and (max-width: 768px) {
  .lb-outerContainer {
    width: 90vw !important;
  }
  .lb-image {
    width: 90vw !important;
  }
  .lb-dataContainer {
    width: 90vw !important;
  }
}


/* --------------------------------------
モデル詳細ページ
---------------------------------------*/
/* ページ上部のモデル名・カテゴリー全体 */
.model_name_wrap {
  width: 100%;
  padding: var(--mgn5rem) 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* モデル名の文字設定 */
h2.model_name {
  font-family: var(--font-hlvt), var(--font-bold);
  font-size: var(--fs-lg);
  line-height: 1;
  transform: translateY(0.1em);
  padding-bottom: var(--mgn1rem);
}

/* カテゴリー名の基本表示 */
.model_single_cat {
  font-family: var(--font-bold);
  font-size: var(--fs-base);
  line-height: 1;
}
/* カテゴリー別カラー：men’s egg */
.model_single_cat.mens {
  color: var(--c_mens);
}
/* カテゴリー別カラー：men’s egg pink */
.model_single_cat.pink {
  color: var(--c_pink);
}
/* 写真エリアとプロフィールの2カラム配置 */
.model_single_wrap {
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
/* 写真ギャラリーの最大幅と中央寄せ */
.model_single_gallery {
  width: 100%;
  max-width: 500px;
  margin: auto;
}
/* メイン写真の比率・角丸設定 */
.model_single_main_img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0.8rem;
}
/* メイン写真のcover表示とフェード切替設定 */
.model_single_main_img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.55s ease, filter 0.55s ease;
}
/* JS切替時に一度透明にして、ふわっと表示させる状態 */
.model_single_main_img img.is-changing {
  opacity: 0;
  filter: blur(6px);
}
/* サムネイル一覧の並び */
.model_single_thumb_wrap {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
/* サムネイルボタンのサイズ・通常状態 */
.model_single_thumb {
  width: 56px;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  appearance: none;
  background: rgba(var(--c_black_rgb), 0.04);
  cursor: pointer;
  opacity: 0.45;
  transition: 0.3s;
}
/* 選択中・ホバー時のサムネイル強調 */
.model_single_thumb.is-active,
.model_single_thumb:hover {
  border-color: var(--c_tx);
  opacity: 1;
}
.model_single_thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* プロフィール一覧の基本レイアウト */
.model_single_profile {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.model_profile_list {
  display: flex;
  flex-direction: column;
}
/* プロフィール各行：左ラベル、右内容 */
.model_profile_list div {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(var(--c_black_rgb), 0.08);
}
/* プロフィール左側の項目名 */
.model_profile_list dt {
  color: rgba(var(--c_black_rgb), 0.6);
  font-size: var(--fs-mini);
}
/* プロフィール右側の内容 */
.model_profile_list dd {
  font-size: var(--fs-base);
}
/* SNSアイコン一覧の並び */
.model_single_sns {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* SNSアイコン1個あたりのクリック領域 */
.model_single_sns a {
  width: 2rem;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* SNSリンクを空表示する場合のクリック無効化 */
.model_single_sns a.is-empty {
  pointer-events: none;
}
/* SNSアイコン画像のフィット設定 */
.model_single_sns img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* 白アイコン素材を黒表示に反転 */
.model_single_sns img[src*="_wt"] {
  filter: invert(1);
}
/* 一覧へ戻るボタン周り（使用時） */
.model_single_bottom {
  margin: var(--mgn3rem) auto 0;
  text-align: center;
}
.model_single_bottom .link_btn {
  margin: auto;
}
/* 768px以下：写真とプロフィールを縦並びに変更 */
@media screen and (max-width: 768px) {
  .model_single_wrap {
    grid-template-columns: 1fr;
  }
  .model_single_profile {
    padding-top: 0;
  }
}
/* 500px以下：プロフィール行を1カラムに変更 */
@media screen and (max-width: 500px) {
  .model_profile_list div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}