/* サイト全体で使うなら html/ body に */
html{
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* 初期は非表示（レイアウトは保持） */

.works-section-top .works-number{
  visibility: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}
.works-section-top .works-number span
{
  opacity: 0;
  display: inline-block;
  transform: translate(-10px, 14px); /* 左＆下から */
  animation: riseFromLeft 0.6s ease-out forwards;
}
@keyframes riseFromLeft {
  0%   { opacity: 0; transform: translate(-10px, 14px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

img.works-text-s.show,
img.managed.property-text-p.show{
   opacity: 1;
}
img.works-text-s,
img.managed.property-text-p{
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* ===== case-01～14の物件画像フェードインアニメーション（統合版） ===== */

/* 初期状態：非表示 */
#case-01 .flip-stack__after,
#case-02 .flip-stack__after,
#case-03 .flip-stack__after,
#case-04 .flip-stack__after,
#case-05 .flip-stack__after,
#case-06 .flip-stack__after,
#case-07 .flip-stack__after,
#case-08 .flip-stack__after,
#case-09 .flip-stack__after,
#case-10 .flip-stack__after,
#case-11 .flip-stack__after,
#case-12 .flip-stack__after,
#case-13 .flip-stack__after--pc,
#case-13 .flip-stack__after--mobile,
#case-14 .flip-stack__after {
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* showクラスでフェードイン */
#case-01 .flip-stack__after.show,
#case-02 .flip-stack__after.show,
#case-03 .flip-stack__after.show,
#case-04 .flip-stack__after.show,
#case-05 .flip-stack__after.show,
#case-06 .flip-stack__after.show,
#case-07 .flip-stack__after.show,
#case-08 .flip-stack__after.show,
#case-09 .flip-stack__after.show,
#case-10 .flip-stack__after.show,
#case-11 .flip-stack__after.show,
#case-12 .flip-stack__after.show,
#case-13 .flip-stack__after--pc.show,
#case-13 .flip-stack__after--mobile.show,
#case-14 .flip-stack__after.show {
  opacity: 1;
}

/* --- セクション（下線はそのままでOK） --- */
.works-section-top{
  padding: 15em 0em 10em;
  position: relative;
}
.works-section-top::after{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  bottom:0;
  height:1px;
  background:#ccc;
}

/* --- 基準箱：ここを基準に%で重ねる --- */
.works-header{
  position: relative;               /* 追加：絶対配置の基準にする */
  width: 25vw; /* 画像ブロックのレスポンシブ幅 */
  margin-inline: auto;
  display: block;                   /* flexは不要（中央寄せはwidth＋marginで） */
  margin: 0 auto;
}

/* WORKS画像は基準の中で100%に */
img.works-text{
  display:block;
  width:100%;
  height:auto;
}

/* ルーペ：px→%へ。画像比率に追従 */
img.works-text-s{
  width: 20vw;
  position: absolute;
  top: -9.2vw;
  left: 19.5vw;
  pointer-events: none;
}

/* 01–12 も同じ基準箱で絶対配置 */
.works-number{
  position:absolute;
  left: 125%;
  top: 85%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  font-family: var(--font-en);
  white-space: nowrap;     /* ← これで縦にならない */
}

.works-case{
  margin: 0;
}
.works-case:first-of-type { margin-top: 10em; }  /* 先頭だけ必要なら残す */
.works-section-top + .works-case { margin-top: 5em; }

.works-case__flex{
  --gap: 32px;                 /* 余白は好みで */
  display: flex;
  gap: var(--gap);
  align-items: stretch;          /* ← これで左右のカラムが同じ高さになる */
  align-items: center;     /* ← これがポイント */
}

.works-case__media{
  flex: 0 0 calc((100% - var(--gap)) * 0.52);
  max-width: calc((100% - var(--gap)) * 0.52);
  min-width: 0;
  position: relative;          /* 既存維持 */
  align-items: center;           /* ← 縦方向の中央寄せ */
  align-self: center;      /* 念のため。親が stretch でも効く */
  display: block;          /* 以前に display:flex を入れていたら外す */
}
/* 画像は入れ物いっぱい（固定幅はNG） */
.works-case__media img{
  width: 100%;
  height: auto !important; /* ← ここ重要（height:100% を無効化） */
  max-height: 100%;
  display: block;
  object-fit: cover;
  display: block;
}

.works-case__body{
  min-width: 0;                /* ← テキストの見切れ防止に必須 */
  box-sizing: border-box;
  /* 小さな画面でpaddingが効き過ぎないように（任意） */
  padding: 3em 13em 3em;
  font-family: var(--font-ja);
  font-size: 0.68vw;
}
/* 画像の左横に青帯（外側にはみ出すタイプ） */

p.works-case__no{
  font-size: 2em;
  margin: 0;
  transform: translateY(8px);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}
.works-case__title{
  font-size: 1.8em;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-weight:400;
}
.works-case__lead{
  line-height: 1.9;
  font-size: 1.1em;
  font-family:
    "Yu Gothic Medium",     
    "Yu Gothic",            
    "YuGothic",             
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Meiryo", "Noto Sans JP",
    system-ui, -apple-system, "Segoe UI", sans-serif;
}
.works-case__meta{
  font-family:
    "Yu Gothic Medium",     
    "Yu Gothic",            
    "YuGothic",             
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Meiryo", "Noto Sans JP",
    system-ui, -apple-system, "Segoe UI", sans-serif;
}
.works-case__meta-row{
  display: flex;
  align-items: baseline;
  gap: 2em;
  padding-top: 5px;
}
.works-case__meta-desc span{
  font-size: 1.5em;
}

dd {
  display: block;
  margin-inline-start: 0px;
  unicode-bidi: isolate;
}

.works-case__meta-term{       /* dt = 左列（固定幅） */
  flex: 0 0 4.5em;            /* ← ここを調整：例 90px / 8em / 10ch など */
  margin: 0;
  white-space: nowrap;        /* ラベルを折り返さない */
  text-align: left;
}

.works-case__meta-desc{       /* dd = 右列（残り幅） */
  flex: 1 1 0;
  margin: 0;
}

.works-case__media { margin: 0; }

/* 3) 画像の下に"ベースライン隙間"が出ないように */
.works-case__media img { display: block; }

#case-11{
  padding-bottom: 10em;  /* 好みで数値調整 */
  border-bottom: 1px solid#ccc;
}

#case-14{
  padding-bottom: 10em;  /* 好みで数値調整 */
}

/* --- セクション（下線はそのままでOK） --- */
.managed.property-section{
  padding: 10em 0em;
  position: relative;
  --line-offset: clamp(12px, 2vw, 28px); /* 上端からどれだけ下げるか */
}

/* --- 基準箱：ここを基準に%で重ねる --- */
.managed.property-header{
  position: relative;
  width: 250px;
  margin-inline: auto;
  display: block;
  margin: 0 auto;
  padding-top: 0.5em;
}

/* WORKS画像は基準の中で100%に */
img.managed.property-text{
  display:block;
  width:100%;
  height:auto;
}

/* ルーペ：px→%へ。画像比率に追従 */
img.managed.property-text-p{
  position: absolute;
  left: 121%;
  top: 60%;
  width: 230px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.managed.property-text-top{
  position: absolute;
  left: 55%;
  top: -60%;
  transform: translate(-50%, -50%);
  font-size: 1.8em;
  font-family: var(--font-en);
  white-space: nowrap;
  font-weight: 500;
}

.managed.property-section::after{
  content: "";
  position: absolute;
  left: 0%;
  right: 0%;          /* 端の余白は好みで */
  top: var(--line-offset);
  height: 1px;
  background: #ccc;
  pointer-events: none;
  z-index: 0;         /* テキストや画像より背面に */
}

.works-case__media02{
  flex: 0 0 calc((100% - var(--gap)) * 0.52);
  max-width: calc((100% - var(--gap)) * 0.52);
  min-width: 0;
  position: relative;          /* 既存維持 */
  align-items: center;           /* ← 縦方向の中央寄せ */
  align-self: center;      /* 念のため。親が stretch でも効く */
  display: block;          /* 以前に display:flex を入れていたら外す */
  margin: 0;
}
/* 画像は入れ物いっぱい（固定幅はNG） */
.works-case__media02 img{
  width: 100%;
  height: auto !important; /* ← ここ重要（height:100% を無効化） */
  max-height: 100%;
  display: block;
  object-fit: cover;
  display: block;
}
.person-image11 img,
.person-image12 img{
  top: 105px;
}

/* case-01 のメディア枠を明示的な高さで制御できるようにする */
#case-01 .works-case__media { position: relative; }

/* Flipbook 本体を親いっぱいにフィット */
#flipbook-case01 { width: 100%; height: 100%; }

#case-01 .works-case__media.is-synced {
  min-height: 0 !important;
}

/* 画像枠と干渉しない最低限 */
.works-case__media{ position: relative; overflow: hidden; }

/* ---- Page-turn core ---- */
.page-turn{
  --p: 0;                         /* 進捗 0→1 をJSで更新 */
  --shadowOpacity: .35;           /* 折り目の影の強さ */
  --before: none;                 /* JSが url("…") を入れる */
  --after:  none;
  position: relative;
  width: 100%;
  perspective: 1600px;
}

.page-turn__inner{
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
}

/* 下地：After を全面に敷く */
.page-turn__after{
  position: absolute;
  inset: 0;
  background-image: var(--after);
  background-size: cover;
  background-position: center;
}

/* めくれる1枚（表裏2面を持つ） */
.page-turn__page{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;                 /* ← 左端（青帯側）から */
  transform: rotateY(calc(-180deg * var(--p)));
  clip-path: inset(0 calc(100% * var(--p)) 0 0); /* 見える幅も減らす */
}

/* data-origin="right" の場合（右からめくる） */
.page-turn[data-origin="right"] .page-turn__page{
  transform-origin: right center;
  transform: rotateY(calc(180deg * var(--p)));
  clip-path: inset(0 0 0 calc(100% * var(--p)));
}

/* 表面＝Before / 裏面＝After */
.page-turn__face{
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-size: cover;
  background-position: center;
}
.page-turn__front{ background-image: var(--before); }
.page-turn__back { transform: rotateY(180deg); background-image: var(--after); }

/* 折り目の影（"厚み"の演出） */
.page-turn__page::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.25) 14%,
    rgba(0,0,0,0) 44%);
  opacity: var(--shadowOpacity);
  mix-blend-mode: multiply;
}

