@charset "UTF-8";
body {
  background-color: #5a5660;
}
/*//////////PCサイズ///////////*/
/*//////////PCサイズ///////////*/
@media screen and (min-width: 768px) {
/** ==============================
 * ファーストビュー start
 * ============================== **/
.MainVisualSection {
  position: relative;
  width: 100vw;
  /*height: calc(var(--vh, 1vh) * 100);
  height: 100vh;
   min-height: 600px; ← 任意で残してもOK */
  aspect-ratio: 16 / 12;
  overflow: hidden;
  background-color: #333;
}
/* ===== 動画背景 ===== */
.MainVisualSection__video-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.MainVisualSection__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ★ 黒オーバーレイ */
.MainVisualSection__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* 黒＋透明30% */
  z-index: 2;
  pointer-events: none; /* 下の動画ボタンなどの操作を邪魔しない */
}
/* ===== ブランドMOVIEリンク・コピー配置 ===== */
.MainVisualSection__content {
  width: 100vw;
  height: 28vw;
  display: flex; /* ← 中央寄せ用 */
  justify-content: center; /* ← 左右中央 */
  align-items: center; /* ← 上下中央 */
  padding: 10vw 0; /* ← 上下10vw＋固定ヘッダー70pxを相殺 */
  box-sizing: border-box;
}
.MainVisualSection__brand-movie {
  align-self: flex-start;
  margin: 0 0 40px 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: auto;
}
/* ブランドムービーボタン */
.MainVisualSection__brand-link img {
  width: 10vw;
  height: auto;
}
/* ライトボックスのスタイル */
.VideoLightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999; /* 必ずヘッダーより前に */
  align-items: center;
  justify-content: center;
}
.VideoLightbox.is-active {
  display: flex;
}
.VideoLightbox__inner {
  position: relative;
  max-width: 90%;
  max-height: 80%;
}
.VideoLightbox__inner video {
  width: 100%;
  max-width: 1280px;
  height: auto;
  display: block;
}
.VideoLightbox__close {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000; /* 念のためボタンも強く */
}
.MainVisualSection__brand-link:hover {
  opacity: 0.8;
}
.MainVisualSection__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  left: 10vw;
  top: 41%;
  margin: 0 0 0 0;
  z-index: 2;
  pointer-events: auto;
}
.MainVisualSection__en.serif {
  font-family: 'Noto Serif JP', serif;
  font-size: 2.7rem;
  font-weight: 100;
  color: #fff;
  letter-spacing: 0.2rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
  line-height: 190%
}
.HeaderSection {
  position: relative;
}
/* ヘッダーは画像の前面（オーバーレイ） */
/* 旧：
.MainVisualHeader{
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 10;
  background: transparent;
}
*/
.MainVisualHeader {
  /* fixed は common.css に従う */
  background: transparent;
  z-index: 1000; /* 念のため強めておく（任意） */
}
/* figure 側は“サイズだけ”にする（余白は親で管理） */
.mv-img {
  width: 17vw; /* 指定：ロゴ幅は 17vw */
  margin: 0;
  padding: 0; /* ← ここは付けない */
}
/* 画像はそのまま等倍表示でOK（SVGなので object-fit は不要） */
.mv-img img {
  width: 100%;
  height: auto;
  display: block;
}
/** ==============================
 * ファーストビュー end
 * ============================== **/
/* セクション区切り線（全ページ内で使い回し） */
.ArchDivider {
  width: 50vw;
  height: 0;
  border-top: .1rem solid #fff;
  margin: 0 auto; /* 上下の余白は必要に応じて調整 */
  opacity: 0.95;
}
/* ==============================
 * architecture: 共通スタイル start（PC）
 * ============================== */
