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

/* ===== case-01：操作ヒントテキスト（PC:左上 / SP:右下） ===== */
#case-01 .works-case__media{
  position: relative; /* 絶対配置の基準 */
}

#case-01 .case01-tapnote{
  position: absolute;
  z-index: 2000;          /* flipより前に */
  margin: 0;
  pointer-events: none;   /* タップ操作の邪魔をしない */
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #111;
  text-shadow: 0 1px 6px rgba(255,255,255,.85); /* 写真上でも読めるように */
}

/* PC：左上（絶対値） */
@media (min-width: 768px){
#case-01 .case01-tapnote{
top: -34px;
left: 0px;
right: auto;
bottom: auto;
  }
}

/* SP：右下（絶対値） */
@media (max-width: 767.98px){
  #case-01 .case01-tapnote{
    bottom: -36px;
    right: 0px;
    left: auto;
    top: auto;
    font-size: 13.5px;
  }

.bottom-tyousei{margin-bottom: 1.8em!important;}
}

@media (min-width: 768px) and (max-width:1023px){
#case-01 .case01-tapnote{
top:-30px;
font-size:13px;
}

.bottom-tyousei{margin-bottom: 1.7em!important;}
}


@media (min-width: 1600px){
#case-01 .case01-tapnote{
font-size:17px;
top:-56px;
}
}



/* case-01 の画像枠を基準にして、外側へはみ出しOKにする */
#case-01 .works-case__media{
  position: relative;        /* 絶対配置の基準 */
  overflow: visible !important; /* 画像の外に出すため */
}

/* 共通：GIF */
#case-01 .case01-floatgif{
  position: absolute;
  z-index: 999;              /* 画像より前 */
  pointer-events: none;      /* 操作の邪魔をしない */
  -webkit-user-drag: none;
  user-select: none;
  width: 80px;               /* ←絶対値指定（好みで） */
  height: auto;
}

/* 右上（画像の外） */
#case-01 .case01-floatgif--rt{
  top: -24px;                /* ←外側に出す（絶対値） */
  right: -24px;              /* ←外側に出す（絶対値） */
}

/* 左下（画像の外） */
#case-01 .case01-floatgif--lb{
bottom: -24px;
left: -24px;
transform: scaleX(-1);
}

/* 右上だけ上下反転（縦反転） */
#case-01 .case01-floatgif--rt{
  transform: scaleY(-1) scaleX(-1);
  transform-origin: center;
}



/* 初期は非表示（レイアウトは保持） */
.works-number,.works-number2{
  visibility: hidden;
  font-family:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif!important;
}
.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); }
}

/* 新しいヘッダーの基準箱 */
.works-header2{
  position: relative;
  display: block;
}

/* 2枚重ねの基準箱 */
.works-images2{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 25.13%; /* 元画像比率に合わせる（必要なら調整） */
}

/* 1枚目（ベース） */
.works-text2{
  position: absolute;
  inset: 0;
  width: 100%;
  display: block;
  z-index: 1;
}

/* 2枚目（フェードで重ねる） */
.works-text2-s{
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease-out;
  pointer-events: none;
  z-index: 2;
}
.works-text2-s.show{
  opacity: 1;
}


/* 新しい番号 */
.works-number2{
visibility: hidden;
position: absolute;
left: 62%;
top: 72%;
font-size: 1.5em;
font-family: var(--font-en);
white-space: nowrap;
}

/* 既存 keyframes riseFromLeft を流用 */
.works-number2 span{
  opacity: 0;
  display: inline-block;
  transform: translate(-10px, 14px);
  animation: riseFromLeft 0.6s ease-out forwards;
}

img.works-text-s.show,
img.managed.property-text-p.show,
#case-12 img.flip-stack__after.show,
#case-13 img.flip-stack__after.show,
#case-14 img.flip-stack__after.show{
   opacity: 1;
    
}
img.works-text-s,
img.managed.property-text-p,
#case-12 img.flip-stack__after,
#case-13 img.flip-stack__after,
#case-14 img.flip-stack__after{
  opacity: 0;
 transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}



/* --- セクション（下線はそのままでOK） --- */
.works-section-top{
  padding: 15em 0em 10em;
  position: relative;
}

/* --- 基準箱：ここを基準に%で重ねる --- */
.works-header{
align-items:center;
}

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

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

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


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


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