/* アニメ苦手設定の人にはフェードに置換 */
@media (prefers-reduced-motion: reduce){
  .page-turn{ perspective: none; }
  .page-turn__page{ transform: none !important; clip-path: none !important; }
  .page-turn__front{ opacity: 1; transition: opacity .35s ease; }
  .page-turn[data-done="1"] .page-turn__front{ opacity: 0; }
}

/* ── シーム対策：わずかに重ねる・前後のZ差をつける ── */
.page-turn{ 
  --seam: 0.75px; /* 0.5〜1pxで微調整 */
  isolation: isolate;             /* 別スタッキングにして干渉回避 */
  perspective: 1600px;            /* 念のため明示 */
}

/* 背景の割り当てを強制：front=Before / back=After / base=After */
.page-turn__after{
  position:absolute; inset:0;
  background-image: var(--after) !important;
  background-size: cover; background-position: center;
  z-index: 1;
  transform: translateZ(-0.05px);
  will-change: transform;
}
.page-turn__face{ 
  position:absolute; inset:0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(0); 
  background-size: cover; background-position: center;
}
.page-turn__front{ 
  background-image: var(--before) !important;   /* ← 強制 */
}
.page-turn__back{  
  transform: rotateY(180deg);
  background-image: var(--after)  !important;   /* ← 強制 */
}

