@charset "UTF-8";
body {
  background-color: #fbf9f6;
}
/*//////////PCサイズ///////////*/
/*//////////PCサイズ///////////*/
@media screen and (min-width: 768px) {
  /* ==============================
 * work_09 hero（16:9 / じんわり縮小） start
 * ============================== */
  .w9-hero {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 56.25vw; /* 16:9 のフォールバック */
    aspect-ratio: 16 / 9; /* 主要ブラウザ用 */
    overflow: hidden; /* 子画像をマスク（親は拡大縮小しない） */
    background: #000; /* 読み込み中の下地 */
  }
  .w9-hero > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 16:9枠をいっぱいにカバー */
    transform-origin: 50% 50%; /* 画像中央を起点 */
    transform: scale(1.1); /* 初期：110% */
    will-change: transform;
    /* 1s待って → 1.8sで 110%→100% に縮小。1回だけ再生して停止 */
    animation: w9KenburnsOut 1.8s ease-out 1s 1 forwards;
  }
  @keyframes w9KenburnsOut {
    0% {
      transform: scale(1.10);
    }
    100% {
      transform: scale(1.00);
    }
  }
  /* 動きを抑制したい環境の配慮（任意） */
  @media (prefers-reduced-motion: reduce) {
    .w9-hero > img {
      animation: none;
      transform: scale(1);
    }
  }
  /* ==============================
 * work_09 hero end
 * ============================== */
  /* ==============================
 * work_09 case panel（フォルダ見出し） start
 * ============================== */
  /* 親：100vw。上の画像に少し被せる */
  .w9-panel {
    position: relative;
    z-index: 2;
    width: 100vw;
    margin-top: 0;
    padding-top: 8vw;
    background: linear-gradient(180deg, #efe7dc 0%, #ded3c6 100%);
  }
  /* 2) 子（クリップ板）だけを上にかぶせる */
  .w9-clip {
    width: 65vw;
    margin: -10vw auto 0; /* ← 子だけ上に出す（transformは使わない） */
    -webkit-clip-path: polygon(0 0, 9% 0, 12% 5%, 100% 5%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 9% 0, 12% 5%, 100% 5%, 100% 100%, 0 100%);
    position: relative;
    z-index: 3;
    background-color: #fbf9f6;
    -webkit-clip-path: polygon(0 0, 9% 0, 12% 5%, 100% 5%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 9% 0, 12% 5%, 100% 5%, 100% 100%, 0 100%);
    /* ← ここ重要：drop-shadow をやや強め＆2段に */
    filter:
      drop-shadow(0 1.2rem 2.4rem rgba(82, 71, 57, .28)) /* 外側ふわっと */
      drop-shadow(0 .4rem 1.2rem rgba(82, 71, 57, .16)); /* エッジのコク */
    -webkit-filter:
      drop-shadow(0 1.2rem 2.4rem rgba(82, 71, 57, .28)) drop-shadow(0 .4rem 1.2rem rgba(82, 71, 57, .16));
  }
  .w9-in {
    padding: 1vw 5vw 4vw 5vw;
    color: #3b3735;
  }
  /* タグ/日付/タイトル/罫線/本文 */
  .w9-tag {
    margin: 0 0 1vw 2rem;
    font-size: 1.1rem;
    letter-spacing: .18rem;
    line-height: 3rem;
    color: #8a8079;
  }
  .w9-date {
    margin: 0 0 0 0;
    font-size: 1.2rem;
    letter-spacing: .06rem;
    color: #8a8079;
  }
  .w9-ttl {
    margin: 0 0 1.6rem 0;
    font-size: 2.4rem;
    letter-spacing: .12rem;
    font-weight: 600;
    color: #947847; /* 金茶系 */
  }
  .w9-rule {
    height: .1rem;
    background: #cfc6bc;
    margin: 0 0 1.8rem 0;
  }
  .w9-lead {
    margin: 0 0 1.2rem 0;
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: .06rem;
    font-weight: 400;
    color: #3a3836;
  }
  .w9-desc {
    margin: 0;
    font-size: 1.1rem;
    line-height: 2;
    letter-spacing: .04rem;
    text-align: justify;
  }
  /* ==============================
 * work_09 case panel end
 * ============================== */
  /* ==============================
 * work split base start
 * ============================== */
  .work-split {
    width: 100vw;
    padding: 5vw 0;
    background: transparent;
  }
  .work-grid {
    column-gap: 0vw;
    padding: 5vw 0;
  }
  .left {
    display: grid;
    grid-template-columns: 55vw 45vw;
  }
  .right {
    display: grid;
    grid-template-columns: 45vw 55vw;
  }
  .work-left, .work-right {
    display: grid;
    place-items: center;
  }
  .work-text {
    width: 35vw;
  }
  .work-eyebrow {
    margin: 0 0 1rem 0;
    letter-spacing: .14rem;
    color: #8a8079;
    font-size: 1.2rem;
  }
  .work-title {
    margin: 0 0 2rem 0;
    font-size: 2rem;
    line-height: 1.6;
    color: #3a3735;
    letter-spacing: .1rem;
    font-weight: 400;
    font-family: 'Noto Serif JP', serif;
  }
  .work-body {
    margin: 0;
    font-size: 1.1rem;
    line-height: 2.2;
    letter-spacing: .04rem;
    color: #3a3836;
    text-align: justify;
    padding-bottom: 2rem;
  }
  .work-img {
    margin: 0;
  }
  .work-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  /* ==============================
 * work split base end
 * ============================== */
  /* ==============================
 * Before & After start
 * ============================== */
  .ba-sec {
    width: 100vw;
    padding: 0 0 10vw 0;
    background: transparent;
  }
  /* 見出し：上罫線＋センター */
  .ba-head {
    width: 85vw;
    margin: 0 auto;
    border-top: .1rem solid #cfc6bc;
    padding: 3rem 0;
    text-align: center;
  }
  .ba-title {
    margin: 0;
    font-weight: 400;
    letter-spacing: .08rem;
    font-size: 2.6rem;
    color: #8a8079;
  }
  /* 3カラム：35vw | 1fr | 35vw */
  .ba-grid {
    width: 75vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 35vw 1fr 35vw;
    align-items: center;
    justify-items: center;
    gap: 0;
  }
  /* 各カラム共通：中央寄せ */
  .ba-col {
    display: grid;
    place-items: center;
  }
  /* 画像とバッジ */
  .ba-fig {
    position: relative;
    width: 100%; /* ← 35vw に自動フィット */
    margin: 0;
    display: grid;
    place-items: center;
  }
  .ba-fig img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  /* 左上バッジ（Before / After） */
  .ba-badge {
    position: absolute;
    left: 0;
    top: 0;
    padding: .3rem 1rem;
    font-size: 2rem;
    letter-spacing: .12rem;
    color: #fff;
  }
  /* 中央の▶ */
  .ba-arrow {
    font-size: 2.8rem;
    line-height: 1;
    color: #947847; /* 金茶系 */
    display: grid;
    place-items: center;
  }
  /* 任意：下の説明文 */
  .ba-note {
    width: 75vw;
    margin: 2rem auto 0;
    color: #3a3836;
    font-size: 1.1rem;
    line-height: 2;
    letter-spacing: .04rem;
    text-align: justify;
  }
  /* ==============================
 * Before & After end
 * ============================== */
  /* ==============================
 * spec (物件概要) start
 * ============================== */
  .spec-sec {
    width: 100vw;
    padding: 8vw 0;
    background: #706d6b; /* 見本のダークグレー */
    color: #efecea;
  }
  .spec-in {
    width: 62vw; /* 本文ブロック幅 */
    margin: 0 auto;
  }
  .spec-ttl {
    margin: 0 0 5vw 0;
    text-align: center;
    font-weight: 400;
    letter-spacing: .14rem;
    font-size: 2.2rem;
    color: #ffffff;
  }
  /* 表本体 */
  .spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: .1rem solid rgba(255, 255, 255, .35); /* 最上段の罫線 */
  }
  .spec-row {
    display: grid;
    grid-template-columns: 12rem 1fr; /* 左ラベル / 右データ */
    column-gap: 2.4rem;
    align-items: center;
    padding: 1.1rem 0;
    border-bottom: .1rem solid rgba(255, 255, 255, .28);
  }
  .spec-term {
    color: #e6e2de;
    letter-spacing: .2rem;
    font-size: 1.1rem;
    margin: 0 0 0 1rem;
  }
  .spec-data {
    color: #ffffff;
    letter-spacing: .06rem;
    font-size: 1.1rem;
  }
  /* ==============================
 * spec (物件概要) end
 * ============================== */
}
/*//////////SPサイズ///////////*/
@media screen and (max-width:767px) {
  /* ==============================
 * work_09 hero（SP） start
 * ============================== */
  .w9-hero {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 56.25vw; /* 16:9 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
	margin:70px 0 0 0;
  }
  .w9-hero > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
    transform: scale(1.1);
    will-change: transform;
    animation: w9KenburnsOut 1.6s ease-out .6s 1 forwards; /* やや短縮で軽量化 */
  }
  @keyframes w9KenburnsOut {
    0% {
      transform: scale(1.10);
    }
    100% {
      transform: scale(1.00);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .w9-hero > img {
      animation: none;
      transform: scale(1);
    }
  }
  /* ==============================
 * work_09 hero（SP） end
 * ============================== */
  /* ==============================
 * work_09 case panel（SP） start
 * ============================== */
  .w9-panel {
    position: relative;
    z-index: 2;
    width: 100vw;
    margin-top: 0;
    padding-top: 2rem; /* 8vw → SP基準 */
    background: linear-gradient(180deg, #efe7dc 0%, #ded3c6 100%);
  }
  /* ヒーローに少し被せる“クリップ板” */
  .w9-clip {
    width: 90vw; /* 65vw → 既定幅 */
    margin: -10vw auto 0; /* 被せ量は維持（必要に応じて調整可） */
    position: relative;
    z-index: 3;
    background-color: #fbf9f6;
    -webkit-clip-path: polygon(0 0, 9% 0, 12% 5%, 100% 5%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 20% 0, 25% 5%, 100% 5%, 100% 100%, 0 100%);
    filter:
      drop-shadow(0 1.2rem 2.4rem rgba(82, 71, 57, .28)) drop-shadow(0 .4rem 1.2rem rgba(82, 71, 57, .16));
  }
  .w9-in {
    padding: 1rem 1.2rem 2rem; /* 1vw 5vw 4vw → rem基準 */
    color: #3b3735;
  }
  /* タグ/日付/タイトル/罫線/本文（ビルドSP） */
  .w9-tag {
    margin: 0.2rem 0 .4rem 1rem;
    font-size: 1.0rem;
    letter-spacing: .12rem;
    line-height: 1.8;
    color: #8a8079;
  }
  .w9-date {
    margin: 0 0 .4rem 0;
    font-size: 1.0rem;
    letter-spacing: .06rem;
    color: #8a8079;
  }
  .w9-ttl {
    margin: 0 0 1rem 0;
    font-size: 1.6rem; /* 見出し=1.6rem */
    letter-spacing: .12rem;
    font-weight: 600;
    color: #947847;
    line-height: 1.4;
  }
  .w9-rule {
    height: .1rem;
    background: #cfc6bc;
    margin: 0 0 1rem 0;
  }
  .w9-lead {
    margin: 0 0 .8rem 0;
    font-size: 1.0rem; /* 本文=1.0rem */
    line-height: 1.8; /* 行間=1.8 */
    letter-spacing: .06rem;
    color: #3a3836;
	text-align: justify;
  }
  .w9-desc {
    margin: 0;
    font-size: 1.0rem;
    line-height: 1.8;
    letter-spacing: .04rem;
    text-align: justify;
  }
  /* ==============================
 * work_09 case panel（SP） end
 * ============================== */
/* ==============================
 * work split base（SP） 最終版
 * ============================== */
.work-split{
  width: 100vw;
  padding: 2rem 0;
  background: transparent;
}

/* 1段＝1カード（画像とテキスト縦積み） */
.work-grid{
  width: 87vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;                 /* カード間隔を統一 */
  padding: 2rem 0;
}

/* ▼ 縦書きユーティリティ等と衝突する場合の保険（右だけ強制横書き） */
.work-grid.right{
  writing-mode: horizontal-tb;   /* 必要なければ削除可 */
  text-orientation: mixed;
}

/* ラッパーは“そのままグリッド項目”にする（display: contents は使わない） */
.work-grid > .work-left,
.work-grid > .work-right{
  display: block;
}

/* 既定順（.left など）：画像 → テキスト */
.work-grid > .work-left  { order: 1; }
.work-grid > .work-right { order: 2; }

/* .right のときだけ反転：テキスト → 画像 */
.work-grid.right > .work-right { order: 1; }
.work-grid.right > .work-left  { order: 2; }

/* 画像 */
.work-img{ margin-top: 2rem;  }
.work-img + .work-img{ } /* 画像が連続する時の間隔 */

/* テキスト塊とタイポ（ビルドSP基準） */
.work-text{ margin: 0 auto; }


.work-eyebrow{
  margin: 0;
  letter-spacing: .12rem;
  color: #8a8079;
  font-size: 1.0rem;
  line-height: 1.8;
}
.work-title{
  margin: 0.2rem 0 1rem 0;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #3a3735;
  letter-spacing: 0;
  font-weight: 400;
  font-family: 'Noto Serif JP', serif;
}
.work-body{
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.8;
  letter-spacing: .04rem;
  color: #3a3836;
  text-align: justify;
}

/* ==============================
 * work split base（SP） end
 * ============================== */

  /* ==============================
 * Before & After（SP） start
 * ============================== */
  .ba-sec {
    width: 100vw;
    padding: 0 0 3rem 0; /* 10vw → 3rem */
    background: transparent;
  }
  /* 見出し */
  .ba-head {
    width: 87vw;
    margin: 0 auto;
    border-top: .1rem solid #cfc6bc;
    padding: 1.6rem 0; /* 3rem → 1.6rem */
    text-align: center;
  }
  .ba-title {
    margin: 0;
    font-weight: 400;
    letter-spacing: .08rem;
    font-size: 1.6rem; /* 見出し=1.6rem */
    color: #8a8079;
  }
  /* 3カラム → 縦並び（Before → ▶ → After） */
  .ba-grid {
    width: 87vw; /* 75vw → 既定幅 */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .8rem;
    align-items: center;
    justify-items: center;
  }
  .ba-col {
    display: grid;
    place-items: center;
  }
  .ba-fig {
    position: relative;
    width: 100%;
    margin: 0;
    display: grid;
    place-items: center;
  }
  .ba-fig img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;

  }
  /* 左上バッジ（Before / After） */
  .ba-badge {
    position: absolute;
    left: 0;
    top: 0;
    padding: .2rem .8rem;
    font-size: 1.2rem; /* 2rem → SP最適化 */
    letter-spacing: .12rem;
    color: #fff;
    line-height: 1.4;
  }
  /* 中央の▶ */
  .ba-arrow {
    font-size: 1.8rem; /* 2.8rem → 圧縮 */
    line-height: 1;
    color: #947847;
    display: grid;
    place-items: center;
	transform: rotate(90deg); / ← 90°回転（時計回り） */
    margin: .2rem 0;
  }
  /* 任意：下の説明文 */
  .ba-note {
    width: 87vw;
    margin: 1rem auto 0;
    color: #3a3836;
    font-size: 1.0rem;
    line-height: 1.8;
    letter-spacing: .04rem;
    text-align: justify;
  }
  /* ==============================
 * Before & After（SP） end
 * ============================== */
  /* ==============================
 * spec (物件概要)（SP） start
 * ============================== */
  .spec-sec {
    width: 100vw;
    padding: 3rem 0; /* 8vw → 3rem */
    background: #706d6b;
    color: #efecea;
  }
  .spec-in {
    width: 87vw; /* 62vw → 既定幅 */
    margin: 0 auto;
  }
  .spec-ttl {
    margin: 0 0 1.6rem 0; /* 5vw → 1.6rem */
    text-align: center;
    font-weight: 400;
    letter-spacing: .12rem;
    font-size: 1.6rem; /* 見出し=1.6rem */
    color: #ffffff;
  }
  /* 表本体 */
  .spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: .1rem solid rgba(255, 255, 255, .35);
  }
  .spec-row {
    display: grid;
    grid-template-columns: 5rem 1fr; /* 12rem → 8.5rem */
    column-gap: 1rem; /* 2.4rem → 1rem */
    align-items: start; /* アイテム頭揃え */
    padding: .9rem 0.5rem; /* 1.1rem → .9rem */
    border-bottom: .1rem solid rgba(255, 255, 255, .28);
  }
  .spec-term {
    color: #e6e2de;
    letter-spacing: .12rem; /* .2rem → 抑制 */
    font-size: 1.0rem;
    margin: 0;
    line-height: 1.8;
  }
  .spec-data {
    color: #ffffff;
    letter-spacing: .04rem;
    font-size: 1.0rem;
    line-height: 1.8;
  }
  /* ==============================
 * spec (物件概要)（SP） end
 * ============================== */
}