.works-case__media{
  flex: 0 0 calc((100% - var(--gap)) * 0.47);
  max-width: calc((100% - var(--gap)) * 0.47);
  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 10% 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: 23px;
    font-family: "Noto Serif JP", serif;
    font-weight:700;
}
.works-case__lead{
    line-height: 1.9;
    font-size: 15px;
     font-family:            
        "Noto Sans JP", "Hiragino Sans",
        "Meiryo", "Noto Sans JP",
        system-ui, -apple-system, "Segoe UI", sans-serif;
}
.works-case__meta{
   font-family:
        "Noto Sans JP", "Hiragino Sans",
        "Meiryo",
        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: 20px;
}

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;
font-size:15px;
}


.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.47);
  max-width: calc((100% - var(--gap)) * 0.47);
  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%; }



  /* 偶数：02,04,06,08,10 → 左へ */
  #case-02.works-case,
  #case-04.works-case,
  #case-06.works-case,
  #case-08.works-case,
  #case-10.works-case{
padding-left:0;
  }




/* 重ね構造 */
.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,
#baf-14 .flip-stack__after {
  display:block;
  width:100%;
  height:auto;
  opacity:1; visibility:visible; position:static;
}





/* --- 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;
}


: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;
}




: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){
#case-01 .case01-floatgif {
width: 120px;
}

.bottom-tyousei{margin-bottom: 1.2em!important;}

#case-01 .case01-floatgif--rt{
top:-69px;
right:-40px;}

#case-01 .case01-floatgif--lb{
left:-32px;
bottom:-69px;
}

.works-number{
  font-size: 1.8em;
}

.works-number2{
font-size: 1.8em;
top: 44.5%;
}

.works-case__title{
font-size: 25px;
line-height: 1.6em;
}

.works-case__meta-desc span {
font-size: 19px;
}

.works-case__meta-desc {
font-size: 15px;
}

.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: 1600px) {
  
.person-image11 img,
  .person-image12 img{
    top: 96px;
}
.bottom-tyousei{margin-bottom: 1.3em!important;}
.works-case__title {
    font-size: 20px;
line-height:1.6em;
}

.works-case__lead {
    font-size: 12px;}

.works-case__meta-desc span {
    font-size:16px;
}
.works-case__meta-desc {
    font-size: 12px;
}

.works-number {
top: 92%;}

.works-number2 {
top: 43.5%;}

.works-case__body {
    min-width: 0;
    box-sizing: border-box;
padding: 1em 8% 1em;
}

#case-01 .case01-floatgif{
width:85px;}

#case-01 .case01-floatgif--rt{
top:-50px;
right:-31px;}

#case-01 .case01-floatgif--lb{
left:-24px;
bottom:-50px;}

#case-01 .case01-tapnote {
top: -40px;}

}

/* レスポンシブ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);
}

.bottom-tyousei{margin-bottom: 1.7em!important;}

    .person-image11 img, .person-image12 img {
        top: 79px;
    }
.works-case__meta-desc{
font-size: 11px;}

.works-case__meta-desc span {
    font-size: 14px;
}

.works-case__lead {
font-size: 11px;
}

.works-number {
top: 90%;
}

.works-number2 {
top: 42%;
}

.works-case__title
{font-size: 17px;
line-height: 1.6em;
}
.works-case__body
 {
padding: 1em 4.5% 1em;
}

#case-01 .case01-floatgif--rt{
top:-47px;
right:-27px;}

#case-01 .case01-floatgif--lb{
left:-24px;
bottom:-47px;
}

#case-01 .case01-floatgif{
width:80px;}

#case-01 .case01-tapnote{
top: -40px;}

}

/* レスポンシブ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: 0em 3% 0em;
font-family: var(--font-ja);
}

.works-case__meta{
margin-top: -1em;
}


.works-number {
    font-size: 1.2em;
top: 91%;
}
.works-number2 {
    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;
    }


.works-case__title {
font-size: 14px;
margin-bottom: 0em;
}
.works-case__lead {
    font-size: 8px;}
.works-case__meta-desc span {
    font-size: 11px;
}

.works-case__meta-desc {
font-size: 9px;
}

#case-01 .case01-floatgif{
width:90px;}

#case-01 .case01-floatgif--rt{
top:-43px;
right:-31px;}

#case-01 .case01-floatgif--lb{
left:-23px;
bottom:-42px;
}

#case-01 .case01-tapnote{
top:-34px;}

#case-01 .case01-floatgif{
width:70px;}
}


/* レスポンシブ600～767 */
@media (max-width: 767.98px){
  .works-section-top {
    padding: 15em 0em 10em;
    position: relative;
}

#mcase-01{
margin-top:1.5em;
}
.works-number {
font-size: 1em;
top: 85.5%;
}
.works-number2 {
    font-size: 1em;
}
  .works-case__flex {
    align-items: flex-start;
    flex-direction: column;
    padding: 0em 1em;
}
.works-case__media,
.works-case__media02{
    flex: none;           /* ← flex: 0 0 ... を無効化 */
    width: 100%;          /* 幅を100%に */
    max-width: none;      /* ← max-width を無効化 */
    margin: 0;
  }
 