/* めくれる1枚（表裏2面を持つ） */
.page-turn__page{
  position:absolute; inset:0;
  z-index: 2;
  transform-style: preserve-3d;
  /* 左起点：前面に軽く押し出し＆"食い込み"で隙間隠し */
  transform: rotateY(calc(-180deg * var(--p))) translateZ(0.05px);
  clip-path: inset(0 max(calc(100% * var(--p) - var(--seam)), 0px) 0 0);
  will-change: transform, clip-path;
}

/* 右起点（data-origin="right"）の反転版 */
.page-turn[data-origin="right"] .page-turn__page{
  transform: rotateY(calc(180deg * var(--p))) translateZ(0.05px);
  clip-path: inset(0 0 0 max(calc(100% * var(--p) - var(--seam)), 0px));
}

/* 折り目の影：わずかに強め（シーム馴染ませ） */
.page-turn__page::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.28) 14%,
    rgba(0,0,0,0)   46%);
  opacity: calc(.35 * (1 - var(--p)));
  mix-blend-mode: multiply;
}
.page-turn[data-origin="right"] .page-turn__page::before{
  background: linear-gradient(270deg,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.28) 14%,
    rgba(0,0,0,0)   46%);
}

.flipbook .stf__wrapper{ padding-bottom:0 !important; height:100% !important; }
.flipbook{ width:100%; height:100%; }

