@charset "utf-8";
/* =========================================================
   outline/css/style.css — 下層ページ「物件概要（OUTLINE）」固有スタイル
   下層MV / ページタイトル / 概要テーブル / 注釈 / ページアップ
   ※ bgxx.png は背景画像（CSS background）として配置
   ========================================================= */

:root{
  /* 概要テーブル用（デザイン準拠：角ゴシック系） */
  --font-spec: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', YuGothic,
               'Noto Sans JP', 'Zen Maru Gothic', sans-serif;
  --sumi: #231815;               /* 本文（スミ） */
  --dot:  #685F4D;               /* 罫線ドット */
}

/* ---------- 下層ページ共通ラッパ ---------- */
/* ヘッダー（h84px・sticky）にMVを潜り込ませる */
.page{
  position:relative;
  margin-top:-84px;
  background:#fff;
  /* 背景装飾がはみ出しても横スクロールを発生させない */
  overflow-x:clip;
}

/* ---------- ① 下層ページMV ---------- */
.sub-mv{
  position:relative;
  z-index:0;
  line-height:0;
}
.sub-mv > img{ width:100%; }
/* OUTLINE ロゴ：MV内 上から55.6% / 幅248px（1280基準） */
.sub-mv__tit{
  position:absolute;
  left:50%;
  top:55.6%;
  width:19.375%;
  transform:translate(-50%,-50%);
  margin:0;
}
.sub-mv__tit img{ width:100%; }

/* ---------- ② 物件概要 ---------- */
.outline{
  position:relative;
  z-index:2;          /* 装飾（deco01）をMV写真の上に重ねるため */
  padding:180px 0 0;
}

/* 背景装飾（bg01〜bg05／CSS背景） */
.deco{
  position:absolute;
  z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.deco01{ top:-72px;  left:0;      width:413px; aspect-ratio:413/402; background-image:url(../img/bg01.png); }
.deco02{ top:430px;  right:0;     width:358px; aspect-ratio:358/577; background-image:url(../img/bg02.png); }
.deco03{ top:1014px; left:14px;   width:304px; aspect-ratio:304/239; background-image:url(../img/bg03.png); }
.deco04{ top:1670px; left:0;      width:469px; aspect-ratio:469/392; background-image:url(../img/bg04.png); }
.deco05{ top:1867px; right:-15px; width:334px; aspect-ratio:334/242; background-image:url(../img/bg05.png); }

/* ページ見出し */
.outline__tit{
  position:relative;
  z-index:1;
  font-family:var(--font-jp);
  font-weight:700;
  font-size:22px;
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--brown);
  text-align:center;
}

/* ---------- 概要テーブル ---------- */
.spec{
  position:relative;
  z-index:1;
  width:890px;
  max-width:94%;      /* 769〜1280px の中間幅でも横にはみ出さない */
  margin:68px auto 0;
  font-family:var(--font-spec);
  font-weight:400;
  font-size:18px;
  line-height:35px;
  letter-spacing:0;
  color:var(--sumi);
}
.spec__row{
  display:flex;
  align-items:flex-start;
  padding:5px 0;
  /* 破線罫（ドット2.5px／ピッチ8px） */
  background-image:repeating-linear-gradient(to right,
    var(--dot) 0 2.5px, transparent 2.5px 8px);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:100% 1px;
}
.spec__th{
  flex:0 0 243px;
  width:243px;
  padding-left:20px;
  font-weight:400;
}
.spec__td{ flex:1 1 auto; min-width:0; }
/* 語句の途中で改行させたくない箇所 */
.nb{ white-space:nowrap; }

/* ---------- 注釈 ---------- */
.outline__note{
  position:relative;
  z-index:1;
  width:890px;
  max-width:94%;
  margin:25px auto 0;
  font-family:var(--font-spec);
  font-weight:400;
  font-size:18px;
  line-height:39px;
  letter-spacing:0;
  color:var(--sumi);
}

/* ---------- ③ ページアップ ---------- */
.pageup{
  position:relative;
  padding:131px 0 93px;
  text-align:center;
  line-height:0;   /* inline-block の下端余白を消す */
}
.pageup a{ display:inline-block; transition:transform .2s; }
.pageup a:hover{ transform:translateY(-4px); }
.pageup img{ width:121px; margin:0 auto; }



/* ---------- フッター（デザイン準拠の微調整） ---------- */
/* 住所2行のため行間を詰める */
.footer__addr{ line-height:1.25; }
/* デザイン上のコピーライト色 ※全ページ共通にする場合は common.css へ */
.footer__copy{ color:#497889; }

/* =========================================================
   スマートフォン（〜768px）
   ・項目／内容は縦積み（項目 → 内容）に組み替え
   ・幅指定は % を基本とする
   ========================================================= */
@media (max-width:768px){

  /* ---- ベース ---- */
  .page{ margin-top:0; }

  /* ---- ① 下層ページMV ---- */
  .sub-mv{ position:relative; }
  .sub-mv > img{
    width:100%;
    height:38vw;
    min-height:150px;
    object-fit:cover;
  }
  .sub-mv__tit{
    top:50%;
    width:44%;
    max-width:248px;
  }

  /* ---- ② 物件概要 ---- */
  .outline{ padding:44px 0 0; }

  .outline__tit{
    font-size:4vw;
    line-height:1.7;
    letter-spacing:.02em;
    padding:0 4%;
  }

  /* 装飾はサイズを抑え、SPの縦長レイアウトに合わせて再配置 */
  .deco{ width:auto; }
  .deco01{ top:-24px;  left:-4%;    width:40%; }
  .deco03{ top:34%;    left:-6%;    width:32%; }
  .deco05{ top:88%;    right:-8%;   width:32%; }
  /* bg02・bg04 はSPでは非表示 */
  .deco02,
  .deco04{ display:none; }

  /* ---- 概要テーブル（項目 → 内容 の縦積み） ---- */
  .spec{
    width:88%;
    max-width:none;
    margin:28px auto 0;
    font-size:3.6vw;
    line-height:1.85;
  }
  .spec__row{
    display:block;
    padding:14px 0 15px;
    background-size:100% 1px;
  }
  .spec__row:first-child{ padding-top:0; }
  .spec__th{
    display:inline-block;
    flex:none;
    width:auto;
    padding:2px 14px;
    margin-bottom:8px;
    background:var(--beige);
    border-radius:4px;
    font-family:var(--font-jp);
    font-weight:600;
    font-size:3.4vw;
    line-height:1.8;
    letter-spacing:.02em;
    color:var(--brown);
  }
  .spec__td{
    display:block;
    padding:0 2px;
  }

  /* ---- 注釈 ---- */
  .outline__note{
    width:88%;
    max-width:none;
    margin:22px auto 0;
    font-size:3.4vw;
    line-height:2.05;
  }

  /* ---- ③ ページアップ ---- */
  .pageup{ padding:52px 0 46px; }
  .pageup img{ width:88px; }
}