.works-section-top + .works-case {
    margin-top: 4em;
}
.works-case__flex {
    --gap: 0px;
  }
           .works-case__body {
padding: 3em 0em 3em 0em;
        font-family: var(--font-ja);
        font-size: 1.5vw;
    }
    .works-case__flex.works-case__flex--rev{
    flex-direction: column-reverse; /* テキスト → 画像 */
  }

#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;
}

}
  



/* レスポンシブ599.98以下 */
@media (max-width: 599.98px){
    .works-section-top {
    padding: 10em 0em 3em;
    position: relative;
}
   .works-case__body {
padding: 3em 1em 3em 1em;
        font-family: var(--font-ja);
       font-size: clamp(7px, 1.8vw, 8px);
    }
  .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-number {
    font-size: 0.8em;
}

.works-number2 {
    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;
    }

#case-01 .case01-floatgif--rt{
top:-48px;
right:-27px;
}

#case-01 .case01-floatgif{width:80px;}

#case-01 .case01-floatgif--lb{bottom:-48px;
left:-24px;}

#mcase-02,#mcase-03{margin-top:3em;}
#mcase-03{margin-bottom:3em;}

.page-title {
        font-size: 14px!important;
        margin-bottom: 30px!important;
        font-weight: 600!important;
        width: 100%!important;
        margin-left: 0!important;
        margin-top: 5px!important;
padding-bottom: 2em!important;
    }

}
/* レスポンシブ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;     /* 近傍要素の重なり干渉を防止 */
}

/* レスポンシブ600～767 */
@media (max-width: 767.98px){
  .works-section-top {
    padding: 15em 0em 10em;
    position: relative;
  }
  

  
  .works-number {
    font-size: 1em;
  }

  .works-number2 {
    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 2em;
  }
  
  /* ★ 偶数ケースも通常の縦並びに統一（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 0em 3em 0em;
    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-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;
  }
}
/* レスポンシブ599.98以下 */
@media (max-width: 599.98px){
  .works-section-top {
    padding: 10em 0em 3em;
    position: relative;
  }

  .works-case__body {
padding: 3em 1em 3em 1em;
    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-number {
    font-size: 0.8em;
  }

  .works-number2 {
    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;
  }
}


/*
#case-02 .turnjs-magazine,
#case-04 .turnjs-magazine,
#case-06 .turnjs-magazine,
#case-08 .turnjs-magazine,
#case-10 .turnjs-magazine {
  transform: scaleX(-1);
}

#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: scaleX(-1);
}
*/

@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;
}

/* PC用の指画像 */
.swipe-indicator--pc {
  display: none; /* デフォルトは非表示 */
}

@media (min-width: 768px) {
  .swipe-indicator--pc {
    display: block;
    width: 80px; /* お好みで調整 */
    height: auto;
    top: 30px;
    right: 30px;
  }

#mcase-03{margin-bottom:10em;}

img.works-text2.number2{
left: 0%;}

img.works-text2-s.number2{
left: 0%;}

.works-number2 {
left: 65%;
}

.works-header2
 {
    position: relative;
    display: block;
    margin-top: 0.5em;
    border-top: 1px solid #ccc;
    padding-top: 3em;
}
  
  .swipe-indicator--mobile {
    display: none; /* PCでは非表示 */
  }
}

/* モバイル用の指画像 */
.swipe-indicator--mobile {
  display: none; /* デフォルトは非表示 */
}

@media (max-width: 767.98px) {
  .swipe-indicator--mobile {
    display: block;
    width: 60px; /* お好みで調整 */
    height: auto;
    top: 20px;
    right: 20px;
  }
  
  .swipe-indicator--pc {
    display: none; /* モバイルでは非表示 */
  }
}

/* アニメーション：左右にゆらゆら動く */
@keyframes swipeHint {
  0%, 100% {
    transform: translateX(0) scale(1);
    opacity: 0.9;
  }
  25% {
    transform: translateX(-10px) scale(1.05);
    opacity: 1;
  }
  75% {
    transform: translateX(10px) scale(1.05);
    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;
}

/* ===== ケース1専用：指のスワイプアイコン（写真の外側に配置） ===== */

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

/* PC用の指画像 */
.swipe-indicator--pc {
  display: none;
}

@media (min-width: 768px) {
  .swipe-indicator--pc {
    display: block;
    width: 50px; /* カンプに合わせて調整 */
    height: 50px;
    bottom: -25px; /* 写真の下側外に配置 */
    right: -25px;  /* 写真の右側外に配置 */
  }
  
  .swipe-indicator--mobile {
    display: none;
  }
}

/* モバイル用の指画像 */
.swipe-indicator--mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .swipe-indicator--mobile {
    display: block;
    width: 40px; /* カンプに合わせて調整 */
    height: 40px;
    bottom: -20px; /* 写真の下側外に配置 */
    right: -20px;  /* 写真の右側外に配置 */
  }
  
  .swipe-indicator--pc {
    display: none;
  }
}

/* アニメーション：ゆらゆら動く */
@keyframes swipeHint {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate(-5px, -5px) 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;
}

/* ===== ケース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;
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

#case-13 .flip-stack__after--mobile {
  display: none;
  opacity: 0;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

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

/* ★ showクラスでフェードイン ★ */
#case-13 .flip-stack__after--pc.show,
#case-13 .flip-stack__after--mobile.show {
  opacity: 1;
}