/* 導入セクション（左右2分割） */
.ArchIntroSec {
  width: 100vw;
  padding: 0 0 10vw 0; /* 余白は見本準拠でゆったり */
  color: #fff; /* タグ/ttl/lead を白で表示 */
}
.arch-in {
  width: 100vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 50vw; /* 左=テキスト / 右=画像 */
  gap: 0;
  place-items: center; /* グリッド内：上下左右中央揃え */
}
/* 左：テキスト（左揃え） */
.arch-words {
  text-align: left;
}
.arch-tag { /* str-tag を踏襲して色を白に */
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  color: #fff;
  margin: 0 0 0.5rem 0;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
}
/* 見出し：spanで分け、先頭(髙松レジデンス)のみ90% */
.ArchIntroSec .ttl{
  color: #fff;
  margin: 0 0 2vw 0;
  line-height: 1;
  font-size: 2.9rem;
  display: flex; 
  align-items: center;
  gap: 0.8rem;
}
.ArchIntroSec .ttl > span:first-child {
  font-size: 75%;
  font-weight: 400; /* お好みで 500 に調整可 */
}
/* 2つ目は基準サイズ（必要なら微調整）
.ArchIntroSec .ttl > span:last-child{ font-size: 100%; } */
.ArchIntroSec .lead {
  color: #fff;
  margin: 0;
}
.ArchIntroSec .lead + .lead {
  margin-top: 1.1rem;
}
/* 右：画像 */
.arch-figure {
  width: 50vw;
  margin: 0;
}
.arch-figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* ==============================
 * architecture: 共通スタイル end
 * ============================== */
/* ==============================
 * モデルテのクオリティー start
 * ============================== */
.ArchQualitySec {
  width: 100vw;
  color: #fff;
}
.archq-in {
  width: 100vw;
  margin: 0 auto;
  padding: 4.2vw 5vw 5.2vw; /* 見本の上下感 */
  text-align: center;
}
/* 見出し：commonの .ttl を踏襲しつつ色/サイズ/余白のみ調整 */
.ArchQualitySec .ttl {
  color: #e3dde0; /* やや淡い白 */
  font-size: 3vw; /* 大きめ（見本相当） */
  line-height: 1.35;
  letter-spacing: .12rem;
  margin: 0 0 1vw;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}
/* サブコピー：commonの .lead を踏襲し、色/整列のみ */
.ArchQualitySec .lead {
  color: #efecee;
  text-align: center;
  margin: 0;
  letter-spacing: .08rem;
  font-size: 1.6vw;
  font-family: 'Noto Serif JP', serif;
}
/* ==============================
 * モデルテのクオリティー end
 * ============================== */
/* ==============================
 * モデルテのクオリティー：項目リスト start（PC）
 * ============================== */
.ArchQualList {
  width: 100vw; /* ページ地色は body の #5a5660 を使用 */
}
.aq-in {
  width: 90vw; /* 外側の余白感（見本の白面の左右マージン相当） */
  margin: 0 auto;
}
.aq-item {
  margin: 0 0 2.8vw;
} /* 項目間の間隔 */
/* 白い面（内側カード） */
.aq-card {
  background: #fff; /* 見本の生成りに近い色 */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 指定：1fr / 1fr */
  column-gap: 0;
  align-items: stretch;
}
/* 左：文字群 */
.aq-left {
  color: #3e3a37;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 3.2vw 0 3.2vw 3.5vw;
}
.aq-cat { /* カテゴリ見出し（左上） */
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 2.5rem; /* 見本相当のボリューム */
  line-height: 1;
  letter-spacing: .15rem;
  color: #3a353a;
  margin: 0 0 5vw; /* 上の大きな余白を再現 */
}
.aq-bottom {
  margin-top: auto; /* ← これで下に張り付く */
  padding-top: 2vw; /* 上側に少し間（任意。不要なら削除） */
}
.aq-catch { /* サブ見出し（ゴールド） */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.7;
  letter-spacing: .06rem;
  color: #947847;
  margin: 0 0 1.6vw;
}
.ArchQualList .lead { /* 本文は共通 .lead を踏襲、色のみ */
  width: 33vw;
  color: #3e3a37;
  margin: 0;
}
/* 右：画像（テキスト入り画像） */
.aq-fig {
  margin: 0;
  text-align: center;
}
.aq-fig img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* 図版がはみ出ないように */
}
/* ==============================
 * モデルテのクオリティー：項目リスト end
 * ============================== */
/* ==============================
 * モデルテ：クロージングセクション（PC） start
 * ============================== */