/* 重ね構造 */
.flip-stack{ position:relative; width:100%; }
.flip-stack__after{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;     /* 今の見え方を維持（全幅でトリミング） */
  z-index:1; pointer-events:none;
}

/* Turn.js 側：必ず透明にして下のAfterを見せる */
.turnjs-magazine{ position:relative; z-index:2; background:transparent !important; }
.turnjs-magazine .turn-page{ width:100%; height:100%; background:transparent !important; }
.turnjs-magazine img{ display:block; width:100%; height:100%; object-fit:cover; }

/* 初期化前に2枚目以降が縦に見えないように */
.turnjs-magazine:not(.is-ready) .turn-page:not(:first-child){ display:none; }

/* #turn-baf 用：裏面まで必ず透明に */
#turn-baf,
#turn-baf .page,
#turn-baf .page-wrapper,
#turn-baf .page > div{
  background: transparent !important;
}
.turnjs-magazine.is-mirror{ transform: scaleX(-1); transform-origin:center; }
.turnjs-magazine.is-mirror img{ transform: scaleX(-1); }

/* 管理物件の画像は通常配置のまま（めくり機能なし） */
#baf-12 .flip-stack__after,
#baf-13 .flip-stack__after--pc,
#baf-13 .flip-stack__after--mobile,
#baf-14 .flip-stack__after {
  display:block;
  width:100%;
  height:auto;
  position: relative;  /* static ではなく relative に */
  object-fit: cover;
  /* opacity は初期状態で 0、showクラスで 1 になる */
}