/* ===== CASE 01専用：動画配置（body内の右上） ===== */

/* works-case__body を基準にする */
#case-01 .works-case__body {
  position: relative;
}

/* 動画を右上に絶対配置 */
#case-01 .works-case__video {
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none; /* テキスト選択を妨げない */
}

#case-01 .works-case__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== PC版：80px × 80px ===== */
@media (min-width: 768px) {
  #case-01 .works-case__video {
width: 45px;
height: 33px;
  }
}

/* ===== タブレット版：70px × 70px ===== */
@media (min-width: 600px) and (max-width: 767.98px) {
  #case-01 .works-case__video {
width: 45px;
height: 33px;
  }
}

/* ===== スマホ版：60px × 60px ===== */
@media (max-width: 599.98px) {
  #case-01 .works-case__video {
width: 45px;
height: 33px;
  }
}

/* ===== 1600px以上：100px × 100px ===== */
@media (min-width: 1600px) {
  #case-01 .works-case__video {
    width: 45px;
    height: 33px;
  }
}

.pc{right:10%!important;}


@media (max-width: 767px) {
.pc{display:none;
}

.works-number2{
left: 70%;
top: 72%;
}


.works-case__lead{padding-right: 0em;
font-size:11px;}

.works-case__meta-term{font-size:10px;}

.works-case__meta-desc span{font-size:13px;}

.works-case__meta-desc{font-size:11px;}

.works-case__title{font-size: 16px;
line-height: 1.6em;}

.works-case__title {
font-weight:700;
}

#case-01 .works-case__video {
top: 6px;}
}

@media (min-width: 768px) {
.sp{display:none;}
}


    .news-header {
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .news-images-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 25.13%; /* 190/756 = 25.13% - 元画像のアスペクト比を維持 */
        }

        /* 1枚目: NEWSテキスト画像 */
        .news-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* 2枚目: 虫眼鏡画像（フェードイン） */
        .magnifying-glass-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0;
            transform: translateY(0px);
            transition: opacity 1s ease-out, transform 1s ease-out;
            z-index: 2;
        }

        .magnifying-glass-image.show {
            opacity: 1;
            transform: translateY(0);
        }
@media (max-width: 768px) {
    .news-images-container {
        margin-top: 70px;
    }
    .news-header {
display: flex;
        }

img.works-text2.number2{
width: 180%;
left: -39%;
top: -8%;
}

img.works-text2-s.number2{
width: 100%;
top: 30%;
left: 4.7%;
}
}


.page-title {
    border-bottom: 1px solid #e0e0e0;
    width: 175%;
    margin-left: -37.5%;
    margin-top: 20px;
    font-size: 1.2em;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 4em;
    padding-bottom: 4em;
}

.container {
    max-width: 40%;
    margin: 0 auto;
    padding: 0px 20px 40px 20px;
}