.ArchClosingSec {
  width: 100vw;
  color: #fff; /* 背景は body の #5a5660 を使用 */
  padding: 8vw 0 13vw 0;
}
.archc-in {
  width: 100vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50vw 1fr; /* 左=画像 / 右=テキスト */
  gap: 0;
  align-items: stretch; /* 画像を面いっぱいに */
}
/* 左：画像 */
.archc-figure {
  width: 50vw;
  margin: 0;
}
.archc-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* 右：テキスト（枠に対して下揃え） */
.archc-words {
  font-family: 'Noto Serif JP', serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ← 下揃え */
  padding: 0 0 0 5vw; /* 余白は見本準拠（必要なら数値だけ調整） */
  row-gap: 1.6rem;
  box-sizing: border-box;
}
.archc-copy {
  margin: 0;
  font-size: 1.5rem; /* 通常文 */
  line-height: 2;
  letter-spacing: .06rem;
}
.archc-copy--em {
  font-weight: 400;
  font-size: 1.85rem; /* 強調文を大きく */
  line-height: 1.6;
}
/* ==============================
 * モデルテ：クロージングセクション（PC） end
 * ============================== */
/* ==============================
 * コンセプト型 木造アパート style（PC）start
 * ============================== */
.ArchConceptSec {
  width: 100vw;
  background: #716d6a; /* ご指定の背景色 */
  color: #fff;
}
.acg-in {
  width: 90vw;
  margin: 0 auto;
  padding: 6vw 0 8vw;
}
/* タイトル */
.acg-head {
  text-align: center;
  margin: 0 0 5vw 0;
}
.acg-eyebrow {
  font-family: 'Noto Serif JP', serif;
  margin: 0 0;
  font-size: 1.8rem;
  letter-spacing: .12rem;
  opacity: .9;
}
.acg-ttl {
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 2.5rem;
  letter-spacing: .12rem;
}
/* 3カラム */
.acg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 6vw; /* 縦の間隔 */
  column-gap: 4.5vw; /* 横の間隔 */
}
/* 各カード */
.acg-item {
  text-align: center;
}
.acg-fig {
  width: 100%;
  aspect-ratio: 16 / 11; /* 画像比率を揃える（必要に応じて変更） */
  overflow: hidden;
  margin: 0;
}
.acg-fig img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.acg-name {
  margin: 1.8rem 0 1.5rem 0;
  line-height: 100%;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .1rem;
}
.ArchConceptSec .lead {
  color: #efeceb;
  margin: 0;
  text-align: justify; /* 両端揃え */
  line-height: 1.9;
  letter-spacing: .04rem;
}
/* ==============================
 * コンセプト型 木造アパート style（PC）end
 * ============================== */
 
 /* ==============================
 * フレキシブルな建物づくり style（PC） start
 * ============================== */
.ArchFlexibleSec{
  width: 100vw;
  background: #fbf9f6;               /* ご指定の背景 */
  color: #3e3a37;
}
.af-in{
  width: 90vw;
  margin: 0 auto;
  padding: 6vw 0 8vw;
}