/* --- turn.jsが3Dを使えるようにする土台 --- */
.works-case__media, .flip-stack{
  -webkit-perspective: 1600px;
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* 親の transform / filter があるとiOSで3Dが死にやすいので避ける */
.works-case__media, .flip-stack, .turnjs-magazine{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* アニメ層（GPUキック） */
.turnjs-magazine{
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 各ページも3D属性を付与 */
.turnjs-magazine .page,
.turnjs-magazine .turn-page{
  background: transparent !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* After画像は下地に全面配置 */
.flip-stack{ position: relative; }
.flip-stack__after{
  position: absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover; display:block;
}

/* 初期化完了まで"めくりレイヤー"を隠す（発火だけ先行するのを防ぐ） */
.turnjs-magazine{ visibility: hidden; }
.turnjs-magazine.is-ready{ visibility: visible; }

/* Afterを下地にしている枠の高さが決まるまでの保険（iOSのチラ見え防止） */
.flip-stack{ contain: layout paint; }
/* 初期化完了まで非表示にして、画像より先に"めくり"が見えるのを防ぐ */
.turnjs-magazine{ visibility: hidden; }
.turnjs-magazine.is-ready{ visibility: visible; }

/* Afterを下地で敷いて高さ安定（iOSのチラ見え防止） */
.flip-stack{ contain: layout paint; }

/* turn.js のページは完全に透明（下の After を見せる） */
.turnjs-magazine,
.turnjs-magazine .turn-page,
.turnjs-magazine .page,
.turnjs-magazine .page-wrapper{
  background: transparent !important;
}

/* 初期化完了まで非表示（チラつき防止） */
.turnjs-magazine { visibility: hidden; }
.turnjs-magazine.is-ready { visibility: visible; }

/* いまの帯は使わない */
.works-case__accent{ display:none; }

/* レイアウトの余白は残す（帯の分だけ右にオフセット） */
.works-case{
  position: relative;
  padding-left: var(--accent-w);
}

/* 画像ブロックの高さに合わせて帯を描く */
.works-case__media{
  position: relative;
  overflow: visible;  /* 疑似要素を外側へ出すため */
}
.works-case__media::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;                         /* ← これで "画像(=figure) の高さ" に追従 */
  left: calc(-1 * var(--accent-w)); /* 画像の左外側に帯を出す */
  width: 12.5vw;
  background: #54c0c0;
  pointer-events:none;
  z-index:0;
}

/* 中身は帯の上に */
.works-case__media,
.works-case__body{ position:relative; z-index:1; }

/* 既存：帯は figure の高さに追従 */
.works-case__media{ position: relative; overflow: visible; }
.works-case__media::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left: calc(-1 * var(--accent-w));     /* ←通常は左側 */
  width: var(--accent-w);
  background: var(--accent-color);
  pointer-events:none; z-index:0;
}

/* 02 / 04 / 06 / 08 / 10 は "右側" に変更 */
#case-02, #case-04, #case-06, #case-08, #case-10{
  padding-left: 0;
  padding-right: var(--accent-w);       /* 帯ぶんの余白を右へ */
}
#case-02 .works-case__media::before,
#case-04 .works-case__media::before,
#case-06 .works-case__media::before,
#case-08 .works-case__media::before,
#case-10 .works-case__media::before{
  left: auto;
  right: calc(-1 * var(--accent-w));    /* 帯を右外側に出す */
}

:root{
  --accent-color:#54c0c0;
  --accent-w: 7vw;
  --accent-w-sm: 30px;                  /* SP用の帯幅（好みで） */
  --case-gutter: 16px;                  /* セクションの左右余白 */
}

/* PC：これまで通り figure 基準でOK */
.works-case__media{ position:relative; overflow:visible; }
.works-case__media::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left: calc(-1 * var(--accent-w));
  width: var(--accent-w);
  background: var(--accent-color);
  z-index:0; pointer-events:none;
}
/* 右帯のケース */
#case-02 .works-case__media::before,
#case-04 .works-case__media::before,
#case-06 .works-case__media::before,
#case-08 .works-case__media::before,
#case-10 .works-case__media::before{
  left:auto; right:calc(-1 * var(--accent-w));
}

:root{
  --accent-color:#54c0c0;
  --accent-w-sm: 10px;    /* SPの帯幅（お好みで） */
  --case-gutter: 16px;    /* セクション左右の余白 */
}