@media (max-width: 768px) {
    .container {
        max-width: 90%;
        padding: 30px 16px;
        padding-top:0px;
    }
.header-area
 {
        font-size: 0.4em;
        margin-top: -70px;
    }
.works-case:first-of-type{margin-top:0;}

.number2-container{
border-top: 1px solid #ccc;
margin-top: 0.5em;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 50%;
    }
}

/* =========================
   53% / 47% + 帯ぶんの余白を flex 側で吸収
   ========================= */

/* 1) まず works-case の左押しを無効化（←あなたが消したい行の代替） */
.works-case{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) 帯ぶんの余白は「テキスト individual」ではなく、行全体(.works-case__flex)に付ける */
@media (min-width: 768px){
  .works-case__flex{
    padding-left: var(--accent-w);  /* ←ここで揃うので、テキストに margin-left 不要 */
    padding-right: 0;
  }

  /* 3) 画像53% / テキスト47%（media と media02 両方） */
  .works-case__media,
  .works-case__media02{
    flex: 0 0 calc((100% - var(--gap)) * 0.49);
    max-width: calc((100% - var(--gap)) * 0.49);
  }
  .works-case__body{
    flex: 0 0 calc((100% - var(--gap)) * 0.51);
    max-width: calc((100% - var(--gap)) * 0.51);
  }

  /* 4) 偶数(02/04/06/08/10)は並びだけ反転（画像左／テキスト右に揃える） */
  #case-02 .works-case__flex,
  #case-04 .works-case__flex,
  #case-06 .works-case__flex,
  #case-08 .works-case__flex,
  #case-10 .works-case__flex{
    flex-direction: row-reverse !important;
  }

  /* 5) 青帯は常に「画像の左側」固定（偶数でも右に行かない） */
  #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;
  }
}

/* 6) 帯を消してるケース(12/13/14)は、flexの左余白も不要なので0に戻す */
#case-12 .works-case__flex,
#case-13 .works-case__flex,
#case-14 .works-case__flex{
  padding-left: 0 !important;
}

/* ===== PC/タブレット：奇数=画像左、偶数=画像右（HTML順をそのまま使う） ===== */
@media (min-width: 768px){
  /* どのケースも基本は row に固定 */
  .works-case__flex{
    flex-direction: row !important;
  }

  /* 偶数に付いてる works-case__flex--rev が row-reverse を持ってても潰す */
  .works-case__flex--rev{
    flex-direction: row !important;
  }

  /* もし case別で row-reverse を当てていたら、ここで完全に無効化 */
  #case-02 .works-case__flex,
  #case-04 .works-case__flex,
  #case-06 .works-case__flex,
  #case-08 .works-case__flex,
  #case-10 .works-case__flex{
    flex-direction: row !important;
  }
}

/* PCだけ（SPで崩れやすいので） */
@media (min-width: 768px){
  .works-case__body{
margin-left: calc(-1 * var(--accent-w));
margin-right: var(--accent-w);
  }
.case-kisu{
margin-left: 0;
margin-right: 0;
}
}

/* ===== 管理物件：ラベル含めてフェードイン ===== */
.managed-case .managed-fade{
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.managed-case.is-inview .managed-fade{
  opacity: 1;
  transform: translateY(0);
}

/* ラベル（画像の上に） */
.managed-case .works-case__media02{
  position: relative;
}
.managed-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  z-index: 2;
}

/* 画像は既存の works-case__media02 img でもOKだけど念のため */
.managed-photo{
  display: block;
  width: 100%;
  height: auto;
}

/* ★ 管理物件02：PCは左テキスト／右画像 */
@media (min-width: 768px){
  #mcase-02 .works-case__flex{
    flex-direction: row-reverse !important;
  }
}

.works-case__media02::before{
background: #eeca00;}


.works-case__body{
text-align: justify;}


@media (max-width: 374px){
#case-01 .case01-tapnote {
font-size: 11px;}
}

@media (min-width: 768px){
.works-number2 {
    top: 46%;
}
}


/* =========================
   mp4（メイン）を画像と完全に同じルールで扱う
   ※CSSの一番下に貼る
   ========================= */
.works-case__media video,
.works-case__media02 video,
.works-case__media .works-case__media-video,
.works-case__media02 .works-case__media-video{
  width: 100% !important;
  height: auto !important;      /* 画像と同じ：高さは自動 */
  display: block !important;    /* 画像と同じ：下の隙間防止 */
  object-fit: cover;            /* 既存の img と同じ見え方に寄せる */
}

/* もし誤って works-case__video をメインに使ってても潰す（保険） */
.works-case__media .works-case__video{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  inset: auto !important;
}