.models h1{
  text-align: center;
}

.models h2 {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0px;
  margin-block-start: 0;
  margin-block-end: 0;
}

.models-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    -ms-justify-content: flex-start;
      justify-content: flex-start;
  width: calc(100vw - 77px);
  margin: 0;
  box-sizing: border-box;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  gap: 0;
}

.models ul {
  padding-inline-start: 0px;
}

.models-list li {
  list-style: none;
  width: calc(20% - 16px);
  height: auto;
  margin: 0 8px 30px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.models-list li a {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4.2;
  overflow: hidden;
  position: relative;
  border-radius: 0;
}

.models-list li img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: center center;
}

.models-list li a:hover img {
  transform: scale(1.08);
  filter: brightness(0.6) contrast(1.05);
}

.models-list li p {
  text-align: center;
  font-size: 0.8rem;
}

.in-town-txt {
  color: #f00;
}

.out-town-txt {
  color: #999;
}

.comming-soon-txt {
  color: #9A9359;
}

.special-txt {
  color: #FFA594;
}

.special-p {
  margin-bottom: -30px;
}

.mb20{
  margin-bottom: 20px;
}
.swiper-container{
  text-align: center;
}
.swiper-slide{
  display:flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.swiper-container .swiper-slide img{
  max-width: 75%; /* 1枚目スライド */
  max-height: 100vh; /* ブラウザーの縦幅に収める */
  margin-bottom: 90px; /* PC用 */
}
.swiper-container .swiper-slide img.sp-fix{
  max-width: 100%;
  height: auto;
  margin-bottom: 0px;
}
.prettyprint{
  border: none;
  background: #fafafa;
  color: #697d86;
}

.m-logo__img{
  text-align: center;
  width: 12px;
  height: 12px;
  line-height: 1;
}

.ytb{
    padding-top: 59px;
}

/* PC表示でもswiperコントロールを非表示 */
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
  display: none;
}