/* 画像方式(.works-case__media::before)／flex方式(.works-case__flex::before)どちらでも無効化 */
#case-12 .works-case__media::before,
#case-13 .works-case__media::before,
#case-14 .works-case__media::before,
#case-12 .works-case__flex::before,
#case-13 .works-case__flex::before,
#case-14 .works-case__flex::before{
  content: none !important;
}

/* spanで帯を置いている場合も念のため消す */
#case-12 .works-case__accent,
#case-13 .works-case__accent,
#case-14 .works-case__accent{
  display: none !important;
}

/* 背景グラデで帯を描いている場合の抑止 */
#case-12 .works-case__flex,
#case-13 .works-case__flex,
#case-14 .works-case__flex{
  background-image: none !important;
}

/* 帯ぶんのオフセットを戻す（左右パディングのリセット） */
#case-12.works-case,
#case-13.works-case,
#case-14.works-case{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* レスポンシブ1600以上 */
@media (min-width: 1600px){
  .works-number{
    font-size: 1.8em;
  }
  .managed.property-text-top {
    font-size: 2em;
  }
  .managed.property-header {
    width: 350px;
  }
  img.managed.property-text-p {
    left: 115%;
    top: 60%;
    width: 280px;
  }
  .works-case__body{
    font-size: 0.72vw;
  }
}

@media (min-width: 1280px) and (max-width: 1280px) {
  .person-image11 img,
  .person-image12 img{
    top: 96px;
  }
}

/* レスポンシブ1024～1280 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .works-case__media,
  .works-case__media02{
    flex: 0 0 calc((100% - var(--gap)) * 0.53);
    max-width: calc((100% - var(--gap)) * 0.53);
  }
  .person-image11 img, .person-image12 img {
    top: 79px;
  }
}

/* レスポンシブ768~1024 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .works-case__media,
  .works-case__media02{
    flex: 0 0 calc((100% - var(--gap)) * 0.5);
    max-width: calc((100% - var(--gap)) * 0.5);
  }
  .works-case__body {
    min-width: 0;
    box-sizing: border-box;
    padding: 2em 8em 2em;
    font-family: var(--font-ja);
    font-size: 0.72vw;
  }
  .works-header {
    width: 250px;
  }
  img.works-text-s {
    width: 200px;
  }
  .works-number {
    font-size: 1.2em;
  }
  .managed.property-text-top {
    font-size: 1.5em;
  }
  .managed.property-header {
    width: 200px;
  }
  img.managed.property-text-p {
    width: 195px;
    left: 124%;
  }
  .person-image11 img, .person-image12 img {
    top: 80px;
  }
}

/* レスポンシブ600～767 */
@media (max-width: 767.98px){
  .works-section-top {
    padding: 15em 0em 10em;
    position: relative;
  }
  
  .works-header {
    width: 200px;
  }
  
  img.works-text-s {
    width: 160px;
  }
  
  .works-number {
    font-size: 1em;
  }
  
  img.managed.property-text-p {
    left: 107%;
    top: 65%;
    width: 160px;
  }
  
  /* ★ フレックスコンテナを縦並びに */
  .works-case__flex {
    align-items: flex-start;
    flex-direction: column !important; /* ← !important で強制 */
    padding: 0em 1em;
  }
  
  /* ★ 偶数ケースも通常の縦並びに統一（reverseを無効化） */
  .works-case__flex--rev {
    flex-direction: column !important; /* ← column-reverse を上書き */
  }
  
  .works-case__media,
  .works-case__media02 {
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0;
    order: 1; /* ← 画像を先頭に */
  }
  
  .works-case__body {
    padding: 3em 5em;
    font-family: var(--font-ja);
    font-size: 1.5vw;
    order: 2; /* ← テキストを2番目に */
  }

  .works-case__flex {
    --gap: 0px;
  }

  #case-11 {
    padding-bottom: 3em;
  }
  
  .managed.property-text-top {
    font-size: 1.5em;
  }
  
  :root {
    --accent-color: #54c0c0;
    --accent-w: clamp(45px, 9vw, 50px);
    --accent-w-sm: 30px;
    --case-gutter: 16px;
  }

  /* すべてのケースで左からめくれるように統一 */
  
  /* 偶数ケース（02,04,06,08,10）の右側配置を解除 */
  #case-02, #case-04, #case-06, #case-08, #case-10 {
    padding-left: var(--accent-w) !important;
    padding-right: 0 !important;
    margin-top: 3em;
  }

  #case-03, #case-05, #case-07, #case-09, #case-11 {
    margin-top: 3em;
  }
  
  /* 偶数ケースの帯を左側に統一 */
  #case-02 .works-case__media::before,
  #case-04 .works-case__media::before,
  #case-06 .works-case__media::before,
  #case-08 .works-case__media::before,
  #case-10 .works-case__media::before {
    left: calc(-1 * var(--accent-w)) !important;
    right: auto !important;
  }

  /* 奇数：01,03,05,07,09,11 → 右へ */
  #case-01 .works-case__body,
  #case-03 .works-case__body,
  #case-05 .works-case__body,
  #case-07 .works-case__body,
  #case-09 .works-case__body,
  #case-11 .works-case__body {
    transform: translateX(-22px);
  }

  /* 偶数：02,04,06,08,10 → 同じく右へ統一 */
  #case-02 .works-case__body,
  #case-04 .works-case__body,
  #case-06 .works-case__body,
  #case-08 .works-case__body,
  #case-10 .works-case__body {
    transform: translateX(-22px); /* ← 左へではなく右へ統一 */
  }
}

