/* --- カーテン（中央から両サイドに黒がスライド消滅） --- */
.curtain-overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: flex;
}

.curtain-panel {
  flex: 1;
  background: #111;
  transition: transform 1.2s cubic-bezier(.8, 0, .2, 1);
  will-change: transform;
}

.curtain-overlay.open {
  pointer-events: none;
}

.curtain-overlay.open .curtain-panel.left {
  transform: translateX(-100vw);
}

.curtain-overlay.open .curtain-panel.right {
  transform: translateX(100vw);
}

/* --- ページ固有のトップバー変数（artは元75px） --- */
:root {
  --topbar-height: 54px;
  --topbar-blur: 4px;
  --topbar-bg: rgba(255, 255, 255, 0.35);
}

/* --- 背景画像: 最初は全画面、fixedで上帯になる --- */
body {
  background: #fff;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  transition: 0.8s;
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('../images/art/art_main.webp') center center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
  transition: height 1.0s cubic-bezier(.77, 0, .25, 1), box-shadow 0.5s;
  box-shadow: none;
}

/* --- ナビゲーション（見た目・固定は style.css の共通を使用） --- */


.art-menu.fixed { /* 上部固定：共通で適用 */ }


.art-menu .menu-item{
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}


.art-menu .menu-item:hover{
  opacity: .95;
  border-bottom: 2px solid rgba(255,255,255,.65);
}
/* ===== Art typography (art-leaning) ===== */
.art-title{
  font-size: var(--work-h1-size);
  letter-spacing: var(--work-h1-letter);
  font-weight: 600;
  margin: 10px 0 36px;
  text-align: center;
}

.art-item h2{
  font-size: var(--work-h2-size);
  letter-spacing: var(--work-h2-letter);
  font-weight: 600;
  margin: 18px 0 10px;
  text-align: center;
}

.art-desc{
  font-size: .9rem;                       /* Artは少し小さめ */
  letter-spacing: .08em;
  line-height: 1.65;
  opacity: .78;
  text-align: center;
  margin: 10px 0 0;
}


.art-item {
margin-bottom: 20%;

}
/* --- タイトルなど --- */
.art-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1em;
}

.art-item h2 {
  text-align: center;
  font-size: 1.4rem;
  margin: 0.5em 0;
}

/* --- コンテンツ領域（show で表示） --- */
.art_main-area {
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;
  top: 100vh;
  bottom: 0;
  z-index: 20;
  overflow-y: auto;
  transition: top 1.0s cubic-bezier(.7, .1, .3, 1), opacity 0.6s;
  opacity: 0;
  pointer-events: none;
  background: none;
}

/* ※ top は style.css の [data-content-scroll].show が制御 */
.art_main-area.show {
  opacity: 1;
  pointer-events: auto;
}

.grid {
  max-width: 1050px;
  margin: 0 auto 0;
  padding: 24px 12px 60px;
  /*-- background: rgba(255, 255, 255, 0.98); --*/
}

.grid img,
.grid .frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  background: #23201c;
  box-shadow: 0 2px 12px #0005;
  object-fit: cover;
  display: block;
  position: relative;
}

/* 画像が無い時はプレースホルダー表示 */
.grid img:not([src]),
.grid img[src=""] {
  background: repeating-linear-gradient(135deg, #2d2a25 0 16px, #39342d 16px 32px);
  border: 2.2px dashed #8a7f61;
  box-shadow: 0 0 0 1.7px #fff3 inset;
  min-height: 60px;
  content: "";
}

/* --- カルーセル --- */
.art-carousel {
  position: relative;
  width: 50vw;
  margin: 0 auto 16px auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.art-carousel-track {
  display: flex;
  transition: transform 0.6s ease;
  width: 50vw;
  max-width: 900px;
  aspect-ratio: 5 / 4;
}

.art-carousel-track img {
  width: 50vw;
  max-width: 900px;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.art-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 2rem;
  color: #a38c54;
  cursor: pointer;
  z-index: 10;
}

.art-carousel-prev { left: 10px; }
.art-carousel-next { right: 10px; }

/* --- スマホ縦向け（重複ネストを解消して整理） --- */
@media (max-width: 1023px) and (orientation: portrait) {
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .art-carousel {
    height: 60vh;
    width: 100vw;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }

  .art-carousel-track {
    display: flex;
    width: 100vw;
    height: 100%;
    transition: transform 0.3s ease;
    max-width: none !important;
  }

  .art-carousel-track picture {
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    display: block;
    margin: 0;
    padding: 0;
  }

  .art-carousel-track picture img {
    width: 100vw;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}