/* タイトル（前ブロックのサイズを流用、色のみ 91837d） */
.af-head .acg-eyebrow{ color:#91837d; }
.af-head .acg-ttl{ color:#91837d; }

/* 2カラムの外枠グリッド：左右に分割して項目を縦積み */
.af-grid{
  display: grid;
  width: 80vw;
  margin: auto;
  grid-template-columns: repeat(2, 1fr); /* 左列／右列 */
  column-gap: 6vw;
  row-gap: 3.6vw;
}

/* 各項目：左=画像／右=テキスト */
.af-item{
  display: grid;
  grid-template-columns: 10VW 1fr;     /* サムネ固定幅＋テキスト */
  column-gap: 1.4rem;
  align-items: center; 
}

/* サムネ（見本のグレー四角。画像差し替えOK） */
.af-thumb{
  width:10VW;
  aspect-ratio: 1/1;
  margin: 0;
  background: #d9d3cf;                  /* 置換前のプレースホルダ色 */
  overflow: hidden;
}
.af-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 右：文章（サブリードは太字、本文は両端揃え） */
.af-words{ }
.af-sub{
  margin: .2rem 0 .6rem;
  font-weight: 700;                      /* ご指定：bold */
  font-size: 1.05rem;                    /* 前ブロックの文字感に合わせて控えめに */
  letter-spacing: .04rem;
}
.ArchFlexibleSec .lead{
  margin: 0;
  text-align: justify;                   /* 両端揃え */
  line-height: 1.9;
  letter-spacing: .02rem;
  color: #6f6963;
}
/* ==============================
 * フレキシブルな建物づくり style（PC） end
 * ============================== */
}
/*//////////SPサイズ///////////*/
@media screen and (max-width:767px) {
/** ==============================
 * ファーストビュー (SP) start
 * ============================== **/
.MainVisualSection {
  position: relative;
  width: 100vw;
  aspect-ratio: 16 / 12;     /* PC比率を踏襲（ヒーロー例外として100vw運用） */
  overflow: hidden;
  background-color: #333;
}

/* ===== 動画背景 ===== */
.MainVisualSection__video-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.MainVisualSection__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ★ 黒オーバーレイ */
.MainVisualSection__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
  pointer-events: none;
}

/* ===== ブランドMOVIEリンク・コピー配置 ===== */
.MainVisualSection__content {
  width: 100vw;
  height: auto;              /* 28vw → 可変 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12vh 0 0 0 ;
  box-sizing: border-box;
}

.MainVisualSection__brand-movie {
  align-self: flex-start;
  position: absolute;
  left: 4vw;                 /* 40px相当 → 4vw */
  bottom: 4vw;
  margin: 0;
  z-index: 2;
  pointer-events: auto;
}
/* ブランドムービーボタン */
.MainVisualSection__brand-link img {
  width: 24vw;               /* 10vw → タップ＆視認性を確保 */
  height: auto;
}

/* ライトボックスのスタイル */
.VideoLightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.VideoLightbox.is-active {
  display: flex;
}
.VideoLightbox__inner {
  position: relative;
  max-width: 90vw;           /* 90% → 90vw */
  max-height: 80vh;
}
.VideoLightbox__inner video {
  width: 100%;
  max-width: 90vw;           /* 1280px → 90vw */
  height: auto;
  display: block;
}
.VideoLightbox__close {
  position: absolute;
  top: .8rem;                /* -2.5rem → 画面内に固定 */
  right: .8rem;
  font-size: 1.6rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
}

.MainVisualSection__brand-link:hover {
  opacity: 0.8;
}

.MainVisualSection__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 右寄せ→左寄せで可読性優先 */
  position: absolute;
  left: 6.5vw;               /* ビルドSP安全域 */
  right: 6.5vw;
  bottom: 12vh;              /* 画面下UIと干渉しにくい位置 */
  margin: 0;
  z-index: 2;
  pointer-events: auto;
}

.MainVisualSection__en.serif {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.8rem;         /* 見出し：ヒーローの役割を考慮してやや大きめ（ビルドSPの例外運用） */
  font-weight: 100;
  color: #fff;
  letter-spacing: .12rem;     /* 0.2rem → 若干詰める */
  text-shadow: 0 .125rem 1.125rem rgba(0, 0, 0, 0.18); /* 0 2px 18px → rem換算 */
  line-height: 1.8;           /* 190% → 規定の1.8 */
}

.HeaderSection {
  position: relative;
}

/* ヘッダーは画像の前面（オーバーレイ） */
.MainVisualHeader {
  /* fixed は common.css に従う */
  background: transparent;
  z-index: 1000;
}

/* figure 側は“サイズだけ”にする（余白は親で管理） */
.mv-img {
  width: 36vw;               /* 17vw → SP視認性に合わせ拡大 */
  margin: 0;
  padding: 0;
}
/* 画像はそのまま等倍表示でOK（SVGなので object-fit は不要） */
.mv-img img {
  width: 100%;
  height: auto;
  display: block;
}
/** ==============================
 * ファーストビュー (SP) end
 * ============================== **/
/* セクション区切り線（SP） */
.ArchDivider {
  width: 87vw;                           /* 50vw → 既定：87vw（左右6.5vw） */
  height: 0;
  border-top: .1rem solid #fff;
  margin: 0rem auto;                     /* 上下の余白は標準2rem（必要に応じて調整） */
  opacity: 0.95;
}