/* PC表示でのレイアウト調整 - 個別モデルページ（swiper-containerがあるページ）のみ */
@media screen and (min-width: 901px) {
  /* PCでのモデル一覧ページの文字サイズ調整 */
  .models h2 {
    font-size: 1.25rem;
  }
  
  .models-list li p {
    font-size: 1rem;
  }
  
  /* swiper-containerがあるページでのbody設定 */
  body:has(.swiper-container) {
    overflow: auto;
  }

  /* swiper-containerがあるページ（個別モデルページ）のみ左右分割レイアウト */
  .swiper-container ~ * .c-container,
  .c-container:has(.swiper-container) {
    display: block;
    position: relative;
    padding-bottom: 0;
    min-height: 100vh;
    overflow: visible;
  }
  
  /* より確実な方法: swiper-containerがある場合の.c-container */
  .c-container {
    /* デフォルトは通常レイアウト */
  }
  
  .swiper-container {
    /* swiper-containerの存在をマーク */
  }
  
  /* swiper-containerがあるページでのみ適用 */
  .c-container:has(.swiper-container) {
    display: block;
    position: relative;
    padding-right: 17px;
    padding-bottom: 0;
    padding-right: 17px;
    min-height: 100vh;
    overflow: visible;
  }
  
  /* モデル情報セクションを左側に固定 - 背景として配置 */
  .c-container:has(.swiper-container) .c-section:first-child {
    position: fixed;
    left: 0;
    top: 0;
    width: 33%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    z-index: 10;
    padding: 40px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }
  
  /* モデル情報の内容を操作可能にする */
  .c-container:has(.swiper-container) .c-section:first-child .c-section__inner {
    position: relative;
    z-index: 3;
    pointer-events: none;
    text-align: center;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  /* プロフィール情報も中央配置 */
  .c-container:has(.swiper-container) .c-section:first-child .profile {
    text-align: center;
    pointer-events: auto;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* モデル情報のテキスト要素を選択可能に */
  .c-container:has(.swiper-container) .c-section:first-child .profile h1,
  .c-container:has(.swiper-container) .c-section:first-child .profile-txt,
  .c-container:has(.swiper-container) .c-section:first-child .profile p {
    pointer-events: auto;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    position: relative;
    z-index: 5;
  }
  
  /* 左側エリア内のリンク要素は操作可能に */
  .c-container:has(.swiper-container) .c-section:first-child a {
    position: relative;
    z-index: 4;
    pointer-events: auto;
  }
  
  /* 写真セクションを右側に配置 - 全体幅で左マージン使用 */
  .c-container:has(.swiper-container) .c-section:last-child {
    margin-left: 33%;
    width: calc(67% - 40px);
    padding: 0 40px 40px 0;
    box-sizing: content-box;
    min-height: 100vh;
    position: relative;
    z-index: 1;
  }
  
  /* 右側エリア内の.c-section__innerのmax-width制限を削除 */
  .c-container:has(.swiper-container) .c-section:last-child .c-section__inner {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  /* プロフィール情報のスタイル調整 */
  .profile h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
  }
  
  .profile-txt {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
  }
  
  .composite {
    font-size: 1.1rem;
  }
}

/* PC表示でswiper無効時に全ての画像を表示 */
.swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  transform: none !important;
}

.swiper-slide {
  display: flex;
  flex: 0 0 auto;
  width: calc(20% - 8px);
  margin-bottom: 20px;
  transform: none !important;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* PC表示での写真エリア調整 */
@media screen and (min-width: 901px) {
  /* swiper-containerがあるページでのwrapper調整 */
  .c-container:has(.swiper-container) .swiper-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    transform: none !important;
  }
  
  .c-container:has(.swiper-container) .swiper-slide {
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    transform: none !important;
    flex: none;
  }
  
  .swiper-slide img,
  .swiper-slide img.sp-fix {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
  }
  
  /* swiper-containerがあるページでの画像調整 */
  .c-container:has(.swiper-container) .swiper-slide img,
  .c-container:has(.swiper-container) .swiper-slide img.sp-fix {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
  }
  
  /* より具体的なセレクターで画像拡大を強制 */
  .c-container .c-section .swiper-container .swiper-wrapper .swiper-slide img,
  .c-container .c-section .swiper-container .swiper-wrapper .swiper-slide img.sp-fix {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    /* max-height: 100vh !important; */
    flex-shrink: 0 !important;
  }
  
  /* 1枚目の画像のみブラウザーの縦幅に収める */
  .c-container .c-section .swiper-container .swiper-wrapper .swiper-slide:first-child img,
  .c-container .c-section .swiper-container .swiper-wrapper .swiper-slide:first-child img.sp-fix {
    width: 45% !important;
    max-width: 85% !important;
    min-width: auto !important;
    height: auto !important;
    max-height: 100vh !important;
    display: block !important;
    margin: 0 auto 90px auto !important;
  }
}

@media screen and (max-width: 900px) {
  .models h2 {
    font-size: 1.75rem;
    font-weight: bold;
  }
/*  .models-list {
    display: inline;
    max-width: 100%;
  }*/
  .models-list li {
    list-style: none;
    width: calc(50% - 12px);
    height: auto;
    margin: 0 6px 20px 6px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .models-list li p {
    text-align: center;
    font-size: 1.2rem;
  }
  .c-section__inner {
    padding-left: 0;
    padding-right: 0;
  }
  .c-container {
    margin-left: 0;
    margin-right: 0;
  }
  .ytb{
    padding-top: 0px;
  }
  .swiper-wrapper{
    flex-wrap:wrap;
    gap: 0;
  }
  .swiper-slide{
    width: 100%;
    margin-bottom: 0;
  }
  .swiper-button-prev,.swiper-button-next,.swiper-pagination{
    display: none;
  }
  
  /* SP表示でモデル詳細ページのレイアウト調整 */
  .c-container:has(.swiper-container) {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding-bottom: 40px;
  }
  
  /* モデル情報セクションをSPでは上部に配置 */
  .c-container:has(.swiper-container) .c-section:first-child {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    background: #fff;
    z-index: auto;
    padding: 20px;
    box-sizing: border-box;
    order: 1;
    display: block;
    flex-direction: initial;
    justify-content: initial;
  }
  
  /* 写真セクションをSPでは下部に配置 */
  .c-container:has(.swiper-container) .c-section:last-child {
    margin-left: 0;
    width: 100%;
    /* padding: 0 20px 0 20px; */
    box-sizing: border-box;
    height: auto;
    overflow: visible;
    order: 2;
  }
  
  /* SP表示でのプロフィール情報調整 */
  .profile h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .profile-txt {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .composite {
    font-size: 1rem;
    text-align: center;
  }
  
  /* SP表示での画像のマージンとパディングを削除 */
  .swiper-slide img,
  .swiper-slide img.sp-fix {
    margin: 0;
    padding: 0;
    display: block;
  }

  /* SP表示での画像マージン調整 */
  .swiper-container .swiper-slide img{
    margin-bottom: 80px; /* SP用 */
  }
}

.c-container {
  width: 100%;
  /* background: #fff; */
  /* padding-bottom: 120px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.models-list h2 {
  margin-top: 7px;
}

/* models.cssが読み込まれるページのヘッダー - 全ページ共通 - より高い優先度 */
html body .st-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* ヘッダーコンテンツエリアも確実に透明に */
html body .st-header .st-header-content {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ヘッダーインナーエリアも確実に透明に */
html body .st-header .st-header-inner {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ヘッダー内の他の要素も透明に（ハンバーガーメニュー以外） */
html body .st-header .st-header-logo,
html body .st-header .st-header-nav,
html body .st-header .st-header-globalNav {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ハンバーガーメニューの色を明示的に指定 */
html body .st-header .st-header-navBtn {
  background: transparent !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  z-index: 99999 !important;
  position: relative !important;
}

/* ハンバーガーメニューアイコンの基本設定 */
html body .st-header .st-header-navBtn__icon {
  background-color: #000 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: block !important;
  width: 17px !important;
  height: 2px !important;
}

html body .st-header .st-header-navBtn__icon::before,
html body .st-header .st-header-navBtn__icon::after {
  background-color: #000 !important;
  transition: all 0.3s ease !important;
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  display: block !important;
  width: 17px !important;
  height: 2px !important;
  transform-origin: center center !important;
}

html body .st-header .st-header-navBtn__icon::before {
  top: -5px !important;
}

html body .st-header .st-header-navBtn__icon::after {
  top: 5px !important;
}

/* ハンバーガーメニューが開いた時の✗アニメーション - Android対応 */
html body .st-header .st-header-navBtn__icon.is-nav-open {
  background-color: transparent !important;
}

html body .st-header .st-header-navBtn__icon.is-nav-open::before {
  top: 0 !important;
  transform: rotate(45deg) !important;
  background-color: #fff !important;
}

html body .st-header .st-header-navBtn__icon.is-nav-open::after {
  top: 0 !important;
  transform: rotate(-45deg) !important;
  background-color: #fff !important;
}

html body .st-header .st-header-inner {
  width: calc(100vw - 96px) !important;
  max-width: none !important;
  margin: 0 !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* 固定ヘッダー分のbodyトップマージンを削除してコンテンツを回り込ませる */
html body {
  padding-top: 0 !important;
}

html body .st-header .st-header-logo {
  padding-left: 0 !important;
  margin: 0 !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

html body .st-header .st-header-nav {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

html body .st-header .st-header-globalNav {
  margin: 0 !important;
  padding: 0 !important;
}

/* SP表示での調整 */
@media screen and (max-width: 900px) {
  html body .st-header .st-header-inner {
    justify-content: space-between !important;
    align-items: center !important;
    height: 3.57143rem !important;
  }
  
  html body .st-header .st-header-logo {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
  
  html body .st-header .st-header-navBtn {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  
  /* ハンバーガーメニューの全幅設定はSP専用 */
  html body .st-header .st-header-nav {
    position: fixed !important;
    top: 50px !important;
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 9998 !important;
    box-sizing: border-box !important;
    background: none !important;
    background-color: transparent !important;
  }
  
  /* ハンバーガーメニューの背景を全幅に */
  html body .st-header .st-header-globalNav {
    width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  
  html body .st-header .st-header-globalNav > li {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    outline: none !important;
  }
  
  /* ハンバーガーメニューのリンクの左右スペースを除去し中央揃えに */
  html body .st-header .st-header-globalNav__link {
    padding: 15px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    text-decoration: none !important;
    color: #fff !important;
    text-align: center !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    outline: none !important;
  }
  
  html body .st-main {
    margin-top: 70px !important;
  }
}

.c-container:has(.swiper-container) .c-section:first-child *:not(a) {
  pointer-events: none;
}

.c-container:has(.swiper-container) .c-section:first-child a {
  pointer-events: auto !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

/* ページ読み込み時のフェードイン効果 */
.models-page.page-loading {
  opacity: 0;
}

.models-page.page-loaded {
  opacity: 1;
  transition: opacity 1.2s ease-in-out;
}

/* フェードイン効果の改善 - より滑らかなアニメーション */
.models-page {
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* フェードイン中は要素の操作を無効化 */
.models-page.page-loading * {
  pointer-events: none;
}

.models-page.page-loaded * {
  pointer-events: auto;
}

@media screen and (min-width: 901px) {
  /* 初期表示時の見切れ防止 - mainエリアに上部マージンを追加 */
  html body .st-main {
    margin-top: 90px !important;
  }
}

/* 下層ページのハンバーガーメニューナビゲーション z-index調整 */
html body .st-header .st-header-nav {
  z-index: 10000 !important;
}

@media screen and (max-width: 900px) {
  /* SP表示でのハンバーガーメニューナビゲーション z-index調整 */
  html body .st-header .st-header-nav {
    z-index: 10000 !important;
  }
}