/* レスポンシブ599.98以下 */
@media (max-width: 599.98px){
  .works-section-top {
    padding: 10em 0em 3em;
    position: relative;
  }
  
  .works-case__body {
    padding: 3em 5em;
    font-family: var(--font-ja);
    font-size: clamp(7px, 1.8vw, 8px);
    order: 2; /* ← テキストを2番目に */
  }
  
  .works-case__media,
  .works-case__media02 {
    order: 1; /* ← 画像を先頭に */
  }
  
  /* フレックス方向を強制的に統一 */
  .works-case__flex {
    flex-direction: column !important;
  }
  
  .works-case__flex--rev {
    flex-direction: column !important; /* ← reverseを無効化 */
  }
  
  .managed.property-text-top {
    position: absolute;
    left: 55%;
    top: -60%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    font-family: var(--font-en);
    white-space: nowrap;
  }
  
  .managed.property-header {
    position: relative;
    width: 120px;
    margin-inline: auto;
    display: block;
    margin: 0 auto;
    padding-top: 0.5em;
  }
  
  img.managed.property-text-p {
    position: absolute;
    left: 116%;
    top: 2%;
    width: 100px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  
  .works-header {
    width: 120px;
  }
  
  img.works-text-s {
    width: 85px;
    position: absolute;
    top: -37px;
    left: 96px;
  }
  
  .works-number {
    font-size: 0.8em;
  }
  
  img.managed.property-text-p {
    left: 123%;
    top: 63%;
    width: 115px;
  }
  
  .managed.property-section {
    padding: 5em 0em 3em;
  }
  
  #case-14 {
    padding-bottom: 3em;
  }
}

@media (max-width: 767.98px) {
  .person-image11 img, .person-image12 img {
    top: 70px;
  }
}

/* レスポンシブ600以下 */
@media(max-width: 599.98px) {
  .person-image11 img,
  .person-image12 img{
    top: 75px;
  }
}

/* レスポンシブ447.98以下　人調整フッター付近 */
@media(max-width: 447.98px){
  .person-image11 img,
  .person-image12 img{
    top: 153.5px;
  }
}

/* レスポンシブ447.98以下　人調整フッター付近 */
@media(min-width: 1600px){
  .person-image11 img,
  .person-image12 img{
    top: 153.5px;
  }
}