/* ==============================
 * architecture: 共通スタイル (SP) start
 * ============================== */
/* 導入セクション（左右2分割→縦積み） */
.ArchIntroSec {
  width: 100vw;
  padding: 4rem 0;                       /* 0 0 10vw → SP標準余白へ */
  color: #fff;                           /* タグ/ttl/lead を白で表示 */
}

.arch-in {
  width: 87vw;                           /* 100vw → 既定：87vw */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;            /* 1fr 50vw → 1カラム */
  row-gap: 1.6rem;                       /* 縦間隔 */
  column-gap: 0;
  align-items: start;
  justify-items: start;
}

/* 左：テキスト（左揃え） */
.arch-words {
  text-align: left;
}

/* タグ */
.arch-tag {
  font-size: 0.9rem;                     /* PC:1.3rem → ビルドSP本文基準 */
  letter-spacing: 0.1rem;
  color: #fff;
  margin: 0 0 .2rem 0;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 見出し：spanで分け、先頭(髙松レジデンス)のみ相対縮小 */
.ArchIntroSec .ttl {
  color: #fff;
  margin: 0 0 1.2rem 0;                  /* 2vw → 1.2rem */
  line-height: 1.4;
  font-size: 1.6rem;                     /* ビルドSP：見出し固定 */
  display: flex;
  align-items: center;
  gap: .6rem;                            /* 0.8rem → .6rem */
}
.ArchIntroSec .ttl > span:first-child {
  font-size: 75%;
  font-weight: 400;                      /* 必要なら 500 に調整可 */
}
/* 2つ目は基準サイズ（必要なら微調整）
.ArchIntroSec .ttl > span:last-child{ font-size: 100%; } */

/* リード文 */
.ArchIntroSec .lead {
  color: #fff;
  margin: 0;
  font-size: 1.0rem;                     /* ビルドSP：本文 */
  line-height: 1.8;                      /* ビルドSP：行間 */
}
.ArchIntroSec .lead + .lead {
  margin-top: .8rem;                     /* 1.1rem → .8rem */
}

/* 右：画像 → 全幅・比率管理 */
.arch-figure {
  width: 100%;                            /* 50vw → 100% */
  margin: 0;
}
.arch-figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* ==============================
 * architecture: 共通スタイル (SP) end
 * ============================== */
/* ==============================
 * モデルテのクオリティー (SP) start
 * ============================== */
.ArchQualitySec {
  width: 100vw;
  color: #fff;
  padding: 4rem 0;                    /* セクション上下余白をSP基準に */
}
.archq-in {
  width: 87vw;                        /* 100vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto;
  padding: 0;                         /* PCのvwパディングは外す */
  text-align: center;
}

/* 見出し：ビルドSP基準 */
.ArchQualitySec .ttl {
  color: #e3dde0;                     /* やや淡い白 */
  font-size: 1.6rem;                  /* ビルドSP：見出し */
  line-height: 1.4;
  letter-spacing: .12rem;
  margin: 0 0 1rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}

/* サブコピー：ビルドSP基準（本文1.0 / 行間1.8） */
.ArchQualitySec .lead {
  color: #efecee;
  text-align: center;
  margin: 0;
  letter-spacing: .08rem;
  font-size: 1.0rem;                  /* 本文サイズ */
  line-height: 1.8;                   /* 行間 */
  font-family: 'Noto Serif JP', serif;
}
/* ==============================
 * モデルテのクオリティー (SP) end
 * ============================== */
/* ==============================
 * モデルテのクオリティー：項目リスト (SP) start
 * ============================== */
.ArchQualList {
  width: 100vw; /* ページ地色は body の #5a5660 を使用 */
}

.aq-in {
  width: 90vw; /* 外側の余白感（既定：左右6.5vw） */
  margin: 0 auto;
}

.aq-item {
  margin: 0 0 1.6rem; /* 2.8vw → 1.6rem */
} /* 項目間の間隔 */

/* 白い面（内側カード） */
.aq-card {
  background: #fff; /* 見本の生成りに近い色 */
  display: grid;
  grid-template-columns: 1fr; /* 1fr 1fr → 1カラム */
  row-gap: 1.2rem;
  align-items: stretch;
}

/* 左：文字群 */
.aq-left {
  color: #3e3a37;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.5rem; /* 3.2vw 0 3.2vw 3.5vw → 1.6rem 統一 */
}

.aq-cat { /* カテゴリ見出し（左上） */
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 1.5rem; /* 役割文字として見出しより大きめを維持（PC:2.5rem） */
  line-height: 1.2;
  letter-spacing: .15rem;
  color: #3a353a;
  margin: 0 0 1.2rem; /* 5vw → 1.2rem */
}

.aq-bottom {
  margin-top: auto; /* ← これで下に張り付く */
  padding-top: 1rem; /* 2vw → 1rem */
}

.aq-catch { /* サブ見出し（ゴールド） */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.2rem; /* 見出し1.6remより一段下げ */
  line-height: 1.6;
  letter-spacing: .06rem;
  color: #947847;
  margin: 0 0 1rem;
}

.ArchQualList .lead { /* 本文は共通 .lead を踏襲、色のみ */
  width: 100%;             /* 33vw → 100% */
  color: #3e3a37;
  margin: 0;
  font-size: 1.0rem;       /* ビルドSP：本文 */
  line-height: 1.8;        /* ビルドSP：行間 */
}

/* 右：画像（テキスト入り画像） */
.aq-fig {
  margin: 0;
  text-align: center;
}

.aq-fig img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* 図版がはみ出ないように */
}
/* ==============================
 * モデルテのクオリティー：項目リスト (SP) end
 * ============================== */
