@charset "UTF-8";
/* ------------------------------------------------------------------
   復旧中（暫定）静的ページ用の追加スタイル
   ベースはSPテーマCSS（sp/common/global.css, sp/common/top.css）。
   ここでは「PCでSPレイアウトを最大760pxまで広げる」対応と、
   本ページに移設した展覧会モーダルのスタイルのみを追加する。
------------------------------------------------------------------ */

body {
  background: #fff;
}

/* --- 建物写真（リンク削除） ----------------------------------------
   本家CSSは「#mainVisual .architecture a img」のようにリンク要素
   （<a>）前提で写真のサイズ（幅100%・高さ155px）を指定している。
   PDFの指示通りリンクを削除すると、この指定ごと外れて写真が実寸の
   まま表示されてしまうため、同じサイズ指定を <a> なしでも当てる。 --- */
#top #mainVisual .architecture img {
  display: inline-block;
  width: 100%;
  height: 155px;
  object-fit: cover;
}

/* --- リンクなし展覧会スライド（フォンタネージ／モンマルトル） -----
   本家CSSは「.infoText a .detail」のようにリンク要素前提でレイアウトを
   組んでいるため、リンクを外すと崩れる。.noLink に対して同じスタイルを
   複製し、見た目だけ揃える（クリックはできない） ---------------------- */
#top #mainVisual .infoTexts .infoText .noLink {
  display: block;
  width: 100%;
  text-align: right;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 37%);
}

#top #mainVisual .infoTexts .infoText .noLink .detail {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

#top #mainVisual .infoTexts .infoText .noLink .detail .image_list {
  width: 215px;
  height: 298px;
}

#top #mainVisual .infoTexts .infoText .noLink .detail .image_list li {
  width: 100%;
  height: 100%;
}

#top #mainVisual .infoTexts .infoText .noLink .detail .image_list .slick-track {
  display: flex;
}

#top #mainVisual .infoTexts .infoText .noLink .detail .image_list img {
  display: inline-block;
  width: 215px;
  height: 298px;
  object-fit: contain;
}

#top #mainVisual .infoTexts .infoText .noLink .detail .image_list .image_list_item:not(.vertical) img {
  background-color: #eee;
}

/* スライダーのドットが画像に近すぎて重なって見えるため、画像側に
   少し余白を作って離す（フィードバック対応） */
#top #mainVisual .infoTexts .infoText a .detail,
#top #mainVisual .infoTexts .infoText .noLink .detail {
  margin-right: 16px;
}

/* フォンタネージ／モンマルトルの原稿画像が横長のため、本家と同じ
   object-fit: contain のままだと上下に大きな余白ができてしまう。
   縦長の枠いっぱいに見せるため cover に変更する（要相談：トリミングされる） */
#top #mainVisual .infoTexts .infoText .noLink .detail .image_list img {
  object-fit: cover;
}

#top #mainVisual .infoTexts .infoText .noLink .detail .title {
  text-align: justify;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  line-height: 1.5;
  margin-right: 7px;
  overflow: hidden;
  color: #666;
  max-height: 230px;
  height: auto;
}

#top #mainVisual .infoTexts .infoText .noLink .date {
  font-size: 13px;
  text-align: right;
}

#top #mainVisual .infoTexts .infoText .noLink .date span {
  font-size: 9px;
}

/* --- PC表示（768px以上） -------------------------------------------
   フィードバック対応：本来のPC専用レイアウト（画像+テキスト+
   建物写真を横並びにし、三角モザイクで縁取るデザイン）に作り替えるのは
   大掛かりな改修になるため、提示された代替案の通り、
   「320px設計のページ全体（三角画像の配置を含む）をそのまま画面幅に
   応じて拡大する」方式を採用。拡大率の計算は index.html 内のJS
   （fitPcStage）で行い、ここではその受け皿となる箱を用意するのみ。
   767px以下（スマホ）は今まで通りfluidなSPレイアウトのまま。 --- */