/* ===== turn.js / 画像ヒット制御 ===== */
/* 画像はイベントを受けない（DnD/選択とも無効） */
.turnjs-magazine img,
.flip-stack__after{
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* コンテナ側がイベントを受け取る（パン/ズーム抑止 & 見た目） */
.turnjs-magazine,
.flip-stack{
  touch-action: none !important;  /* Chrome/Edge のパンを抑止 */
  cursor: grab;
}
.turnjs-magazine:active{ cursor: grabbing; }

/* ページ要素は必ずイベントを受け取れるように */
.turnjs-magazine .turn-page,
.turnjs-magazine .page,
.turnjs-magazine .page-wrapper{
  pointer-events: auto !important;
}

/* スタッキング順・干渉回避 */
.flip-stack{
  position: relative;
  isolation: isolate;
  z-index: 0;
}
.turnjs-magazine{
  position: relative;
  z-index: 10;            /* 画像より前面に */
}
.works-case__media{
  isolation: isolate;     /* 近傍要素の重なり干渉を防止 */
}

@media (max-width: 767.98px) {
  #case-02 .turnjs-magazine,
  #case-04 .turnjs-magazine,
  #case-06 .turnjs-magazine,
  #case-08 .turnjs-magazine,
  #case-10 .turnjs-magazine {
    transform: none !important;
  }
  
  #case-02 .turnjs-magazine img,
  #case-04 .turnjs-magazine img,
  #case-06 .turnjs-magazine img,
  #case-08 .turnjs-magazine img,
  #case-10 .turnjs-magazine img {
    transform: none !important;
  }
}

/* ===== ケース1専用：指のスワイプアイコン ===== */

/* 基本スタイル */
.swipe-indicator {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  animation: swipeHint 2s ease-in-out infinite;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}

/* デフォルトは両方非表示 */
.swipe-indicator--pc,
.swipe-indicator--mobile {
  display: none;
}

/* PC用：写真の右側外（下寄せ） */
@media (min-width: 768px) {
  .swipe-indicator--pc {
    display: block;
    width: 18%!important;
    height: auto;
    top: auto;
    bottom: 2%;
    left: 99%;
    margin-left: 20px;
  }
  
  /* モバイル用は完全非表示 */
  .swipe-indicator--mobile {
    display: none !important;
  }
}

/* モバイル用：写真の上側外（右寄せ） */
@media (max-width: 767.98px) {
  .swipe-indicator--mobile {
    display: block;
    width: 25%!important;
    height: auto;
    top: -20%;
    bottom: auto;
    left: auto;
    right: 0%;
    margin-top: -10px;
  }
  
  /* PC用は完全非表示 */
  .swipe-indicator--pc {
    display: none !important;
  }
}

/* アニメーション */
@keyframes swipeHint {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ページがめくられたら非表示 */
#case-01 .flip-stack.flipped .swipe-indicator {
  opacity: 0;
  pointer-events: none;
}

/* 初期化中は非表示 */
#case-01 .turnjs-magazine:not(.is-ready) ~ .swipe-indicator {
  opacity: 0;
}

/* works-case__media を overflow: visible に */
#case-01 .works-case__media {
  overflow: visible !important;
  position: relative;
}

/* flip-stack も overflow: visible に */
#case-01 .flip-stack {
  overflow: visible !important;
  position: relative;
}

/* ===== case-13専用：PCとモバイルで異なる画像を表示 ===== */

/* デフォルト：PC用を表示、モバイル用を非表示 */
#case-13 .flip-stack__after--pc {
  display: block;
}

#case-13 .flip-stack__after--mobile {
  display: none;
}

/* モバイル：逆転 */
@media (max-width: 767.98px) {
  #case-13 .flip-stack__after--pc {
    display: none;
  }
  
  #case-13 .flip-stack__after--mobile {
    display: block;
  }
}