/* ==============================
 * モデルテ：クロージングセクション (SP) start
 * ============================== */
.ArchClosingSec {
  width: 100vw;
  color: #fff;                 /* 背景は body の #5a5660 を使用 */
  padding: 4rem 0;            /* 8vw 0 13vw → SP基準の上下余白 */
}

.archc-in {
  width: 100vw;                /* 100vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* 50vw 1fr → 1カラム */
  row-gap: 1.5rem;
  align-items: stretch;
}

/* 左：画像 → 全幅・比率管理 */
.archc-figure {
  width: 100%;                /* 50vw → 100% */
  margin: 0;
  aspect-ratio: 16 / 10;      /* 高さを比率で安定 */
  overflow: hidden;
}
.archc-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 右：テキスト（SPは通常フローで可読性優先） */
.archc-words {
  font-family: 'Noto Serif JP', serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 下揃え → 通常フロー */
  padding: 0 5vw;                  /* 0 0 0 5vw → 0 */
  row-gap: 1rem;
  box-sizing: border-box;
}

.archc-copy {
  margin: 0;
  font-size: 1rem;          /* 本文より大きめ（役割配慮） */
  line-height: 1.8;           /* ビルドSP：行間 */
  letter-spacing: .06rem;
  text-align: justify;
}

.archc-copy--em {
  font-weight: 400;
  font-size: 1.2rem;          /* 強調文はさらに一段大きく */
  line-height: 1.7;           /* 文字量とのバランスで少し詰める */
}
/* ==============================
 * モデルテ：クロージングセクション (SP) end
 * ============================== */
/* ==============================
 * コンセプト型 木造アパート style (SP) start
 * ============================== */
.ArchConceptSec {
  width: 100vw;
  background: #716d6a; /* ご指定の背景色 */
  color: #fff;
}

.acg-in {
  width: 90vw;                 /* 90vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto;
  padding: 4rem 0;             /* 6vw 0 8vw → SP基準 */
}

/* タイトル */
.acg-head {
  text-align: center;
  margin: 0 0 2rem 0;          /* 5vw → 2rem */
}
.acg-eyebrow {
  font-family: 'Noto Serif JP', serif;
  margin: 0;
  font-size: 1.2rem;           /* 役割文字：見出しより一段小さく */
  letter-spacing: .12rem;
  opacity: .9;
}
.acg-ttl {
  margin: .3rem 0 0 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 1.4rem;           /* ビルドSP：見出し */
  letter-spacing: .12rem;
  line-height: 1.4;
}