@media screen and (min-width: 768px) {
  body {
    background: #f7f5f4;
  }

  #pcStage {
    margin: 0 auto;
    overflow: hidden;
  }

  #wrapper {
    /* 本家CSS（sp/common/global.css）に width:100% !important があるため、
       同じ強さで上書きしないと320px設計のまま拡大できない */
    width: 420px !important;
    transform-origin: top left;
    background: #fff;
    box-shadow: 0 0 24px rgba(0, 0, 0, .08);
    /* スクロール時にtransform:scaleした内容の一部が描画されない
       （Chromeの合成レイヤーの不具合）ことがあるため、専用の描画
       レイヤーとして固定し、常に再描画されるようにする */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* object-fit を使っている画像自体もスクロール時に再描画が
     漏れることがあるため、個別にレイヤー化する */
  #wrapper img {
    transform: translateZ(0);
  }
}

/* --- 美術館について（原稿差し替え） -------------------------------
   建物写真自体は #mainVisual 内の .architecture（本家そのまま）が表示。
   ここはその下に続く紹介文のみのスタイル。 ------------------------- */
#aboutMuseum .aboutLead {
  font-family: "Ryumin Regular KL", "Hiragino Mincho ProN", serif;
  font-size: 14px;
  line-height: 1.7;
  color: #cf0f28;
  margin-bottom: 12px;
}

#aboutMuseum .aboutText {
  font-size: 12px;
  line-height: 1.9;
  color: #666;
  margin-bottom: 1em;
}

/* --- Café 1894 -------------------------------------------------- */
/* 本家はサムネイルを <a> で包んでサイズ指定しているが、暫定ページではリンクを
   外しているため、img に同等のサイズ指定を当てる */
#top #facilityInfo .facilityList .facilityListItem .facilityThumb > img:not(.facilityLogo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Café 1894 の詳細テキスト ----------------------------------- */
.facilityDetail {
  font-size: 12px;
  line-height: 1.9;
  color: #666;
  margin-top: 12px;
}

.facilityDetail dl {
  margin-top: 1em;
}

.facilityDetail dt {
  color: #cf0f28;
  margin-top: .8em;
}

.facilityDetail dd {
  margin-left: 1em;
}

.facilityDetail .note {
  font-size: 11px;
  color: #888;
}

/* --- 展覧会モーダル（exhibition / small-gallery から移設） ------- */
.exbModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .75);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.exbModal.is-open {
  display: block;
}

.exbModal .exbModalInner {
  background: #fff;
  max-width: 640px;
  margin: 24px auto;
  padding: 40px 24px 32px;
  position: relative;
}

.exbModal .exbModalClose {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #cf0f28;
  cursor: pointer;
  padding: 4px 8px;
}

.exbModal .exbModalImg img {
  width: 100%;
  height: auto;
}

.exbModal h3 {
  font-family: "Ryumin Regular KL", "Hiragino Mincho ProN", serif;
  font-size: 18px;
  line-height: 1.5;
  color: #cf0f28;
  margin: 16px 0 4px;
}

.exbModal .sub {
  font-size: 13px;
  color: #cf0f28;
  margin-bottom: 8px;
}

.exbModal .date {
  font-size: 12px;
  color: #666;
  margin-bottom: 16px;
}

.exbModal .copy {
  font-size: 12px;
  line-height: 1.9;
  color: #666;
}

.exbModal .detailList {
  margin-top: 20px;
  border-top: 1px solid #e0d5d5;
  font-size: 12px;
  line-height: 1.8;
}

.exbModal .detailList dt {
  color: #cf0f28;
  margin-top: 12px;
}

.exbModal .detailList dd {
  color: #666;
  margin-left: 1em;
}

.exbModal .modalLink {
  margin-top: 20px;
}

.exbModal .modalLink a {
  color: #cf0f28;
  text-decoration: underline;
}

body.is-modalOpen {
  overflow: hidden;
}

/* --- 企画展モーダル（カフェ展など）のダークテーマ ------------------
   本家の /exhibition/ 側モーダルは白い箱ではなく、背景を透明にして
   暗いオーバーレイに直接白文字を乗せるデザイン（本家CSS実測に基づく）。
   小企画展（モネとルドン）側は上の白テーマのまま。 ------------------- */
.exbModal--dark .exbModalInner {
  background: transparent;
}

.exbModal--dark .exbModalClose {
  color: #fff;
}

.exbModal--dark h3,
.exbModal--dark .sub,
.exbModal--dark .session,
.exbModal--dark .copy,
.exbModal--dark .modalLink a {
  color: #fff;
}

.exbModal--dark .session {
  font-size: 12px;
  line-height: 1.8;
  text-align: left;
  margin: 16px 0;
}

.exbModal--dark .modalLink a {
  text-decoration: underline;
}