/* 3カラム → SPは2カラム（可読性優先） */
.acg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3 → 2 */
  row-gap: 2rem;            /* 6vw → 1.6rem */
  column-gap: 1.8rem;           /* 4.5vw → 1rem */
}

/* 各カード */
.acg-item {
  text-align: center;
}

.acg-fig {
  width: 100%;
  aspect-ratio: 16 / 11;      /* 画像比率を揃える */
  overflow: hidden;
  margin: 0;
}
.acg-fig img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.acg-name {
  margin: 0 0 0 0;   /* 1.8rem 0 1.5rem → 圧縮 */
  height: 5rem;                /* 高さを固定して統一 */
  display: flex;               /* 中央揃えのためFlex化 */
  align-items: center;         /* 垂直中央 */
  justify-content: center;     /* 水平中央 */
  text-align: center;          /* 複数行の水平中央 */
  line-height: 1.5;            /* 2行＝3remにピッタリ */
  font-weight: 700;
  font-size: 0.9rem;             /* カード名：本文より少し大きく */
  letter-spacing: .1rem;
  overflow: hidden;            /* 3行以上は非表示（はみ出し防止） */
}

.ArchConceptSec .lead {
  color: #efeceb;
  margin: 0;
  text-align: justify;        /* 両端揃え（PC踏襲） */
  font-size: 0.9rem;          /* ビルドSP：本文 */
  line-height: 1.8;           /* ビルドSP：行間 */
  letter-spacing: .04rem;
}
/* ==============================
 * コンセプト型 木造アパート style (SP) end
 * ============================== */


/* ==============================
 * フレキシブルな建物づくり style (SP) start
 * ============================== */
.ArchFlexibleSec{
  width: 100vw;
  background: #fbf9f6;              /* ご指定の背景 */
  color: #3e3a37;
}

.af-in{
  width: 80vw;                      /* 90vw → 既定：87vw（左右6.5vw） */
  margin: 0 auto;
  padding: 4rem 0;                  /* 6vw 0 8vw → SP基準 */
}

/* タイトル（色は踏襲、サイズはビルドSP基準） */
.af-head .acg-eyebrow{ 
  color:#91837d; 
  font-size: 1.2rem;                /* 見出しの補助 */
  letter-spacing: .12rem;
  margin: 0;
  font-family: 'Noto Serif JP', serif;
}
.af-head .acg-ttl{
  color:#91837d;
  font-size: 1.5rem;                /* 見出し */
  line-height: 1.4;
  letter-spacing: .12rem;
  margin: .3rem 0 0 0;
  font-weight: 400;
  font-family: 'Noto Serif JP', serif;
}

/* 2カラムの外枠グリッド → SPは1カラムに */
.af-grid{
  display: grid;
  width: 100%;                      /* 80vw → 親幅に揃える */
  margin: 0 auto;
  grid-template-columns: 1fr;       /* repeat(2,1fr) → 1カラム */
  row-gap: 1.6rem;                  /* 3.6vw → 1.6rem */
  column-gap: 0;
}

/* 各項目：サムネ＋テキストの2カラムは維持（SP横並び） */
.af-item{
  display: grid;
  grid-template-columns: 1fr;  /* 10vw → 視認性重視で拡大 */
  column-gap: 1rem;
  align-items: center; 
}

/* サムネ（正方形） */
.af-thumb{
  width: 22vw;                      /* 10vw → 22vw */
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: #d9d3cf;             /* プレースホルダー色 */
  overflow: hidden;
}
.af-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 右：文章（サブリード太字、本文は両端揃え） */
.af-words{ }

.af-sub{
  margin: 1rem auto 0.3rem;
  font-weight: 700;                 /* ご指定：bold */
  font-size: 1.1rem;                /* SPでわずかに強調 */
  letter-spacing: .04rem;
  text-align: center;
}

.ArchFlexibleSec .lead{
  margin: 0;
  font-size: 1.0rem;                /* ビルドSP：本文 */
  text-align: justify;              /* 両端揃え */
  line-height: 1.8;                 /* ビルドSP：行間 */
  letter-spacing: .02rem;
  color: #6f6963;
}
/* ==============================
 * フレキシブルな建物づくり style (SP) end
 * ============================== */



}