@charset "UTF-8";
/* ============================================================
   mandai home 鹿児島エリア ─ ヘッダー改修 / Topics 上部移動
   既存 style.css / hum-menu.css の後ろに読み込む上書き用CSS
   ============================================================ */

:root{
  --rn-text:  #3e3a39;
  --rn-line:  #d8d5d2;
  --rn-solid: #3e3a39;
  --rn-h-pc:  84px;   /* PCヘッダー高さ */
  --rn-h-sp:  60px;   /* SPヘッダー高さ */

  /* LP（南新町クレール等）で使っているイエロー */
  --rn-yellow:      #FABB05;
  --rn-yellow-dark: #E0A600;   /* hover */
  --rn-yellow-ink:  #1E1E1E;   /* イエローに乗せる文字色 */
  --rn-yellow-bg:   #FFDE00;   /* LPのセクション背景に使っているイエロー */
  /* グレー(#bfbfbf)だったセクション背景の置き換え色
     淡くしたい場合は #FBF3C8（LPのペールイエロー）に差し替える */
  --rn-section-bg:  #FFDE00;
}

/* ---------- グレー背景セクションをイエローに ---------- */
.bg-basecolor{ background-color: var(--rn-section-bg); }

/* ---------- ヘッダー本体（追従） ---------- */
.rn-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--rn-h-pc);
  padding: 0;                      /* 既存の padding:20px 40px を解除 */
  background: #fff;
  box-sizing: border-box;
  display: block;                  /* 既存の flex を解除、内側で組む */
  border-bottom: 1px solid transparent;
  transition: height .25s ease, box-shadow .25s ease, border-color .25s ease;
  z-index: 999;
}
.rn-header.is-scrolled{
  height: 66px;
  box-shadow: 0 1px 12px rgba(0,0,0,.08);
  border-bottom-color: var(--rn-line);
}

.rn-header-inner{
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ロゴ（MANDAI HOME・黒字＋イエローの象マーク） */
.rn-header-logo{ flex: 0 0 auto; }
.rn-header .logo{ margin: 0; line-height: 0; display: flex; align-items: center; }
.rn-header .logo a{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rn-text);
  text-decoration: none;
}
.rn-logo-branch{
  font-family: "Noto Sans JP", "Noto Serif JP", sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  color: #231815;
  white-space: nowrap;
  padding-left: 10px;
  border-left: 1px solid var(--rn-line);
}
.rn-header.is-scrolled .rn-logo-branch{ font-size: .625rem; }
.rn-logo-img{
  width: auto;                 /* テーマの img{width:100%} を打ち消す */
  height: 30px;
  display: block;
  transition: height .25s ease;
}
.rn-header.is-scrolled .rn-logo-img{ height: 25px; }
/* ドロワー内のロゴ */
.logo_h{ line-height: 0; }
.logo_h a{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo_h .rn-logo-img{ height: 26px; }
.logo_h .rn-logo-branch{ font-size: .625rem; }

/* ---------- グローバルナビ ---------- */
.rn-gnav{ flex: 1 1 auto; margin-left: auto; }
.rn-gnav-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 26px;
}
.rn-gnav-item a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--rn-text);
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
}
.rn-gnav-ja{
  font-family: "Noto Serif JP", serif;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
}
.rn-gnav-en{
  font-family: "Cormorant Garamond","Times",serif;
  font-size: .625rem;
  letter-spacing: .1em;
  color: #9b9795;
  transition: opacity .25s ease, max-height .25s ease;
}
.rn-header.is-scrolled .rn-gnav-en{ opacity: 0; max-height: 0; overflow: hidden; }
.rn-gnav-item a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--rn-yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.rn-gnav-item a:hover::after{ transform: scaleX(1); }

/* ---------- CTA ---------- */
.rn-header-cta{
  flex: 0 0 auto;
  margin-left: auto;      /* ナビを畳んだ幅でも右寄せを保つ */
  display: flex;
  align-items: center;
  gap: 10px;
}
.rn-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  font-family: "Noto Serif JP", serif;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 2px;
  transition: background-color .2s ease, color .2s ease, height .25s ease;
}
.rn-header.is-scrolled .rn-btn{ height: 38px; }
.rn-btn-ghost,
.rn-btn-solid{
  color: var(--rn-yellow-ink);
  background: var(--rn-yellow);
  border: 1px solid var(--rn-yellow);
  font-weight: 700;
}
.rn-btn-solid{ letter-spacing: .06em; }   /* 主CTAを少しだけ強く */
.rn-btn-ghost:hover,
.rn-btn-solid:hover{
  background: var(--rn-yellow-dark);
  border-color: var(--rn-yellow-dark);
  color: var(--rn-yellow-ink);
}
/* ---------- ハンバーガー（既存ドロワーを流用） ---------- */
.rn-header .menu-wrapper{ flex: 0 0 auto; position: relative; }
.rn-header .btn{
  position: relative;      /* 既存の position:fixed / right:40px を解除 */
  right: auto;
  padding-right: 0;
  width: 39px; height: 39px;   /* テーマの×アニメーションがこのサイズ前提 */
  cursor: pointer;
  z-index: 1000;           /* ドロワーを開いても×が上に来るように */
}
/* ドロワーを開いている間は×を画面右上に固定する */
.rn-header .btn.close{
  position: fixed;
  top: 24px;
  right: 40px;
}

/* ---------- ヒーローをヘッダーの下から始める（写真の上部が隠れないように） ---------- */
.top-area{
  padding-top: var(--rn-h-pc);
  background: #fff;
}
.top-image{
  position: relative;
  height: calc(100vh - var(--rn-h-pc));
  overflow: hidden;
}

/* ---------- ヒーロースライダー（クロスフェード） ---------- */
.top-image img.rn-hero-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.top-image img.rn-hero-slide.is-active{ opacity: 1; }

.rn-hero-dots{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.rn-hero-dot{
  width: 9px; height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.rn-hero-dot.is-active{
  background: var(--rn-yellow);
  transform: scale(1.25);
}

/* ---------- Scroll インジケーター（写真右側・縦組み） ---------- */
.top-area{ position: relative; }
.rn-hero-scroll{
  position: absolute;
  left: auto;
  right: 40px;
  bottom: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 3;
}
.rn-hero-scroll span{
  position: static;
  left: auto;
  top: auto;
  writing-mode: vertical-rl;
  font-family: "Cormorant Garamond", "Times", serif;
  font-size: .8125rem;
  letter-spacing: .32em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.rn-hero-scroll::after{
  position: static;
  top: auto;
  width: 1px;
  height: 78px;
  background: #fff;
  opacity: 1;
  transform-origin: top center;
  animation: rn-scrollline 2.2s ease-in-out infinite;
}
@keyframes rn-scrollline{
  0%   { transform: scaleY(0); opacity: 0; }
  25%  { opacity: 1; }
  55%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* 本文の余白はヒーロー側で確保するので解除 */
.main-container{ margin-top: 0; }

/* ---------- セクションの余白を揃える ----------
   下端にはページャー（.page-box = 50px）がぶら下がるので、
   padding-bottom はその分だけ引いて「見た目の上下」を同じにする。      */
.event-wrap,
.works-wrap,
.land-wrap,
.modelhouse-wrap,
.readybuilt-wrap,
.others-wrap{
  padding: 100px 0 92px;      /* 見出しの上と、ページャーの下が同じ 100px になる */
}
/* Topics だけひとまわり大きく（見た目の上下＝150px） */
.event-wrap{ padding: 150px 0 142px; }
/* ページャーが出ないセクションは、その分の高さを padding に戻す */
.page-box.is-empty{ display: none; }
/* 24px は拡大ホバー用に .swiper へ入れている余白の分 */
section.rn-no-pager{ padding-bottom: 76px; }
section.event-wrap.rn-no-pager{ padding-bottom: 126px; }
.event-wrap .top-ttl{ font-size: 2.125rem; }

/* スライダーの左右は .swiper-area(1100px) のセンタリングで均等。
   1025〜1180px あたりで 1100px がはみ出すのを防ぐ */
.card01 .swiper-area,
.card20 .swiper-area,
.card02 .swiper-area,
.card03 .swiper-area,
.card04 .swiper-area,
.card05 .swiper-area{ max-width: 100%; }

/* ---------- その他コンテンツ：カードの写真サイズを統一 ----------
   写真を差し替えても縦横比が変わらないようにしておく */
.card05 .slider-phbox{
  aspect-ratio: 278 / 185;
  overflow: hidden;
}
.card05 .slider-phbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- カードのホバー：選んだカードが手前に浮き上がる ---------- */
.slider-wrap .swiper{ padding: 24px 0; }          /* 拡大分がクリップされないよう余白を確保 */
.slide{ position: relative; }
.slide a{ display: block; }
.slide .slider-contents{
  transition: transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s ease;
  will-change: transform;
}
.slide .slider-phbox{ overflow: hidden; }
.slide .slider-phbox img{ transition: transform .6s cubic-bezier(.16,1,.3,1); }
.slide:hover{ z-index: 3; }
.slide:hover .slider-contents{
  transform: scale(1.06);
  box-shadow: 0 22px 46px -20px rgba(0,0,0,.5);
}
.slide:hover .slider-phbox img{ transform: scale(1.09); }
.slide:focus-within .slider-contents{ transform: scale(1.06); }

/* ============================================================
   SP（〜750px）：ナビ・CTAは畳んでロゴ＋MENUのみ
   ============================================================ */
@media screen and (max-width: 1180px){
  .rn-gnav-list{ gap: 16px; }
  .rn-gnav-ja{ font-size: .8125rem; }
  .rn-btn{ padding: 0 12px; font-size: .75rem; }
}

@media screen and (max-width: 900px){
  /* 901〜1000px でナビが消えて何も出ない帯があったので、
     2段ヘッダーに切り替わる 900px までは1段目のナビを出す */
  .rn-gnav{ display: none; }
}

@media screen and (max-width: 750px){
  .rn-header{ height: var(--rn-h-sp); }
  .rn-header.is-scrolled{ height: var(--rn-h-sp); }
  .rn-header-inner{ padding: 0 16px; gap: 10px; }
  .rn-header .logo a{ flex-direction: column; align-items: flex-start; gap: 3px; }
  .rn-logo-img,
  .rn-header.is-scrolled .rn-logo-img{ height: 17px; }
  .rn-logo-branch,
  .rn-header.is-scrolled .rn-logo-branch{
    font-size: .5625rem;
    letter-spacing: .1em;
    padding-left: 0;
    border-left: none;
  }
  .logo_h .rn-logo-img{ height: 22px; }
  .top-area{ padding-top: var(--rn-h-sp); }
  .top-image{ height: calc(100vh - var(--rn-h-sp)); }
  .rn-hero-scroll{ right: 16px; }
  .rn-hero-scroll span{ font-size: .6875rem; }
  .rn-hero-scroll::after{ height: 54px; }
  .rn-hero-dots{ bottom: 18px; }
  .rn-gnav{ display: none; }
  .rn-header-cta .rn-btn-ghost{ display: none; }
  .rn-header-cta .rn-btn-solid{ height: 34px; padding: 0 12px; font-size: .6875rem; }
  .rn-header .btn.close{ top: 16px; right: 16px; }
  .event-wrap,
  .works-wrap,
  .land-wrap,
  .modelhouse-wrap,
  .readybuilt-wrap,
  .others-wrap{ padding: 70px 0 62px; }
  .event-wrap{ padding: 100px 0 92px; }
  section.rn-no-pager{ padding-bottom: 46px; }
  section.event-wrap.rn-no-pager{ padding-bottom: 76px; }
  .event-wrap .top-ttl{ font-size: 1.625rem; }
  /* タップ端末では拡大アニメーションを控えめに */
  .slide:hover .slider-contents{ transform: scale(1.03); }
  .slide:hover .slider-phbox img{ transform: scale(1.05); }
}

/* ドロワー内にもCTAを置く（SPでの導線確保） */
.rn-drawer-cta{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto 28px;
  padding: 0 20px;
}
.rn-drawer-cta .rn-btn{ width: 100%; height: 48px; }
.rn-drawer-cta .rn-btn-solid{ color: #fff; }
.rn-drawer-cta .rn-btn-ghost{ color: var(--rn-ink); }

/* ============================================================
   施工事例スライダー（.card20）— 既存 .card01 と同じ見た目にするための複製
   ※本番では slider.css の `.card01` セレクタに `, .card20` を足すだけでもよい
   ============================================================ */
/* card01_イベント */
.card20{
	margin: 0 auto;
	color: #333;
}
.card20 .swiper{
/*    padding-top: 16px;*/
  }
.card20 .swiper-area{
	position: relative;
	width: 1100px;
	margin: 0 auto;
}
.card20 .swiper-slide{
	background-color: #fff;
	max-width: 251px;
	margin: 0 12px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.card20 .swiper-pagination{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	  -ms-flex-wrap: wrap;
		  flex-wrap: wrap;
	gap: 0rem;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	  -ms-flex-pack: center;
		  justify-content: center;
	margin-top: 3.2rem;
	text-align: center;
}
.card20 .swiper-pagination-bullet{
  width: 5px;
  height: 5px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  vertical-align: top;
	opacity:0.9;
  background-color: #d3d3d3;
}
.card20 .swiper-pagination-bullet-active{
/*  width: 4rem;
  background-color: var(--color-theme);*/
  background-color: #adabab;
}
.card20 .swiper-button-prev, .card20 .swiper-button-next{
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.card20 .swiper-button-prev{
    left: -1rem;
}
.card20 .swiper-button-next{
	right: -1rem;
}
.card20 .swiper-button-prev::before, .card20 .swiper-button-next::before{
	position: absolute;
	content: "";
	width: 3rem;/*2.5rem*/
	height: 5.5rem;/*2.5rem*/
	border-radius: 0;/*50%*/
	background-color: #fff;
	opacity: 0.85;
}
.card20 .swiper-button-prev::after, .card20 .swiper-button-next::after{
	width: 0.8rem;
	height: 0.8rem;
	content: "";
	border: solid rgba(37,66,86,1);
	border-width: 3px 3px 0 0;
}
.card20 .swiper-button-prev::after{
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.card20 .swiper-button-next::after{
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.card20 .slide{
	-webkit-transition: var(--transition);
	transition: var(--transition);
}
.card20 .slide img{
	-webkit-transition: var(--transition);
	transition: var(--transition);
}
.card20 .slide:hover{
/*    -webkit-transform: translateY(-16px);
	transform: translateY(-16px);*/
}
.card20 .slide:hover img{
	-webkit-transform: translateY(0);
			transform: translateY(0);
}
.card20 .slide-media{
	padding-top: 62.5%;
	border-radius: 4px;
}
.card20 .slide-media img{
	height: calc(100% + 16px);
/*    -webkit-transform: translateY(-16px);
		transform: translateY(-16px);*/
}
.card20 .slide-content{
	padding: 3.2rem 0;
}
.card20 .slide-date{
	font-size: 1.2rem;
	line-height: 1;
	display: block;
	color: var(--color-theme);
}
.card20 .slider-txbox{
	min-height: 145px;
	padding: 20px 20px 30px 20px;
}
.card20 .slide-title{
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	height: 3.2em;
	margin-top: 1.6rem;
}
@media only screen and (max-width: 1024px) {
	.card20{
		width: 100%;
		margin: 0 auto;
		color: #333;
	}
	.card20 .swiper-slide{
		background-color: #fff;
/*		max-width: 251px;*/
		max-width: 80%;
		margin: 0;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.3);	
	}
	.card20 .swiper-area{
		position: relative;
		width: 100%;
		margin: 0 auto;
	}
	.card20 .swiper-button-prev{
	    left: 2.5rem;
	}
	.card20 .swiper-button-next{
		right: 2.5rem;
	}
}

/* ============================================================
   v8 ─ niko and ... のモバイルを参考にしたトップ
        ・ヘッダーはイエロー固定
        ・書体は Noto Sans JP
        ・SPはスライダーをやめて2列のタイル並び
   ============================================================ */

:root{
  --rn-font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --rn-ink:  #1E1E1E;
}

/* ---------- 書体 ---------- */
body,
h1, h2, h3, h4, h5, p, li, a, span, div,
button, input, select, textarea,
.logo, .logo-s, .logo_h, .logo-he,
.top-ttl, .top-attl, .slider-ttl, .slider-category, .veiw{
  font-family: var(--rn-font);
}
body{ color: var(--rn-ink); letter-spacing: .01em; }
.slider-ttl{ font-weight: 700; letter-spacing: .01em; }

/* v1〜v7 で明朝を指定していた箇所を Noto Sans にそろえる */
.rn-btn,
.rn-gnav-ja,
.rn-gnav-en,
.rn-logo-branch,
.rn-hero-scroll span,
.hum-lst li, .hum-lst a,
.ftt, .ftd, .fna, .ml-h3, .ml-h4, .mla{
  font-family: var(--rn-font);
}
.rn-btn{ font-weight: 700; }
.rn-hero-scroll span{ font-weight: 500; }
.slider-category{ font-weight: 400; line-height: 1.75; }

/* ---------- ヘッダー：イエロー固定 ---------- */
.rn-header{
  background: var(--rn-yellow-bg);
  border-bottom: 1px solid transparent;
}
.rn-header.is-scrolled{
  box-shadow: 0 2px 14px rgba(0,0,0,.14);
  border-bottom-color: rgba(30,30,30,.14);
}
.rn-header .logo a,
.rn-gnav-item a{ color: var(--rn-ink); }
.rn-gnav-ja{ font-weight: 700; letter-spacing: .04em; }
.rn-gnav-en{
  font-family: var(--rn-font);
  font-weight: 500;
  font-size: .5625rem;
  letter-spacing: .12em;
  color: rgba(30,30,30,.62);
}
/* イエローの上ではホバー下線もインクの色に */
.rn-gnav-item a::after{ background: var(--rn-ink); }
.rn-logo-branch{ color: var(--rn-ink); border-left-color: rgba(30,30,30,.35); }
.rn-header .bar{ background-color: var(--rn-ink); }

/* CTA：イエローの上なので黒／白で出す */
.rn-btn-solid{
  background: var(--rn-ink);
  border-color: var(--rn-ink);
  color: #fff;
}
.rn-btn-solid:hover{ background: #000; border-color: #000; color: #fff; }
.rn-btn-ghost{
  background: #fff;
  border-color: var(--rn-ink);
  color: var(--rn-ink);
}
.rn-btn-ghost:hover{ background: var(--rn-ink); border-color: var(--rn-ink); color: #fff; }

/* キャプションカードはSPのみ */
.rn-hero-caption{ display: none; }

/* ---------- セクション見出し（英字＋和文の2段） ---------- */
.rn-ttl{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
}
.rn-ttl-en{
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: .06em;
}
.rn-ttl-ja{
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .16em;
  opacity: .72;
}
.event-wrap .rn-ttl-en{ font-size: 2.25rem; }

/* ============================================================
   SP（〜750px）
   ============================================================ */
@media screen and (max-width: 750px){

  /* --- ヒーロー：ヘッダー直下いっぱい --- */
  .top-image{ height: 62vh; }

  /* --- ヒーロー直下のキャプションカード（niko and 風） --- */
  .rn-hero-caption{
    position: relative;
    margin: 0 16px 8px;
    padding: 18px 18px 20px;
    background: #fff;
    border: 1px solid var(--rn-ink);
    border-radius: 4px;
    text-decoration: none;
    color: var(--rn-ink);
    display: block;
    z-index: 2;
  }
  .rn-hero-caption::before{      /* カードから上に伸びる線とピン */
    content: "";
    position: absolute;
    left: 34px;
    top: -26px;
    width: 1px;
    height: 26px;
    background: var(--rn-ink);
  }
  .rn-hero-caption::after{
    content: "";
    position: absolute;
    left: 30px;
    top: -32px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rn-yellow);
    border: 1px solid var(--rn-ink);
  }
  .rn-hero-caption .ttl{
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 4px;
  }
  .rn-hero-caption .sub{
    font-size: .75rem;
    line-height: 1.7;
    margin: 0;
    opacity: .78;
  }
  .top-area{ padding-bottom: 30px; }

  /* --- 見出し --- */
  .rn-ttl-en{ font-size: 1.75rem; }
  .event-wrap .rn-ttl-en{ font-size: 1.875rem; }
  .rn-ttl-ja{ font-size: .75rem; }

  /* --- スライダーをやめて2列のタイルに --- */
  .slider-wrap .swiper{ padding: 0; overflow: visible; }
  .swiper-area{ width: auto !important; }
  .swiper-wrapper{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    transform: none !important;
    width: auto !important;
  }
  .swiper-slide{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none;
    border: 1px solid rgba(30,30,30,.14);
    background: #fff;
  }
  .swiper-button-prev,
  .swiper-button-next,
  .page-box{ display: none !important; }
  /* テーマは content-box 指定なので、そのままだと padding 分だけ右にはみ出す */
  .l-inner, .l3-inner{
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0 16px !important;
  }
  /* 1枚しかないセクションは横いっぱいに */
  .swiper-wrapper.is-single{ grid-template-columns: 1fr; }

  /* タイルの中身 */
  .slider-phbox{ aspect-ratio: 3 / 2; overflow: hidden; }
  .slider-phbox img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .slider-txbox{
    padding: 12px 12px 14px !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  /* 絶対配置をやめて本文と重ならないようにする */
  .slider-txbox .veiw{
    position: static;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    margin-top: 4px;
  }
  .slider-ttl{ font-size: .8125rem; line-height: 1.5; }
  .slider-category{ font-size: .6875rem; line-height: 1.6; }
  .veiw{ font-size: .6875rem; }

  /* タップ端末では拡大ホバーを無効に */
  .slide:hover .slider-contents{ transform: none; box-shadow: none; }
  .slide:hover .slider-phbox img{ transform: none; }

  /* セクションの余白（タイル化でページャーが無くなる分をそろえる） */
  .event-wrap,
  .works-wrap,
  .land-wrap,
  .modelhouse-wrap,
  .readybuilt-wrap,
  .others-wrap,
  section.rn-no-pager{ padding: 64px 0 !important; }
  .event-wrap,
  section.event-wrap.rn-no-pager{ padding: 84px 0 !important; }
}

/* ============================================================
   v9 ─ CTAを「白地・丸ボタン」に
   ============================================================ */
.rn-btn{
  border-radius: 999px;
  padding: 0 26px;
}
.rn-btn-ghost,
.rn-btn-solid,
.rn-drawer-cta .rn-btn-ghost,
.rn-drawer-cta .rn-btn-solid{
  background: #fff;
  border: 1px solid var(--rn-ink);
  color: var(--rn-ink);
}
.rn-btn-solid{ font-weight: 700; }   /* 主CTAは太さだけ差をつける */
.rn-btn-ghost:hover,
.rn-btn-solid:hover{
  background: var(--rn-ink);
  border-color: var(--rn-ink);
  color: #fff;
}
.rn-drawer-cta .rn-btn{ border-radius: 999px; }

@media screen and (max-width: 750px){
  .rn-header-cta .rn-btn-solid{ padding: 0 16px; }
}

/* ============================================================
   v10 ─ 写真は正方形が基本（niko and ... の組み方に合わせる）
        ・SPのヒーローもフルブリードの正方形
        ・カードの写真は全て 1:1
        ・タイルは左右15px・間隔20px
   ============================================================ */

/* カードの写真は全て正方形 */
.slider-phbox{
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.slider-phbox img,
.card05 .slider-phbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card05 .slider-phbox{ aspect-ratio: 1 / 1; }

@media screen and (max-width: 750px){
  /* ヒーローは画面幅いっぱいの正方形 */
  .top-image{
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .top-image img.rn-hero-slide{ position: absolute; inset: 0; }

  /* タイルの余白を niko and に合わせる */
  .l-inner, .l3-inner{ padding: 0 15px !important; }
  .swiper-wrapper{ gap: 20px 20px; }
  .slider-phbox{ aspect-ratio: 1 / 1; }

  /* キャプションカードも左右15pxに */
  .rn-hero-caption{ margin: 0 15px 8px; }

  /* タイルの高さをそろえる（文章の長さが違っても下端が揃う） */
  .swiper-slide{ display: flex; }
  .swiper-slide > .slide{ display: flex; width: 100%; }
  .swiper-slide > .slide > a{ display: flex; flex-direction: column; width: 100%; }
  .swiper-slide .slider-contents{ display: flex; flex-direction: column; flex: 1 1 auto; }
  .swiper-slide .slider-txbox{ flex: 1 1 auto; }
  .swiper-slide .slider-txbox .veiw{ margin-top: auto; }
}

/* ============================================================
   v11 ─ トップを niko and ... 型の組みブロックに
        左：大きな正方形（ヒーロースライダー）＋キャプションカード
        右：正方形タイル2枚 ＋ 施工事例パネル
        SPでは 上から 正方形ビジュアル → キャプション → タイル2枚 → パネル
   ============================================================ */

.rn-top-block{
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--rn-h-pc) + 28px) 60px 60px;   /* 固定ヘッダー分を確保 */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

/* --- 左：ヒーロー --- */
.rn-top-left .top-area{ padding-top: 0; }
.rn-top-left .top-image{
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
}
.rn-hero-scroll{ display: none; }          /* この組みでは使わない */

/* キャプションカードはPCでも出す */
.rn-hero-caption{
  display: block;
  position: relative;
  margin: 34px 0 0 0;
  padding: 22px 26px 24px;
  background: #fff;
  border: 1px solid var(--rn-ink);
  border-radius: 10px;
  text-decoration: none;
  color: var(--rn-ink);
}
.rn-hero-caption::before{
  content: "";
  position: absolute;
  left: 40px; top: -26px;
  width: 1px; height: 26px;
  background: var(--rn-ink);
}
.rn-hero-caption::after{
  content: "";
  position: absolute;
  left: 36px; top: -32px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rn-yellow);
  border: 1px solid var(--rn-ink);
}
.rn-hero-caption .ttl{
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 6px;
}
.rn-hero-caption .sub{
  font-size: .8125rem;
  line-height: 1.8;
  margin: 0;
  opacity: .8;
}

/* --- 右上：正方形タイル2枚 --- */
.rn-top-right{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rn-top-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.rn-tile{
  display: block;
  padding: 16px;
  border: 1px solid rgba(30,30,30,.18);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--rn-ink);
  transition: box-shadow .3s ease, transform .3s ease;
}
.rn-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.4);
}
.rn-tile-label{
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: .5;
  margin-bottom: 10px;
}
.rn-tile-img{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
}
.rn-tile-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-tile-ttl{
  display: block;
  margin-top: 12px;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.5;
}

/* --- 右下：施工事例パネル --- */
.rn-top-list{
  background: var(--rn-yellow-bg);
  border-radius: 16px;
  padding: 26px 26px 22px;
  flex: 1 1 auto;
}
.rn-top-list-head{
  text-align: center;
  border-bottom: 1px solid rgba(30,30,30,.35);
  padding-bottom: 14px;
  margin-bottom: 6px;
  position: relative;
}
.rn-top-list-head h2{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.1;
}
.rn-top-list-head .en{
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.rn-top-list-head .ja{
  font-size: .75rem;
  letter-spacing: .16em;
  opacity: .75;
}
.rn-top-list-head .more{
  position: absolute;
  right: 0; bottom: 14px;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--rn-ink);
  text-decoration: none;
  white-space: nowrap;
}
.rn-top-list-head .more span{ font-size: .5rem; }
.rn-top-list-head .more:hover{ text-decoration: underline; }

.rn-top-list-items{
  list-style: none;
  margin: 0;
  padding: 0;
}
.rn-top-list-items li + li{ border-top: 1px solid rgba(30,30,30,.18); }
.rn-top-list-items a{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  text-decoration: none;
  color: var(--rn-ink);
}
.rn-top-list-items a:hover .ttl{ text-decoration: underline; }
.rn-top-list-items .thumb{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}
.rn-top-list-items .thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-top-list-items .meta{
  display: block;
  font-size: .6875rem;
  opacity: .7;
  margin-bottom: 4px;
}
.rn-top-list-items .ttl{
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ============================================================
   SP：1列に積む
   ============================================================ */
@media screen and (max-width: 900px){
  .rn-top-block{
    grid-template-columns: 1fr;
    gap: 26px;
    padding: var(--rn-h-sp) 0 40px;   /* SPはヘッダー直下からビジュアル */
  }
  /* ヒーローは画面幅いっぱい（左右の余白なし） */
  .rn-top-left .top-image{ border-radius: 0; }
  .rn-hero-caption{
    margin: 30px 15px 0;
    padding: 18px 18px 20px;
    border-radius: 8px;
  }
  .rn-hero-caption::before{ left: 34px; }
  .rn-hero-caption::after{ left: 30px; }
  .rn-hero-caption .ttl{ font-size: .9375rem; }
  .rn-hero-caption .sub{ font-size: .75rem; }

  .rn-top-right{ padding: 0 15px; gap: 26px; }
  .rn-top-tiles{ gap: 20px; }
  .rn-tile{ padding: 0; border: none; border-radius: 0; }
  .rn-tile-label{ display: none; }
  .rn-tile-img{ border-radius: 0; }
  .rn-tile-ttl{ font-size: .75rem; }

  .rn-top-list{ padding: 26px 20px 20px; }
  .rn-top-list-head{ padding-bottom: 18px; }
  .rn-top-list-head .en{ font-size: 1.625rem; }
  .rn-top-list-head .more{
    position: static;
    display: block;
    margin-top: 10px;
  }
  .rn-top-list-items a{ grid-template-columns: 96px 1fr; gap: 14px; padding: 16px 0; }
}

/* ============================================================
   v12 ─ 配色をパステル寄りに／左右カラムの下端をそろえる
        アクセントはコーポレートサイトのヘッダーCTAと同じ2色
          オレンジ #FABB05 ／ イエロー #FFF100
   ============================================================ */

:root{
  --rn-accent-orange: #FABB05;   /* mandai-home.com .header-cta-orange */
  --rn-accent-yellow: #FFF100;   /* mandai-home.com .header-cta-yellow */
  /* 面で使うイエローはパステル寄りに落とす */
  --rn-yellow-bg:   #FFEC87;
  --rn-section-bg:  #FFEC87;
  --rn-yellow:      #FABB05;
  --rn-yellow-dark: #E0A600;
}

/* パステル地の上ではアクセントのオレンジがちゃんと効く */
.rn-gnav-item a::after{ background: var(--rn-accent-orange); }
.rn-hero-dot.is-active{ background: var(--rn-accent-orange); }
.rn-top-list-head .more{ color: #8a6400; }
.rn-top-list-head .more:hover{ color: var(--rn-ink); }

/* ---------- 左右カラムの下端をそろえる ---------- */
.rn-top-block{ align-items: stretch; }
.rn-top-left{
  display: flex;
  flex-direction: column;
}
.rn-top-left .top-area{
  flex: 1 1 auto;          /* キャプションはこの中にあるので、ここを伸ばす */
  display: flex;
  flex-direction: column;
}
.rn-top-left .top-image{ flex: 0 0 auto; }

.rn-hero-caption-wrap{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* 画像の下からカードまでを結ぶ線。余った高さの分だけ伸びる */
.rn-hero-caption-line{
  flex: 1 1 auto;
  min-height: 34px;
  width: 1px;
  margin-left: 40px;
  background: var(--rn-ink);
  position: relative;
}
.rn-hero-caption-line::before{      /* ピン */
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rn-accent-orange);
  border: 1px solid var(--rn-ink);
}
/* もとの擬似要素の線・ピンは使わない */
.rn-hero-caption{ margin: 0; }
.rn-hero-caption::before,
.rn-hero-caption::after{ content: none; }

@media screen and (max-width: 900px){
  .rn-top-left{ display: block; }
  .rn-hero-caption-wrap{ display: block; padding: 0 15px; }
  .rn-hero-caption-line{
    min-height: 30px;
    height: 30px;
    margin-left: 25px;
  }
  .rn-hero-caption{ margin: 0; }
}

/* ============================================================
   v13 ─ 「万代ホームについて」の帯セクション
   ============================================================ */
.rn-about-band{
  background: #F4F1EA;
  padding: 88px 0 92px;
}
.rn-about-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
}
.rn-about-ttl-head{
  margin: 0 0 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
}
.rn-about-ttl-head .en{
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.rn-about-ttl-head .ja{
  font-size: .8125rem;
  letter-spacing: .16em;
  opacity: .72;
}
.rn-about-lead{
  text-align: center;
  font-size: .875rem;
  line-height: 2;
  margin: 0 0 44px;
  opacity: .85;
}
.rn-about-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.rn-about-item a{
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: start;
  text-decoration: none;
  color: var(--rn-ink);
}
.rn-about-frame{
  display: block;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(30,30,30,.75);
}
.rn-about-frame img{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.rn-about-ttl{
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
}
.rn-about-tx{
  display: block;
  font-size: .75rem;
  line-height: 1.9;
  opacity: .78;
}
.rn-about-item a:hover .rn-about-ttl{ text-decoration: underline; }
.rn-about-item a:hover .rn-about-frame{ box-shadow: 0 14px 30px -16px rgba(0,0,0,.45); }
.rn-about-more{
  text-align: center;
  margin: 46px 0 0;
}
.rn-about-more a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 30px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--rn-ink);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
}
.rn-about-more a span{ font-size: .5625rem; }
.rn-about-more a:hover{ background: var(--rn-ink); color: #fff; }

@media screen and (max-width: 900px){
  .rn-about-band{ padding: 60px 0 64px; }
  .rn-about-inner{ padding: 0 20px; }
  .rn-about-ttl-head .en{ font-size: 1.75rem; }
  .rn-about-lead{ font-size: .8125rem; margin-bottom: 32px; }
  .rn-about-list{ grid-template-columns: 1fr; gap: 26px; }
  .rn-about-item a{ grid-template-columns: 108px 1fr; gap: 16px; }
  .rn-about-more{ margin-top: 34px; }
}

/* ============================================================
   v13b ─ カードのセクションを niko and ... の FEATURE 型に
          見出しは左寄せ＋右に「一覧」ボタン
          カードは 正方形写真 → ラベル／View More → タイトル → 説明
   ============================================================ */
.rn-sec-head{
  max-width: 1100px;
  margin: 0 auto 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.rn-sec-head .rn-ttl{
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  text-align: left;
}
.rn-sec-head .rn-ttl-en{ font-size: 1.75rem; }
.rn-sec-head .rn-ttl-ja{ font-size: .75rem; }
.event-wrap .rn-sec-head .rn-ttl-en{ font-size: 1.875rem; }
.rn-sec-more{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 22px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--rn-ink);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.rn-sec-more span{ font-size: .5rem; }
.rn-sec-more:hover{ background: var(--rn-ink); color: #fff; }

/* --- カードの中身 --- */
.swiper-slide{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.slider-txbox{
  background: transparent !important;
  color: var(--rn-ink) !important;
  padding: 14px 0 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
}
.slider-txbox::before{
  grid-column: 1;
  grid-row: 1;
  content: "";
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border: 1px solid rgba(30,30,30,.55);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.event-wrap      .slider-txbox::before{ content: "イベント"; }
.works-wrap      .slider-txbox::before{ content: "施工事例"; }
.land-wrap       .slider-txbox::before{ content: "土地情報"; }
.modelhouse-wrap .slider-txbox::before{ content: "モデルハウス"; }
.readybuilt-wrap .slider-txbox::before{ content: "建売物件"; }
.others-wrap     .slider-txbox::before{ content: "コンテンツ"; }

.slider-ttl{
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}
.slider-category{
  grid-column: 1 / -1;
  font-size: .75rem;
  line-height: 1.85;
  margin: 0;
  opacity: .75;
}
.slider-txbox .veiw{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  position: static;
  right: auto;
  bottom: auto;
  margin: 0;
  font-size: .6875rem;
  font-weight: 700;
  opacity: .6;
}
.slide:hover .slider-ttl{ text-decoration: underline; }
.slide:hover .slider-contents{ transform: none; box-shadow: none; }
.slide .slider-phbox{ transition: box-shadow .3s ease; }
.slide:hover .slider-phbox{ box-shadow: 0 16px 34px -18px rgba(0,0,0,.4); }

@media screen and (max-width: 900px){
  .rn-sec-head{
    padding: 0 15px;
    margin-bottom: 24px;
    align-items: flex-end;
  }
  .rn-sec-head .rn-ttl-en,
  .event-wrap .rn-sec-head .rn-ttl-en{ font-size: 1.5rem; }
  .rn-sec-more{ height: 34px; padding: 0 16px; font-size: .6875rem; }
  .slider-txbox{ gap: 8px 8px; padding: 12px 0 0 !important; }
  .slider-txbox::before{ height: 22px; padding: 0 10px; font-size: .625rem; }
  .slider-ttl{ font-size: .8125rem; }
  .slider-category{ font-size: .6875rem; }
}

/* 矢印は白い丸ボタンにして、カードに重ならない位置へ */
.swiper-button-prev,
.swiper-button-next{
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px;
  border-radius: 50%;
  background: #fff !important;
  border: 1px solid rgba(30,30,30,.25);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
}
.card01 .swiper-button-prev,
.card20 .swiper-button-prev,
.card02 .swiper-button-prev,
.card03 .swiper-button-prev,
.card04 .swiper-button-prev,
.card05 .swiper-button-prev{ left: -22px !important; }
.card01 .swiper-button-next,
.card20 .swiper-button-next,
.card02 .swiper-button-next,
.card03 .swiper-button-next,
.card04 .swiper-button-next,
.card05 .swiper-button-next{ right: -22px !important; }
.swiper-button-disabled{ opacity: 0; pointer-events: none; }

/* テーマが矢印の背後に敷いているクリーム色のブロックを消す */
.swiper-button-prev::before,
.swiper-button-next::before{ display: none !important; }
.swiper-button-prev::after,
.swiper-button-next::after{ border-color: var(--rn-ink) !important; }

/* ============================================================
   v14 ─ スタッフ紹介 ＋ コラム（方眼紙の帯）
   ============================================================ */
.rn-grid-band{
  background-color: #FCFBF6;
  background-image:
    linear-gradient(rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(rgba(30,30,30,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.10) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-top: 1px solid rgba(30,30,30,.14);
  border-bottom: 1px solid rgba(30,30,30,.14);
}
.rn-grid-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.rn-staff-sec{ padding: 90px 0 70px; }
.rn-column-sec{ padding: 0 0 96px; }

/* --- スタッフ：丸い写真 --- */
.rn-staff-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.rn-staff-item a{
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--rn-ink);
}
.rn-staff-photo{
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(30,30,30,.55);
  background: #fff;
  transition: box-shadow .3s ease, transform .3s ease;
}
.rn-staff-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-staff-item a:hover .rn-staff-photo{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.45);
}
.rn-staff-name{
  display: block;
  margin-top: 16px;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.rn-staff-role{
  display: block;
  margin-top: 4px;
  font-size: .6875rem;
  line-height: 1.6;
  opacity: .7;
}

/* --- コラム：ポラロイド風 --- */
.rn-column-list{
  list-style: none;
  margin: 0;
  padding: 10px 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.rn-col-card{
  display: block;
  background: #fff;
  padding: 13px 13px 22px;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.42);
  text-decoration: none;
  color: var(--rn-ink);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.rn-col-item:nth-child(1) .rn-col-card{ transform: rotate(-2.2deg); }
.rn-col-item:nth-child(2) .rn-col-card{ transform: rotate(1.4deg); }
.rn-col-item:nth-child(3) .rn-col-card{ transform: rotate(-1.2deg); }
.rn-col-item:nth-child(4) .rn-col-card{ transform: rotate(2deg); }
.rn-col-item:nth-child(2){ margin-top: 26px; }
.rn-col-item:nth-child(4){ margin-top: 18px; }
.rn-col-card:hover{
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.5);
}
.rn-col-photo{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.rn-col-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-col-cat{
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-top: 14px;
  padding: 0 10px;
  border: 1px solid rgba(30,30,30,.5);
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 700;
}
.rn-col-ttl{
  display: block;
  margin-top: 10px;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.65;
}

@media screen and (max-width: 900px){
  .rn-grid-inner{ padding: 0 15px; }
  .rn-staff-sec{ padding: 60px 0 46px; }
  .rn-column-sec{ padding: 0 0 64px; }
  .rn-staff-list{ grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
  .rn-staff-name{ margin-top: 12px; font-size: .8125rem; }
  .rn-staff-role{ font-size: .625rem; }
  .rn-column-list{ grid-template-columns: 1fr 1fr; gap: 20px; }
  .rn-col-card{ padding: 10px 10px 18px; }
  .rn-col-item:nth-child(2){ margin-top: 20px; }
  .rn-col-item:nth-child(4){ margin-top: 20px; }
  .rn-col-ttl{ font-size: .75rem; }
}

/* ============================================================
   v15 ─ フッター（ヘッダーと同じイエロー）
   ============================================================ */
.rn-footer{
  background: var(--rn-yellow-bg);
  color: var(--rn-ink);
  padding: 72px 0 0;
  margin: 0;
}
.rn-footer-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px 48px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
}
.rn-footer-logo{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--rn-ink);
  margin-bottom: 30px;
}
.rn-footer-logo img{ width: auto; height: 32px; display: block; }
.rn-footer-logo .branch{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding-left: 12px;
  border-left: 1px solid rgba(30,30,30,.35);
}
.rn-footer-nav{
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rn-footer-nav a{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--rn-ink);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.rn-footer-nav a:hover{ background: var(--rn-ink); color: #fff; }
.rn-footer-head{
  margin: 0 0 12px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.rn-footer-sns{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.rn-footer-sns a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rn-ink);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 700;
}
.rn-footer-sns i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--rn-ink);
  border-radius: 50%;
  font-size: .9375rem;
  background: #fff;
}
.rn-footer-sns a:hover i{ background: var(--rn-ink); color: var(--rn-yellow-bg); }

/* 右カラム */
.rn-footer-side{
  border-left: 1px solid rgba(30,30,30,.28);
  padding-left: 40px;
}
.rn-footer-company{ margin-bottom: 24px; }
.rn-footer-company .name{
  margin: 0 0 10px;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.7;
}
.rn-footer-company .addr,
.rn-footer-company .tel{
  margin: 0 0 4px;
  font-size: .75rem;
  line-height: 1.8;
}
.rn-footer-company .tel a{ color: var(--rn-ink); text-decoration: none; font-weight: 700; }
.rn-footer-corp{
  display: block;
  position: relative;
  padding: 16px 40px 16px 18px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--rn-ink);
  border-radius: 10px;
  text-decoration: none;
  color: var(--rn-ink);
  transition: background-color .2s ease, color .2s ease;
}
.rn-footer-corp .lbl{
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.5;
}
.rn-footer-corp .sub{
  display: block;
  margin-top: 4px;
  font-size: .6875rem;
  line-height: 1.6;
  opacity: .72;
}
.rn-footer-corp .arrow{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}
.rn-footer-corp:hover{ background: var(--rn-ink); color: #fff; }
.rn-footer-corp:hover .sub{ opacity: .85; }

.rn-footer-copy{
  margin: 0;
  padding: 18px 20px 22px;
  text-align: center;
  font-size: .6875rem;
  border-top: 1px solid rgba(30,30,30,.28);
}

@media screen and (max-width: 900px){
  .rn-footer{ padding-top: 52px; }
  .rn-footer-inner{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 0 20px 32px;
  }
  .rn-footer-logo img{ height: 26px; }
  .rn-footer-nav{ gap: 8px; margin-bottom: 28px; }
  .rn-footer-nav a{ height: 30px; padding: 0 12px; font-size: .6875rem; }
  .rn-footer-sns{ gap: 14px; }
  .rn-footer-sns a span{ display: none; }
  .rn-footer-side{
    border-left: none;
    border-top: 1px solid rgba(30,30,30,.28);
    padding-left: 0;
    padding-top: 28px;
  }
}

/* ============================================================
   v16 ─ スタッフ紹介の背景にアクセントカラーを敷く
        方眼の罫線はそのまま、下地だけオレンジ寄りに
   ============================================================ */
:root{
  /* アクセントオレンジ #FABB05 を白で薄めた色。ここだけ変えれば濃さを調整できる */
  --rn-staff-bg: #FDDD82;
}
.rn-staff-sec{
  background-color: var(--rn-staff-bg);
  background-image:
    linear-gradient(rgba(30,30,30,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.06) 1px, transparent 1px),
    linear-gradient(rgba(30,30,30,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.11) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-bottom: 1px solid rgba(30,30,30,.14);
  margin-bottom: 76px;
}
/* 丸写真はアクセントの上でもくっきり見えるように */
.rn-staff-photo{
  border-color: var(--rn-ink);
  box-shadow: 0 0 0 6px rgba(255,255,255,.55);
}
.rn-staff-item a:hover .rn-staff-photo{
  box-shadow: 0 0 0 6px rgba(255,255,255,.85),
              0 16px 30px -16px rgba(0,0,0,.45);
}
.rn-staff-sec .rn-sec-more{ background: #fff; }

@media screen and (max-width: 900px){
  .rn-staff-sec{ margin-bottom: 52px; }
  .rn-staff-photo{ box-shadow: 0 0 0 4px rgba(255,255,255,.55); }
}

/* ============================================================
   v17 ─ 黄色をレモンイエローに／吹き出しを元に戻して下にCTA
         写真を正方形に／全体幅を広げる／一覧ボタンを押しやすく
   ============================================================ */

:root{
  /* niko and ... のモバイルで使われている黄（実測 rgb(255,244,92)） */
  --rn-yellow-bg:  #FFF45C;
  --rn-section-bg: #FFF45C;
  /* スタッフ帯は niko and の副色寄り（実測 rgb(255,213,112)） */
  --rn-staff-bg:   #FFD570;
  /* 本文の最大幅 */
  --rn-w: 1320px;
}

/* ---------- 吹き出しは元の位置に戻し、余った高さはCTAで埋める ---------- */
.rn-hero-caption-line{
  flex: 0 0 auto;
  height: 34px;
  min-height: 34px;
}
.rn-hero-cta{
  margin-top: auto;          /* 余白を吸収して下端をそろえる */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--rn-ink);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 0 0 var(--rn-ink);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.rn-hero-cta span{ font-size: .5625rem; }
.rn-hero-cta:hover{
  background: var(--rn-ink);
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--rn-ink);
}

/* ---------- 一覧ボタンをはっきりボタンらしく ---------- */
.rn-sec-more,
.rn-top-list-head .more,
.rn-about-more a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--rn-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 0 0 var(--rn-ink);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.rn-sec-more:hover,
.rn-top-list-head .more:hover,
.rn-about-more a:hover{
  background: var(--rn-ink);
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 var(--rn-ink);
}
/* 施工事例パネル内の一覧ボタン */
.rn-top-list-head{ padding-bottom: 20px; }
.rn-top-list-head .more{
  position: absolute;
  right: 0;
  bottom: 18px;
  height: 34px;
  padding: 0 18px;
  font-size: .75rem;
}
.rn-top-list-head .more span{ font-size: .5rem; }

/* ---------- ABOUT の写真も正方形に ---------- */
.rn-about-frame img{ aspect-ratio: 1 / 1; }
.rn-about-item a{ grid-template-columns: 150px 1fr; }

/* ---------- 全体幅を広げる ---------- */
.rn-sec-head{
  max-width: calc(var(--rn-w) + 40px);
  padding: 0 20px;
  box-sizing: border-box;
}
.rn-grid-inner{ max-width: calc(var(--rn-w) + 40px); }
.rn-about-inner{ max-width: calc(var(--rn-w) + 120px); padding: 0 60px; }
.rn-footer-inner{ max-width: calc(var(--rn-w) + 120px); }

@media screen and (min-width: 901px){
  /* テーマ側の外枠（1260px / 1100px）も広げる */
  .slider-inner{ max-width: calc(var(--rn-w) + 40px); }
  .l-inner, .l3-inner{
    max-width: var(--rn-w);
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* スライダーの見える幅とカード幅を広げる（4枚並びは維持） */
  .card01 .swiper-area,
  .card20 .swiper-area,
  .card02 .swiper-area,
  .card03 .swiper-area,
  .card04 .swiper-area,
  .card05 .swiper-area{
    width: 100% !important;
    max-width: 100% !important;
  }
  .card01 .swiper-slide,
  .card20 .swiper-slide,
  .card02 .swiper-slide,
  .card03 .swiper-slide,
  .card04 .swiper-slide,
  .card05 .swiper-slide{ max-width: 306px !important; }
}

@media screen and (max-width: 900px){
  .rn-hero-cta{
    margin: 22px 15px 0;
    align-self: stretch;
    height: 48px;
    font-size: .8125rem;
  }
  .rn-about-item a{ grid-template-columns: 120px 1fr; }
  .rn-about-inner{ padding: 0 20px; }
}

/* ============================================================
   v18 ─ イエローのセクション（TOPICS / 土地情報）も方眼紙に
   ============================================================ */
.bg-basecolor{
  background-color: var(--rn-section-bg);
  background-image:
    linear-gradient(rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(rgba(30,30,30,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.10) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ============================================================
   v19 ─ モデルハウス／建売は「一覧へのリンクカード」に
   ============================================================ */
.rn-linkcards-sec{ padding: 100px 0; }
.rn-linkcards-inner{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.rn-linkcard{
  padding: 18px 18px 22px;
  border: 1px solid rgba(30,30,30,.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 0 0 rgba(30,30,30,.85);
}
.rn-linkcard:hover{
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 rgba(30,30,30,.85);
}
.rn-linkcard .rn-tile-ttl{
  margin-top: 14px;
  font-size: 1rem;
}
.rn-linkcard-sub{
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  line-height: 1.7;
  opacity: .72;
}

@media screen and (max-width: 900px){
  .rn-linkcards-sec{ padding: 64px 0; }
  .rn-linkcards-inner{ padding: 0 15px; gap: 16px; }
  .rn-linkcard{ padding: 12px 12px 16px; border-radius: 10px; }
  .rn-linkcard .rn-tile-ttl{ font-size: .8125rem; margin-top: 10px; }
  .rn-linkcard-sub{ font-size: .6875rem; }
}

/* ============================================================
   v20 ─ STAFF は白背景 ／ COLUMN は方眼紙背景（帯の分割）
   ============================================================ */
.rn-staff-sec{
  background: #fff;
  background-image: none;
  border-bottom: none;
  margin-bottom: 0;
  padding: 96px 0 90px;
}
.rn-staff-photo{
  box-shadow: none;
  border-color: rgba(30,30,30,.55);
}
.rn-staff-item a:hover .rn-staff-photo{
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.45);
}
.rn-staff-sec .rn-sec-more{ background: #fff; }

.rn-column-sec{
  background-color: #FCFBF6;
  background-image:
    linear-gradient(rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(rgba(30,30,30,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.10) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-top: 1px solid rgba(30,30,30,.14);
  border-bottom: 1px solid rgba(30,30,30,.14);
  padding: 90px 0 100px;
}

@media screen and (max-width: 900px){
  .rn-staff-sec{ padding: 62px 0 58px; }
  .rn-column-sec{ padding: 60px 0 68px; }
}

/* ============================================================
   v21 ─ イエローのセクション（TOPICS／リンクカード）から方眼紙を外す
        ＝ 黄色はベタ塗り。方眼紙は COLUMN セクションだけに残す
   ============================================================ */
.bg-basecolor{
  background-color: var(--rn-section-bg);
  background-image: none;
}

/* ============================================================
   v22 ─ TOPICS は白／WORKS を方眼紙／リンクカードは「物件一覧」セクションに
   ============================================================ */

/* WORKS（施工事例）を方眼紙背景に */
.works-wrap{
  background-color: #FCFBF6;
  background-image:
    linear-gradient(rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(rgba(30,30,30,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,30,.10) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-top: 1px solid rgba(30,30,30,.14);
  border-bottom: 1px solid rgba(30,30,30,.14);
}

/* 物件一覧セクション：見出しをカードの幅にそろえる */
.rn-linkcards-sec .rn-sec-head{
  max-width: 900px;
  margin: 0 auto 34px;
}

@media screen and (max-width: 900px){
  .rn-linkcards-sec .rn-sec-head{ margin-bottom: 22px; }
}

/* ============================================================
   v23 ─ ヘッダーのナビを左右に均等割り付け
   ============================================================ */
.rn-gnav{
  flex: 1 1 auto;
  margin-left: 0;
  min-width: 0;
}
.rn-gnav-list{
  width: 100%;
  justify-content: space-evenly;
  gap: 8px;
}

/* ============================================================
   v24 ─ 背景の割り当てを変更
        LAND＝オレンジ #FABB05（mandai-home.com の CTA と同色）
        PROPERTY＝白 ／ STAFF＝方眼紙 ／ COLUMN＝白
        方眼紙の罫線もオレンジに
   ============================================================ */
:root{
  --rn-grid-base:  #FFFDF7;
  --rn-grid-thin:  rgba(250,187,5,.30);
  --rn-grid-bold:  rgba(250,187,5,.65);
}

/* 方眼紙（罫線オレンジ）— WORKS と STAFF に使う */
.works-wrap,
.rn-staff-sec{
  background-color: var(--rn-grid-base);
  background-image:
    linear-gradient(var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(var(--rn-grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-bold) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-top: 1px solid rgba(250,187,5,.55);
  border-bottom: 1px solid rgba(250,187,5,.55);
}

/* 土地情報：オレンジベタ */
.land-wrap{
  background-color: var(--rn-accent-orange);
  background-image: none;
}
.land-wrap .rn-sec-more{ background: #fff; }

/* 物件一覧：白 */
.rn-linkcards-sec.bg-basecolor{
  background-color: #fff;
  background-image: none;
}

/* コラム：白 */
.rn-column-sec{
  background-color: #fff;
  background-image: none;
  border-top: none;
  border-bottom: none;
}

/* ============================================================
   v25 ─ 本文幅を1500pxに／白ボタンの反転色をオレンジに／
         タイルのラベルとタイトルを中央揃え
   ============================================================ */
:root{ --rn-w: 1500px; }

@media screen and (min-width: 901px){
  /* 1500px に合わせてカード幅を調整（4枚並び・間隔24px） */
  .card01 .swiper-slide,
  .card20 .swiper-slide,
  .card02 .swiper-slide,
  .card03 .swiper-slide,
  .card04 .swiper-slide,
  .card05 .swiper-slide{ max-width: 351px !important; }
}
.rn-top-block{ max-width: calc(var(--rn-w) + 120px); }
.rn-about-inner{ max-width: calc(var(--rn-w) + 120px); }
.rn-footer-inner{ max-width: calc(var(--rn-w) + 120px); }

/* ---------- 白ボタンの反転色を黒→オレンジに ---------- */
.rn-btn-ghost:hover,
.rn-btn-solid:hover,
.rn-sec-more:hover,
.rn-top-list-head .more:hover,
.rn-about-more a:hover,
.rn-hero-cta:hover,
.rn-footer-nav a:hover,
.rn-footer-corp:hover{
  background: var(--rn-accent-orange);
  border-color: var(--rn-accent-orange);
  color: var(--rn-ink);
}
.rn-footer-corp:hover .sub{ color: var(--rn-ink); opacity: .8; }
.rn-footer-sns a:hover i{
  background: var(--rn-accent-orange);
  border-color: var(--rn-accent-orange);
  color: var(--rn-ink);
}

/* ---------- タイルのラベル・タイトルを中央揃え ---------- */
.rn-tile-label,
.rn-tile-ttl,
.rn-linkcard-sub{ text-align: center; }

/* ============================================================
   v26 ─ TOPICS も方眼紙（罫線オレンジ）／カードの本文は1行まで／
         PROPERTY を TOPICS の直下へ
   ============================================================ */
.event-wrap{
  background-color: var(--rn-grid-base);
  background-image:
    linear-gradient(var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(var(--rn-grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-bold) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-top: 1px solid rgba(250,187,5,.55);
  border-bottom: 1px solid rgba(250,187,5,.55);
}

/* カードの説明文は1行までに（はみ出す分は「…」で省略／高さがそろう） */
.slider-category{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  overflow: hidden;
}

/* 物件一覧：カード3枚（モデルハウス／建売／土地） */
.rn-linkcards-inner{
  max-width: 1200px;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.rn-linkcards-sec .rn-sec-head{ max-width: 1240px; }

@media screen and (max-width: 900px){
  .rn-linkcards-inner{ grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ============================================================
   v27 ─ 背景の割り当てを変更
        TOPICS＝白 ／ PROPERTY＝オレンジ ／ WORKS＝白
        （方眼紙は STAFF だけに残す）
   ============================================================ */
.event-wrap,
.works-wrap{
  background-color: #fff;
  background-image: none;
  border-top: none;
  border-bottom: none;
}
.rn-linkcards-sec.bg-basecolor{
  background-color: var(--rn-accent-orange);
  background-image: none;
}

/* ============================================================
   v28 ─ トップ組みブロックの余白調整
        吹き出しカードとCTAボタンがくっついていたので間隔を確保
   ============================================================ */
.rn-hero-caption{ margin-bottom: 24px; }

@media screen and (max-width: 900px){
  .rn-hero-caption{ margin-bottom: 0; }
}

/* ============================================================
   v29 ─ SEARCH セクションの幅を他セクションにそろえる／カードを正方形に
   ============================================================ */
/* 見出しの左端・セクション幅を他と同じに（max-width も padding も共通値） */
.rn-linkcards-sec .rn-sec-head{
  max-width: calc(var(--rn-w) + 40px);
  margin: 0 auto 34px;
}
.rn-linkcards-inner{
  max-width: calc(var(--rn-w) + 40px);
  padding: 0 20px;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* カード自体を正方形に。写真は残りの高さいっぱいに敷く */
.rn-linkcard{
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
}
.rn-linkcard .rn-tile-img{
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
  margin-top: 4px;
}
.rn-linkcard .rn-tile-ttl{ margin-top: 14px; }

@media screen and (max-width: 900px){
  .rn-linkcards-sec .rn-sec-head{ margin-bottom: 22px; }
  .rn-linkcards-inner{ grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 15px; }
  .rn-linkcard .rn-tile-ttl{ margin-top: 10px; }
}

/* STAFF / COLUMN は .rn-grid-inner が既に左右20pxを持っているので、
   その中の見出しは padding を持たせない（頭の位置を他セクションと合わせる） */
.rn-grid-inner .rn-sec-head{
  max-width: none;
  padding: 0;
}

/* ============================================================
   v30 ─ モバイル表示を niko and ... の型に合わせて全面調整
        ・ヘッダーは2段（ロゴ＋CTA＋MENU ／ ナビの横スクロール）で追従
        ・ABOUT・SEARCH・COLUMN・STAFF は横スワイプ
   ============================================================ */
@media screen and (max-width: 900px){

  /* ---------- ヘッダー：2段構成 ---------- */
  :root{ --rn-h-sp: 102px; }

  .rn-header,
  .rn-header.is-scrolled{ height: var(--rn-h-sp); }
  .rn-header-inner{
    height: 100%;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
  }

  /* 1段目 */
  .rn-header-logo{ order: 1; flex: 0 0 auto; }
  .rn-logo-img,
  .rn-header.is-scrolled .rn-logo-img{ height: 16px; }
  .rn-logo-branch,
  .rn-header.is-scrolled .rn-logo-branch{ font-size: .5rem; letter-spacing: .08em; }
  .rn-header-cta{ order: 2; margin-left: auto; gap: 6px; }
  .rn-header-cta .rn-btn-ghost{ display: inline-flex; }
  .rn-header-cta .rn-btn{
    height: 30px;
    padding: 0 12px;
    font-size: .625rem;
    letter-spacing: 0;
  }
  .rn-btn-sub{ display: none; }              /* SPでは「見学予約」だけ */
  .rn-header .menu-wrapper{ order: 3; }
  .rn-header .btn{ width: 28px; height: 28px; }
  .rn-header .btn .bar{ width: 22px; }
  .rn-header .btn.close{ top: 14px; right: 14px; }

  /* 2段目：ナビを横スクロールのピルに */
  .rn-gnav{
    order: 4;
    display: block;
    flex: 0 0 100%;
    width: 100%;
    margin: 0 -12px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rn-gnav::-webkit-scrollbar{ display: none; }
  .rn-gnav-list{
    width: max-content;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    padding-right: 12px;
  }
  .rn-gnav-item a{
    flex-direction: row;
    gap: 0;
    height: 28px;
    padding: 0 13px;
    border: 1px solid rgba(30,30,30,.55);
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
  }
  .rn-gnav-item a::after{ content: none; }
  .rn-gnav-ja{ font-size: .6875rem; }
  .rn-gnav-en{ display: none; }

  /* ---------- 共通：横スワイプの並び ---------- */
  .rn-swipe{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    scrollbar-width: none;
    margin: 0 -15px;
    padding: 0 15px 6px;
  }
  .rn-swipe::-webkit-scrollbar{ display: none; }
  .rn-swipe > *{ scroll-snap-align: start; }

  /* ---------- ABOUT：画像＋説明文を横スワイプ ---------- */
  .rn-about-list{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scrollbar-width: none;
    gap: 14px;
    margin: 0 -20px;
    padding: 0 20px 6px;
  }
  .rn-about-list::-webkit-scrollbar{ display: none; }
  .rn-about-item{
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .rn-about-item a{
    grid-template-columns: 1fr;
    gap: 12px;
    height: 100%;
    padding: 14px;
    background: #fff;
    border-radius: 10px;
  }
  .rn-about-frame{ padding: 0; border: none; }
  .rn-about-frame img{ aspect-ratio: 1 / 1; border-radius: 6px; }

  /* ---------- SEARCH：1枚ずつスライド ---------- */
  .rn-linkcards-inner{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    scrollbar-width: none;
    gap: 14px;
    margin: 0 -15px;
    padding: 0 15px 6px;
  }
  .rn-linkcards-inner::-webkit-scrollbar{ display: none; }
  .rn-linkcard{
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 12px 12px 16px;
  }

  /* ---------- COLUMN：1枚ずつスライド ---------- */
  .rn-column-list{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    scrollbar-width: none;
    gap: 16px;
    margin: 0 -15px;
    padding: 14px 15px 20px;
  }
  .rn-column-list::-webkit-scrollbar{ display: none; }
  .rn-col-item{
    flex: 0 0 78%;
    scroll-snap-align: center;
    margin-top: 0 !important;
  }
  .rn-col-item .rn-col-card{ transform: none; }

  /* ---------- STAFF：丸写真を横スワイプ（niko and のショップ一覧の型） ---------- */
  .rn-staff-list{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    scrollbar-width: none;
    gap: 18px;
    margin: 0 -15px;
    padding: 0 15px 6px;
  }
  .rn-staff-list::-webkit-scrollbar{ display: none; }
  .rn-staff-item{
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
  .rn-staff-name{ margin-top: 14px; font-size: .875rem; }
  .rn-staff-role{ font-size: .6875rem; }
}

/* ============================================================
   v31 ─ 下層ページ：コラム一覧
        左に写真＋タイトルのカード、右にカテゴリー選択
        （SPはタイトル → カテゴリー → 記事の順）
   ============================================================ */
.rn-page{
  padding-top: calc(var(--rn-h-pc) + 56px);
  padding-bottom: 110px;
  background: #fff;
}
.rn-page-inner{
  max-width: calc(var(--rn-w) + 40px);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* --- ページ見出し --- */
.rn-page-head{
  margin-bottom: 44px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(30,30,30,.15);
}
.rn-page-head .rn-ttl{
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
}
.rn-page-head .rn-ttl-en{ font-size: 2.25rem; }
.rn-page-head .rn-ttl-ja{ font-size: .8125rem; }
.rn-ttl-cat{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--rn-accent-orange);
  color: var(--rn-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.rn-page-lead{
  margin: 0;
  font-size: .875rem;
  line-height: 2;
  opacity: .8;
}

/* --- 本体：左に記事、右にカテゴリー --- */
.rn-page-body{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
.rn-col2-main{ grid-column: 1; grid-row: 1; }
.rn-col2-side{ grid-column: 2; grid-row: 1; }

.rn-col2-count{
  margin: 0 0 22px;
  font-size: .75rem;
  letter-spacing: .06em;
  opacity: .7;
}
.rn-col2-count strong{ font-size: 1.125rem; font-weight: 700; opacity: 1; }

.rn-col2-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px 34px;
}
.rn-col2-item a{
  display: block;
  text-decoration: none;
  color: var(--rn-ink);
}
.rn-col2-photo{
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f0ea;
}
.rn-col2-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.rn-col2-item a:hover .rn-col2-photo img{ transform: scale(1.06); }
.rn-col2-cats{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 8px;
}
.rn-col2-cats .cat{
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border: 1px solid rgba(30,30,30,.5);
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 700;
}
.rn-col2-ttl{
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.7;
}
.rn-col2-item a:hover .rn-col2-ttl{ text-decoration: underline; }
.rn-col2-empty{
  margin: 40px 0;
  font-size: .875rem;
  opacity: .7;
}

/* --- カテゴリー選択 --- */
.rn-side-box{
  border: 1px solid var(--rn-ink);
  border-radius: 12px;
  padding: 22px 20px 20px;
  background: #fff;
  position: sticky;
  top: calc(var(--rn-h-pc) + 24px);
}
.rn-side-head{
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.1;
}
.rn-side-head .en{
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.rn-side-head .ja{
  font-size: .6875rem;
  letter-spacing: .12em;
  opacity: .7;
}
.rn-cat-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.rn-cat-list li + li{ margin-top: 8px; }
.rn-cat{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(30,30,30,.45);
  border-radius: 999px;
  background: #fff;
  color: var(--rn-ink);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.rn-cat .num{ font-size: .6875rem; opacity: .6; }
.rn-cat:hover{
  background: var(--rn-accent-orange);
  border-color: var(--rn-accent-orange);
}
.rn-cat.is-active{
  background: var(--rn-accent-orange);
  border-color: var(--rn-accent-orange);
  box-shadow: 0 3px 0 0 var(--rn-ink);
}
.rn-cat.is-active .num{ opacity: .75; }

/* ============================================================
   SP：タイトル → カテゴリー → 記事
   ============================================================ */
@media screen and (max-width: 900px){
  .rn-page{
    padding-top: calc(var(--rn-h-sp) + 28px);
    padding-bottom: 66px;
  }
  .rn-page-inner{ padding: 0 15px; }
  .rn-page-head{ margin-bottom: 22px; padding-bottom: 20px; }
  .rn-page-head .rn-ttl-en{ font-size: 1.75rem; }
  .rn-page-lead{ font-size: .8125rem; line-height: 1.9; }
  .rn-pc-br{ display: none; }

  .rn-page-body{ grid-template-columns: 1fr; gap: 26px; }
  .rn-col2-side{ grid-column: 1; grid-row: 1; }
  .rn-col2-main{ grid-column: 1; grid-row: 2; }

  .rn-side-box{
    position: static;
    padding: 0;
    border: none;
    border-radius: 0;
  }
  .rn-side-head{ flex-direction: row; align-items: baseline; gap: 10px; margin-bottom: 12px; }
  .rn-side-head .en{ font-size: 1rem; }
  .rn-cat-list{ display: flex; flex-wrap: wrap; gap: 8px; }
  .rn-cat-list li + li{ margin-top: 0; }
  .rn-cat{ height: 34px; padding: 0 14px; font-size: .75rem; gap: 6px; }

  .rn-col2-grid{ grid-template-columns: 1fr; gap: 30px; }
  .rn-col2-count{ margin-bottom: 16px; }
  .rn-col2-ttl{ font-size: .875rem; }
}

/* 施工事例の一覧カードは説明文も1行だけ添える */
.rn-col2-desc{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: .75rem;
  line-height: 1.7;
  opacity: .72;
}

/* ============================================================
   v33 ─ 下層ページ：土地一覧
        niko and の特集セクションの型（正方形写真＋タイトル＋説明）
        PC 4列 ／ SP 2列
   ============================================================ */
.rn-land-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 46px 30px;
}
.rn-land-item > a,
.rn-land-item.rn-land-soon{
  display: block;
  text-decoration: none;
  color: var(--rn-ink);
}
.rn-land-photo{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f0ea;
}
.rn-land-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.rn-land-item > a:hover .rn-land-photo img{ transform: scale(1.06); }
.rn-land-ttl{
  display: block;
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.rn-land-item > a:hover .rn-land-ttl{ text-decoration: underline; }
.rn-land-addr{
  display: block;
  margin-top: 4px;
  font-size: .6875rem;
  line-height: 1.6;
  opacity: .65;
}
.rn-land-meta{
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 0 14px;
  height: 28px;
  border-radius: 999px;
  background: var(--rn-accent-orange);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* COMING SOON のカード */
.rn-land-soon .rn-land-photo{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rn-grid-base);
  background-image:
    linear-gradient(var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-thin) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px dashed rgba(30,30,30,.35);
}
.rn-land-soon .soon{
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  line-height: 1.4;
  opacity: .55;
}
.rn-land-soon .rn-land-ttl,
.rn-land-soon .rn-land-addr{ opacity: .6; }
.rn-land-soon .rn-land-meta{
  background: transparent;
  border: 1px solid rgba(30,30,30,.35);
  opacity: .7;
  font-weight: 500;
}

@media screen and (max-width: 900px){
  .rn-land-grid{ grid-template-columns: 1fr 1fr; gap: 28px 15px; }
  .rn-land-ttl{ font-size: .875rem; margin-top: 10px; }
  .rn-land-meta{ height: 24px; padding: 0 10px; font-size: .6875rem; }
  .rn-land-soon .soon{ font-size: .875rem; }
}

/* ============================================================
   v34 ─ 土地一覧：区画数・金額を写真の上に重ねる
        （カード下のオレンジのチップは廃止）
   ============================================================ */
.rn-land-photo{ position: relative; }
.rn-land-meta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border-radius: 0;
  background: rgba(30,30,30,.74);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  box-sizing: border-box;
}
.rn-land-soon .rn-land-meta{
  background: rgba(30,30,30,.5);
  border: none;
  color: #fff;
  opacity: 1;
  font-weight: 500;
  font-size: .75rem;
}
.rn-land-ttl{ margin-top: 12px; }

@media screen and (max-width: 900px){
  .rn-land-meta{ height: 32px; font-size: .6875rem; }
  .rn-land-soon .rn-land-meta{ font-size: .625rem; }
}

/* ============================================================
   v35 ─ 下層ページのカテゴリーを追従させる
        （sticky が効くように、右カラムを行の高さいっぱいに伸ばす）
   ============================================================ */
.rn-page-body{ align-items: stretch; }
.rn-col2-side{ align-self: stretch; }
.rn-side-box{
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--rn-h-pc) + 24px);
}
.rn-header.is-scrolled ~ * .rn-side-box,
.rn-side-box{ transition: top .25s ease; }

@media screen and (max-width: 900px){
  /* SPはタイトルの下に置くだけなので追従させない */
  .rn-col2-side{ align-self: auto; }
  .rn-side-box{ position: static; }
}

/* ============================================================
   v36 ─ トップのスタッフ：全員をスライドで表示 ＋ プロフィールを開く
   ============================================================ */
.rn-staff-slider{ position: relative; }
.rn-staff-list{
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0;
  padding: 4px 0 6px;
  list-style: none;
}
.rn-staff-list::-webkit-scrollbar{ display: none; }
.rn-staff-item{
  flex: 0 0 calc((100% - 18px * 4) / 5);   /* PCは5人ぶん見せる */
  scroll-snap-align: start;
}
.rn-staff-btn{
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
  color: var(--rn-ink);
  cursor: pointer;
  font-family: var(--rn-font);
}
.rn-staff-btn .rn-staff-photo{ margin: 0; }
.rn-staff-roman{
  display: block;
  margin-top: 3px;
  font-size: .625rem;
  letter-spacing: .1em;
  opacity: .55;
}

/* 矢印 */
.rn-staff-arrow{
  position: absolute;
  top: 34%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  border: 1px solid rgba(30,30,30,.25);
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 2;
  transition: opacity .2s ease, background-color .2s ease;
}
.rn-staff-arrow::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -5px 0 0 -5px;
  border-top: 2px solid var(--rn-ink);
  border-right: 2px solid var(--rn-ink);
}
.rn-staff-prev{ left: -22px; }
.rn-staff-next{ right: -22px; }
.rn-staff-prev::after{ transform: rotate(-135deg); margin-left: -2px; }
.rn-staff-next::after{ transform: rotate(45deg); margin-left: -7px; }
.rn-staff-arrow:hover{ background: var(--rn-accent-orange); }
.rn-staff-arrow:disabled{ opacity: 0; pointer-events: none; }

/* ---------- プロフィールのモーダル ---------- */
.rn-staff-modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rn-staff-modal[hidden]{ display: none; }
.rn-staff-modal-bg{
  position: absolute;
  inset: 0;
  background: rgba(30,30,30,.55);
}
.rn-staff-modal-box{
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.5);
}
.rn-staff-modal-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border: 1px solid rgba(30,30,30,.3);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.rn-staff-modal-close::before,
.rn-staff-modal-close::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  margin: -1px 0 0 -7.5px;
  background: var(--rn-ink);
}
.rn-staff-modal-close::before{ transform: rotate(45deg); }
.rn-staff-modal-close::after{ transform: rotate(-45deg); }
.rn-staff-modal-close:hover{ background: var(--rn-accent-orange); }

.rn-staff-modal-head{
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(30,30,30,.15);
}
.rn-staff-modal-head .photo{
  flex: 0 0 120px;
  width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(30,30,30,.5);
}
.rn-staff-modal-head .photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-staff-modal-head .role{
  margin: 0 0 6px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .7;
}
.rn-staff-modal-head .name{
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.rn-staff-modal-head .roman{
  margin: 4px 0 0;
  font-size: .6875rem;
  letter-spacing: .12em;
  opacity: .55;
}
.rn-staff-modal-list{
  margin: 0;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px 20px;
}
.rn-staff-modal-list dt{
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding-top: 3px;
  opacity: .75;
}
.rn-staff-modal-list dd{
  margin: 0;
  font-size: .875rem;
  line-height: 1.9;
}

@media screen and (max-width: 900px){
  .rn-staff-item{ flex: 0 0 46%; }
  .rn-staff-arrow{ display: none; }
  .rn-staff-list{ scroll-padding-left: 15px; margin: 0 -15px; padding: 0 15px 6px; }
  .rn-staff-modal{ padding: 0; align-items: flex-end; }
  .rn-staff-modal-box{
    max-width: none;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
    padding: 30px 20px 34px;
  }
  .rn-staff-modal-head{ gap: 16px; }
  .rn-staff-modal-head .photo{ flex-basis: 84px; width: 84px; }
  .rn-staff-modal-head .name{ font-size: 1.125rem; }
  .rn-staff-modal-list{ grid-template-columns: 1fr; gap: 4px 0; }
  .rn-staff-modal-list dt{ margin-top: 12px; }
  .rn-staff-modal-list dd{ font-size: .8125rem; }
}

/* ============================================================
   v37 ─ 下層ページ：モデルハウス一覧 / 建売物件一覧
        トップの正方形タイルと同じ見た目のカードを2枚ずつ
   ============================================================ */
.rn-house-grid{
  list-style: none;
  max-width: 1040px;      /* 2枚並びでカードが大きくなりすぎないように */
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.rn-house-card,
.rn-house-soon{
  display: block;
  padding: 20px 20px 26px;
  border: 1px solid rgba(30,30,30,.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 0 0 rgba(30,30,30,.85);
  text-decoration: none;
  color: var(--rn-ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rn-house-card:hover{
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 rgba(30,30,30,.85);
}
.rn-house-label{
  display: block;
  margin-bottom: 12px;
  text-align: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: .5;
}
.rn-house-photo{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f0ea;
}
.rn-house-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.rn-house-card:hover .rn-house-photo img{ transform: scale(1.05); }
.rn-house-ttl{
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}
.rn-house-lead{
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.7;
  opacity: .78;
}
.rn-house-meta{
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: .75rem;
  line-height: 1.7;
  opacity: .6;
}

/* COMING SOON */
.rn-house-soon{ box-shadow: none; border-style: dashed; }
.rn-house-soon .rn-house-photo{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rn-grid-base);
  background-image:
    linear-gradient(var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-thin) 1px, transparent 1px);
  background-size: 20px 20px;
}
.rn-house-soon .soon{
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  line-height: 1.4;
  opacity: .5;
}
.rn-house-soon .rn-house-ttl,
.rn-house-soon .rn-house-lead,
.rn-house-soon .rn-house-meta{ opacity: .55; }

@media screen and (max-width: 900px){
  .rn-house-grid{ gap: 16px; max-width: none; }
  .rn-house-card,
  .rn-house-soon{ padding: 12px 12px 18px; border-radius: 10px; }
  .rn-house-label{ margin-bottom: 8px; font-size: .5625rem; }
  .rn-house-ttl{ margin-top: 12px; font-size: .8125rem; }
  .rn-house-lead{ font-size: .6875rem; }
  .rn-house-meta{ font-size: .625rem; }
  .rn-house-soon .soon{ font-size: .875rem; }
}

/* ============================================================
   v38 ─ スタッフのプロフィール：左半分を大きな正方形の写真に
   ============================================================ */
.rn-staff-modal-box{
  max-width: 940px;
  padding: 0;
  overflow: hidden;
}
.rn-staff-modal-inner{
  display: grid;
  grid-template-columns: 44% 1fr;
  max-height: 86vh;
  overflow-y: auto;
}
.rn-staff-modal-photo{
  position: sticky;
  top: 0;
  align-self: start;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f2f0ea;
}
.rn-staff-modal-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rn-staff-modal-body{
  padding: 40px 40px 44px;
  box-sizing: border-box;
}
.rn-staff-modal-body .role{
  margin: 0 0 8px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .7;
}
.rn-staff-modal-body .name{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.rn-staff-modal-body .roman{
  margin: 5px 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(30,30,30,.15);
  font-size: .6875rem;
  letter-spacing: .12em;
  opacity: .55;
}
.rn-staff-modal-list{
  grid-template-columns: 96px 1fr;
  gap: 14px 18px;
}
.rn-staff-modal-close{
  z-index: 3;
  background: rgba(255,255,255,.92);
}

@media screen and (max-width: 900px){
  .rn-staff-modal-box{ border-radius: 14px 14px 0 0; }
  .rn-staff-modal-inner{
    grid-template-columns: 1fr;
    max-height: 92vh;
  }
  .rn-staff-modal-photo{ position: static; }
  .rn-staff-modal-body{ padding: 24px 20px 34px; }
  .rn-staff-modal-body .name{ font-size: 1.25rem; }
  .rn-staff-modal-body .roman{ margin-bottom: 18px; padding-bottom: 16px; }
  .rn-staff-modal-list{ grid-template-columns: 1fr; gap: 4px 0; }
}

/* ============================================================
   v39 ─ スタッフのプロフィール：上に写真／下に名前と説明（縦組み）
   ============================================================ */
.rn-staff-modal-box{ max-width: 620px; }
.rn-staff-modal-inner{
  display: block;
  max-height: 86vh;
  overflow-y: auto;
}
.rn-staff-modal-photo{
  position: static;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 46vh;      /* 画面が低いときは写真を詰めて本文を見せる */
}
.rn-staff-modal-body{ padding: 30px 34px 38px; }
.rn-staff-modal-body .name{ font-size: 1.375rem; }
.rn-staff-modal-list{ grid-template-columns: 104px 1fr; }

@media screen and (max-width: 900px){
  .rn-staff-modal-inner{ max-height: 92vh; }
  .rn-staff-modal-photo{ max-height: 42vh; }
  .rn-staff-modal-body{ padding: 24px 20px 34px; }
  .rn-staff-modal-list{ grid-template-columns: 1fr; }
}

/* ============================================================
   v40 ─ WordPressの管理バー（ログイン中に出る黒帯）と重ならないように
   ============================================================ */
body.admin-bar .rn-header{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar .rn-header{ top: 46px; }
}
@media screen and (max-width: 600px){
  /* 600px以下では管理バーが固定ではなくなるので元に戻す */
  body.admin-bar .rn-header{ top: 0; }
}

/* ============================================================
   v41 ─ ヒーロー画像全体をリンクにする
   ============================================================ */
.rn-hero-link{
  position: absolute;
  inset: 0;
  z-index: 2;          /* ドットより下、写真より上 */
  display: block;
  cursor: pointer;
}
.top-image img.rn-hero-slide{ transition: opacity 1.2s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.top-image:has(.rn-hero-link:hover) img.rn-hero-slide.is-active{ transform: scale(1.03); }
.rn-hero-caption{ transition: box-shadow .25s ease, transform .25s ease; }
.rn-top-left:has(.rn-hero-link:hover) .rn-hero-caption,
.rn-hero-caption:hover{
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.35);
}

/* ============================================================
   v42 ─ ハンバーガーメニュー（ドロワー）
        ・背景をヘッダーのイエローのパステル版に
        ・全画面ではなく右半分のパネルにする
   ============================================================ */
.rn-header .menu-lists{
  left: auto;
  right: 0;
  width: 50%;
  max-width: 620px;
  height: 100% !important;   /* jQuery の高さアニメーションを打ち消す */
  background: #FFFAB8;       /* イエロー #FFF45C のパステル版 */
  padding-top: 84px;
  box-shadow: -14px 0 40px -18px rgba(0,0,0,.35);
  z-index: 2;
}
/* 開いている間、後ろを暗くする */
.rn-header .menu-wrapper:has(.btn.close)::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(30,30,30,.45);
  z-index: 1;
}
.rn-header .menu-lists .logo_h{ padding-left: 30px; }
.rn-header .menu-lists .hum-menu_box{ top: 0; }

@media screen and (max-width: 900px){
  .rn-header .menu-lists{
    width: 86%;
    max-width: none;
    padding-top: 70px;
  }
  .rn-header .menu-lists .logo_h{ padding-left: 20px; }
}

/* ============================================================
   v43 ─ ページ内リンク（ファーストビュー → TOPICSセクション）
   ============================================================ */
html{ scroll-behavior: smooth; }
/* 固定ヘッダーの下に隠れないよう、飛び先に余白を持たせる */
#topics,
.event-wrap,
.works-wrap,
.rn-linkcards-sec,
.rn-staff-sec,
.rn-column-sec,
.rn-about-band{
  scroll-margin-top: calc(var(--rn-h-pc) + 16px);
}
@media screen and (max-width: 900px){
  #topics,
  .event-wrap,
  .works-wrap,
  .rn-linkcards-sec,
  .rn-staff-sec,
  .rn-column-sec,
  .rn-about-band{
    scroll-margin-top: calc(var(--rn-h-sp) + 12px);
  }
}

/* ============================================================
   v44 ─ 下層ページに残っていた明朝を Noto Sans に統一
        （テーマ側でクラスごとに明朝が指定されていた箇所）
   ============================================================ */
.about_ctl, .about_lctl, .about_ttl, .abt-ttl, .abt-wrap,
.acd-ttl, .acd-veiw, .btn-404_box, .colum-catettl,
.contentslist-wrap, .contentslist-wrap *,
.ctl-ttl, .ftt, .ftwh, .ftd, .fna,
.merit, .merit_content-h3, .merit_title h2, .ml-h3, .ml-h4, .mla,
.others-wrap, .ppg-ttl,
.pst-ttl, .pst-ttl_404, .pst-ttl_column, .topics_ttl,
.thx-ttl, .top-attl, .top-ttl, .slider-ttl,
.top-copy, .top-subcopy01, .top-subcopy02, .top-subcopy03,
.breadcrumb, .breadcrumb *, .category, .desc, .list-category,
.post_content, .post_content *{
  font-family: var(--rn-font);
}
/* 下層ページの見出しも他ページと同じ字づかいに */
.pst-ttl, .pst-ttl_column, .ppg-ttl, .thx-ttl{
  font-weight: 700;
  letter-spacing: .02em;
}

/* ============================================================
   v45 ─ 下層ページのTOPICSセクションは方眼紙（罫線オレンジ）
   ============================================================ */
.event-wrap.rn-topics-sub{
  background-color: var(--rn-grid-base);
  background-image:
    linear-gradient(var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-thin) 1px, transparent 1px),
    linear-gradient(var(--rn-grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--rn-grid-bold) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  border-top: 1px solid rgba(250,187,5,.55);
  border-bottom: 1px solid rgba(250,187,5,.55);
}

/* ============================================================
   v46 ─ お問い合わせフォーム（Contact Form 7）
        ラベルが上、入力欄は横いっぱいの縦積み
   ============================================================ */
#info .inner:has(.wpcf7),
.post_body:has(.wpcf7){ max-width: 760px; margin-left: auto; margin-right: auto; }

.wpcf7{ margin-top: 34px; }
.wpcf7 .wpcf7-form > p,
.wpcf7 .wpcf7-form > div{ margin: 0 0 26px; }

/* 項目名 */
.wpcf7 label{
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  margin-bottom: 8px;
}
.wpcf7 .wpcf7-list-item-label{ font-weight: 500; }

/* 入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 input[type="number"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea{
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 13px 14px;
  border: 1px solid rgba(30,30,30,.28);
  border-radius: 6px;
  background: #fff;
  color: var(--rn-ink);
  font-family: var(--rn-font);
  font-size: .9375rem;
  line-height: 1.6;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 textarea{ min-height: 190px; resize: vertical; }
.wpcf7 select{
  background-image: linear-gradient(45deg, transparent 50%, var(--rn-ink) 50%),
                    linear-gradient(135deg, var(--rn-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.wpcf7 ::placeholder{ color: rgba(30,30,30,.35); }
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus{
  outline: none;
  border-color: var(--rn-accent-orange);
  box-shadow: 0 0 0 3px rgba(250,187,5,.25);
}

/* ラジオ・チェックボックス */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio{ display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 8px; }
.wpcf7 .wpcf7-list-item{ margin: 0; }
.wpcf7 .wpcf7-list-item label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--rn-accent-orange);
}

/* 同意欄 */
.wpcf7 .wpcf7-acceptance{ display: block; margin-top: 4px; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label{
  justify-content: center;
  font-size: .8125rem;
}

/* 送信ボタン */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"]{
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 30px auto 0;
  height: 58px;
  padding: 0 28px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: var(--rn-ink);
  color: #fff;
  font-family: var(--rn-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 4px 0 0 rgba(30,30,30,.35);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover{
  background: var(--rn-accent-orange);
  border-color: var(--rn-accent-orange);
  color: var(--rn-ink);
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 rgba(30,30,30,.35);
}

/* エラー・確認メッセージ */
.wpcf7 .wpcf7-not-valid-tip{ margin-top: 6px; font-size: .75rem; color: #c0392b; }
.wpcf7 .wpcf7-response-output{
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: 6px;
  border-width: 1px;
  font-size: .8125rem;
}

@media screen and (max-width: 900px){
  .wpcf7 .wpcf7-form > p,
  .wpcf7 .wpcf7-form > div{ margin-bottom: 20px; }
  .wpcf7 textarea{ min-height: 150px; }
  .wpcf7 input[type="submit"]{ height: 54px; font-size: .9375rem; }
}

/* ============================================================
   v47 ─ TOPICSのカードのラベルを投稿ごとに出し分ける
   ============================================================ */
.event-wrap .slider-txbox::before{ content: none; }   /* CSSの固定ラベルはやめる */
.rn-card-chip{
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 26px;
  padding: 0 14px;
  border: 1px solid rgba(30,30,30,.55);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media screen and (max-width: 900px){
  .rn-card-chip{ height: 22px; padding: 0 10px; font-size: .625rem; }
}

/* =========================================================
   v48  ページトップに戻るボタン（全ページ共通・左下固定）
   ========================================================= */
.rn-pagetop{
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 2px solid var(--rn-ink);
  border-radius: 50%;
  background: var(--rn-accent-orange);
  color: var(--rn-ink);
  cursor: pointer;
  font-family: var(--rn-font);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
}
.rn-pagetop.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rn-pagetop:hover{ background: var(--rn-accent-yellow); }
.rn-pagetop-arrow{
  display: block;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-top: 2px solid var(--rn-ink);
  border-right: 2px solid var(--rn-ink);
  transform: rotate(-45deg);
}
.rn-pagetop-tx{
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
@media screen and (max-width: 900px){
  .rn-pagetop{
    left: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
    gap: 2px;
  }
  .rn-pagetop-arrow{ width: 8px; height: 8px; margin-top: 3px; }
  .rn-pagetop-tx{ font-size: .4375rem; }
}

/* =========================================================
   v49  「万代ホームの家づくり」まわりの下層ページを
        リニューアル済みページと同じ字づかい・ボタン形に揃える
        対象 : /about/（一覧）と /about/aboutN/（各性能ページ）
   ========================================================= */

/* --- 共通の内側幅・余白をほかの下層ページに合わせる --- */
.page-template-page-about .inner,
.single-about .contentslist-wrap .inner{
  max-width: var(--rn-w);
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* --- ページ見出し（Standard） --- */
.page-template-page-about .ppg-ttl{
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
}
.page-template-page-about .ppg-ttl .ttl-en_a{
  display: block;
  font-family: var(--rn-font);
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  color: var(--rn-ink);
}
.page-template-page-about h3.about_ttl{
  margin: 0 0 6px;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--rn-ink);
}
.page-template-page-about h4.about_ttl{
  margin: 0 0 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(30,30,30,.15);
  text-align: left;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.9;
  color: #55524C;
}

/* --- 6つのメリットの見出し --- */
.page-template-page-about .merit_title h2{
  margin: 0 0 26px;
  font-family: var(--rn-font);
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--rn-ink);
}
.page-template-page-about .merit_content-h3 .topics_ttl{
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--rn-ink);
}
.page-template-page-about .merit_content-p{
  font-family: var(--rn-font);
  font-size: .8125rem;
  line-height: 1.8;
  color: #55524C;
}
/* 写真は他ページと同じく角丸なしの正方形トリミング */
.page-template-page-about .merit_content-img img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- View More を他ページと同じ丸ボタンに --- */
.page-template-page-about .merit_content-tag a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 20px;
  border: 1.5px solid var(--rn-ink);
  border-radius: 999px;
  background: #fff;
  font-family: var(--rn-font);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--rn-ink);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.page-template-page-about .merit_content-tag a:hover{
  background: var(--rn-accent-orange);
}

/* --- 各性能ページ（about3 / about4 / about6） --- */
.single-about .pst-ttl{
  margin: 0 0 8px;
  font-family: var(--rn-font);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--rn-ink);
}
.single-about .category{
  margin: 0 0 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(30,30,30,.15);
  font-family: var(--rn-font);
  font-size: .875rem;
  color: #55524C;
}
.single-about .post_content{
  font-family: var(--rn-font);
  line-height: 1.9;
}
.single-about .post_content h2,
.single-about .post_content h3,
.single-about .post_content h4{
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--rn-ink);
}

@media screen and (max-width: 900px){
  .page-template-page-about .inner,
  .single-about .contentslist-wrap .inner{ padding: 0 15px; }
  .page-template-page-about .ppg-ttl .ttl-en_a{ font-size: 1.75rem; }
  .page-template-page-about h4.about_ttl{ margin-bottom: 24px; padding-bottom: 20px; }
  .page-template-page-about .merit_title h2{ font-size: 1.125rem; }
  .single-about .pst-ttl{ font-size: 1.375rem; }
}

/* =========================================================
   v50  ハンバーガーメニュー（ドロワー）の調整
        ・ロゴの行の高さが 0 になっていて CTA と重なるのを解消
        ・SNS アイコンをフッターと同じ4つ・同じ並びに
   ========================================================= */
.rn-header .menu-lists .logo_h{
  display: block;
  margin: 0 0 26px;
  padding-left: 30px;
  font-size: .875rem;
  line-height: 1.6;
}
.rn-header .menu-lists .logo_h a{
  display: inline-block;
  line-height: 1.6;
  color: var(--rn-ink);
  text-decoration: none;
}
.rn-header .menu-lists .logo_h .logo-s{
  display: block;
  font-family: var(--rn-font);
  font-weight: 700;
  letter-spacing: .06em;
}

/* --- ドロワーのSNSアイコン --- */
.rn-header .menu-lists .rn-drawer-sns{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 34px;
  padding: 0;
  list-style: none;
}
.rn-header .menu-lists .rn-drawer-sns li{ padding: 0; }
.rn-header .menu-lists .rn-drawer-sns a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--rn-ink);
  border-radius: 50%;
  background: #fff;
  color: var(--rn-ink);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color .2s ease;
}
.rn-header .menu-lists .rn-drawer-sns a:hover{ background: var(--rn-accent-orange); }

@media screen and (max-width: 900px){
  .rn-header .menu-lists .logo_h{ margin-bottom: 20px; padding-left: 20px; }
  .rn-header .menu-lists .rn-drawer-sns{ margin: 20px 0 26px; gap: 8px; }
  .rn-header .menu-lists .rn-drawer-sns a{ width: 36px; height: 36px; font-size: 1rem; }
}

/* =========================================================
   v51  トップ右下 WORKS を、上のタイルと同じ
        「正方形の写真＋タイトル」のカード2列×2段に
   ========================================================= */
.rn-top-list-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 20px;
}
.rn-top-list-grid li{ border: 0 !important; }
.rn-top-list-grid li + li{ border-top: 0 !important; }
.rn-top-list-grid a{
  display: block;              /* 横並びのグリッドを解除して縦積みに */
  grid-template-columns: none;
  gap: 0;
  padding: 0;
}
.rn-top-list-grid .thumb{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.rn-top-list-grid .body{ display: block; }
.rn-top-list-grid .meta{
  font-size: .6875rem;
  margin-bottom: 3px;
}
.rn-top-list-grid .ttl{
  font-size: .8125rem;
  line-height: 1.55;
}
.rn-top-list-grid a:hover .thumb img{ transform: scale(1.04); }
.rn-top-list-grid .thumb img{ transition: transform .4s cubic-bezier(.16,1,.3,1); }

@media screen and (max-width: 900px){
  .rn-top-list-grid{ gap: 18px 14px; }
  .rn-top-list-grid a{ grid-template-columns: none; padding: 0; }
  .rn-top-list-grid .thumb{ margin-bottom: 8px; }
  .rn-top-list-grid .ttl{ font-size: .75rem; }
}

/* =========================================================
   v52  追従ヘッダーに本文が潜り込んでいたのを修正
        トップは .top-area 側で余白を取っているので対象外。
        それ以外のページ（.main-container を使う旧レイアウトの
        下層ページ・記事詳細・404）はパンくずがヘッダーの下に
        完全に隠れていたため、ヘッダー分の余白を確保する。
   ========================================================= */
body:not(.home):not(.single-tps_lp):not(.page-template-page-lp) .main-container{
  padding-top: var(--rn-h-pc);
}
@media screen and (max-width: 900px){
  body:not(.home):not(.single-tps_lp):not(.page-template-page-lp) .main-container{
    padding-top: var(--rn-h-sp);
  }
}
/* パンくずがヘッダー直下に貼りつかないよう少しだけ間隔を足す */
body:not(.home) .main-container > .breadcrumb{
  padding-top: 10px;
}

/* =========================================================
   v53  モバイルの重なり対策（続き）
        イベント・モデル・建売の詳細ページは、画面下に固定の
        CTAバー（#sp-fixed-menu）が出るので、ページトップ
        ボタンをその分だけ持ち上げる。
   ========================================================= */
@media screen and (max-width: 900px){
  body:has(#sp-fixed-menu) .rn-pagetop{ bottom: 92px; }
}

/* =========================================================
   v54  タブレット〜小さめのPC（901〜1240px）でヘッダーが重なる件
        .rn-gnav が縮んでも .rn-gnav-list は縮まないため、
        ナビの文字が右のCTAボタンの下に潜り込んでいた。
        この幅の範囲だけ、ロゴ・ナビ・ボタンを詰めて収める。
   ========================================================= */
.rn-gnav{ min-width: 0; }
.rn-gnav-list{ flex-wrap: nowrap; }

@media screen and (min-width: 901px) and (max-width: 1240px){
  .rn-header-inner{ padding: 0 20px; gap: 16px; }
  .rn-logo-img{ height: 26px; }
  .rn-header.is-scrolled .rn-logo-img{ height: 22px; }
  .rn-logo-branch{ font-size: .6875rem; }
  .rn-gnav-list{ gap: 16px; }
  .rn-gnav-ja{ font-size: .8125rem; letter-spacing: .03em; }
  .rn-gnav-en{ font-size: .5625rem; letter-spacing: .06em; }
  .rn-header-cta{ gap: 8px; }
  .rn-header-cta .rn-btn{ padding: 0 16px; font-size: .75rem; }
}
@media screen and (min-width: 901px) and (max-width: 1080px){
  .rn-header-inner{ padding: 0 14px; gap: 10px; }
  .rn-logo-img{ height: 23px; }
  .rn-gnav-list{ gap: 10px; }
  .rn-gnav-ja{ font-size: .75rem; }
  .rn-header-cta .rn-btn{ padding: 0 12px; font-size: .6875rem; }
}

/* =========================================================
   v55  旧スライダー（.cardNN）の固定幅 1100px が
        画面幅より広く、ページが横スクロールしていた。
        card01〜05・card20 は対応済みだったので、
        残っていた card06（家づくり）・card07（コラム）も揃える。
   ========================================================= */
.card06 .swiper-area,
.card07 .swiper-area,
.card08 .swiper-area,
.card09 .swiper-area{
  max-width: 100%;
}
@media screen and (max-width: 1180px){
  .card06 .swiper-area,
  .card07 .swiper-area,
  .card08 .swiper-area,
  .card09 .swiper-area{ width: auto; }
}

/* =========================================================
   v56  パンくずが見えるようになったので、黒帯のままだと
        黄色のヘッダーの下で浮くため、他ページと同じ配色に。
   ========================================================= */
body:not(.home) .main-container > .breadcrumb{
  background-color: transparent;
  padding-top: 0;
}
body:not(.home) .breadcrumb_inner{
  max-width: var(--rn-w);
  height: auto;
  line-height: 1.6;
  padding: 16px 40px 0;
  box-sizing: border-box;
}
body:not(.home) .breadcrumb_inner li{
  font-family: var(--rn-font);
  font-size: .75rem;
  color: #6B675F;
}
body:not(.home) .breadcrumb_inner li a{
  color: #6B675F;
  text-decoration: none;
}
body:not(.home) .breadcrumb_inner li a:hover{ text-decoration: underline; }
body:not(.home) .breadcrumb_inner li:not(:last-child)::after{ color: #A8A399; }
body:not(.home) .breadcrumb_inner li i{ color: #A8A399; }

@media screen and (max-width: 900px){
  body:not(.home) .breadcrumb_inner{ padding: 12px 15px 0; }
  body:not(.home) .breadcrumb_inner li{ font-size: .6875rem; }
}

/* =========================================================
   v57  施工事例（WORKS）パネルの高さを元どおりにする
        4枚に増やしたことで黄色の背景が縦に伸び、左の
        ヒーロー側まで引っ張られていた。パネルの高さは
        左カラム（ヒーロー＋キャプション＋ボタン）に
        合わせ、写真をその中に収まる大きさに縮める。
   ========================================================= */
@media screen and (min-width: 901px){
  /* 右カラムの中身の高さを行の高さ計算に含めない＝左カラムが基準になる */
  .rn-top-right{
    contain: size;
    min-height: 0;
    overflow: hidden;
  }
  .rn-top-list{
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 20px 24px 18px;
  }
  .rn-top-list-head{ padding-bottom: 11px; margin-bottom: 0; }
  .rn-top-list-grid{
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: 1fr 1fr;
    gap: 14px 20px;
    margin-top: 14px;
  }
  .rn-top-list-grid li{ min-height: 0; }
  .rn-top-list-grid a{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  .rn-top-list-grid .thumb{
    aspect-ratio: auto;          /* 正方形をやめ、残りの高さいっぱいに */
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 8px;
  }
  .rn-top-list-grid .body{ flex: 0 0 auto; }
  .rn-top-list-grid .ttl{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* =========================================================
   v58  トピックスのセクション下に「最新の物件を見学する！」
        ボタンを追加（ファーストビューのボタンと同じ見た目）
   ========================================================= */
.rn-topics-cta{
  margin: 26px 0 0;
  text-align: center;
}
.rn-topics-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 38px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: var(--rn-accent-orange);
  color: var(--rn-ink);
  font-family: var(--rn-font);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 4px 0 0 var(--rn-ink);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.rn-topics-cta a span{ font-size: .5625rem; }
.rn-topics-cta a:hover{
  background: var(--rn-ink);
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--rn-ink);
}
@media screen and (max-width: 900px){
  .rn-topics-cta{ margin-top: 20px; }
  .rn-topics-cta a{ height: 50px; padding: 0 26px; font-size: .8125rem; }
}

/* =========================================================
   v59  モバイルのヘッダー2段目をPCと同じ「文字＋下線」に
        ・項目ごとの白い丸ピルをやめ、文字だけにする
        ・帯（2段目）そのものの背景を白にする
        ・いま見ているページ／タップ中は下線が出る
        ・1段目・2段目とも追従（.rn-header 全体が fixed）
   ========================================================= */

/* 現在地の下線はPC・SP共通 */
.rn-gnav-item.is-current a::after{ transform: scaleX(1); }

@media screen and (max-width: 900px){
  /* 1段目（黄色）の高さを決めて、2段目を白帯にする */
  .rn-header-inner{
    align-content: flex-start;
    gap: 0;
  }
  .rn-header-logo,
  .rn-header-cta,
  .rn-header .menu-wrapper{
    height: 62px;
    display: flex;
    align-items: center;
  }

  /* 2段目：白帯 */
  .rn-gnav{
    flex: 0 0 calc(100% + 24px);   /* 左右の padding 分まで白帯を伸ばす */
    width: calc(100% + 24px);
    height: calc(var(--rn-h-sp) - 62px);
    display: flex;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid rgba(30,30,30,.10);
  }
  .rn-gnav-list{
    align-items: stretch;
    gap: 0;
    padding-right: 4px;
  }
  /* ピルをやめて文字だけに */
  .rn-gnav-item a{
    height: 100%;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    justify-content: center;
  }
  .rn-gnav-ja{ font-size: .75rem; font-weight: 700; }
  /* PCと同じ下線を復活（タップ中・現在地で出る） */
  .rn-gnav-item a::after{
    content: "";
    position: absolute;
    left: 8px; right: 8px; bottom: 0;
    width: auto; height: 2px;
    background: var(--rn-accent-orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
  }
  .rn-gnav-item a:hover::after,
  .rn-gnav-item a:focus-visible::after,
  .rn-gnav-item a:active::after,
  .rn-gnav-item.is-current a::after{ transform: scaleX(1); }
}

/* =========================================================
   v60  モバイルの施工事例パネル
        「施工事例一覧」ボタンが見出しに重なっていたので、
        パネルの下側・中央へ。黄色の背景はその分だけ縦に伸ばす。
   ========================================================= */
@media screen and (max-width: 900px){
  .rn-top-list{
    position: relative;
    padding-bottom: 86px;      /* ボタンを置くぶん背景を縦に広げる */
  }
  .rn-top-list-head{
    position: static;          /* ボタンの基準をパネル側にする */
    padding-bottom: 14px;
  }
  .rn-top-list-head .more{
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 24px;
    transform: translateX(-50%);
    height: 44px;
    padding: 0 26px;
    font-size: .8125rem;
  }
  .rn-top-list-head .more:hover{
    transform: translateX(-50%) translateY(2px);
  }
}

/* =========================================================
   v61  トップページのセクション見出しとボタンを統一
        ・見出しは中央揃え、英語（大）＋日本語（小）の2段
          （ABOUT の見出しと同じ組み方に合わせる）
        ・「〇〇一覧」ボタンはセクションの下・中央に統一
   ========================================================= */
.rn-sec-head{
  display: block;
  text-align: center;
}
.rn-sec-head .rn-ttl{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 34px;
  text-align: center;
}
.rn-sec-head .rn-ttl-en{
  font-size: 2.125rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
}
.rn-sec-head .rn-ttl-ja{
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1;
}

/* セクション下の「一覧」ボタン */
.rn-sec-cta{
  margin: 44px 0 0;
  text-align: center;
}
.rn-sec-cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  border: 1px solid var(--rn-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--rn-ink);
  font-family: var(--rn-font);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 4px 0 0 var(--rn-ink);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.rn-sec-cta a span{ font-size: .5625rem; }
.rn-sec-cta a:hover{
  background: var(--rn-ink);
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--rn-ink);
}

@media screen and (max-width: 900px){
  .rn-sec-head .rn-ttl{ margin-bottom: 24px; gap: 5px; }
  .rn-sec-head .rn-ttl-en{ font-size: 1.625rem; }
  .rn-sec-head .rn-ttl-ja{ font-size: .6875rem; letter-spacing: .16em; }
  .rn-sec-cta{ margin-top: 30px; }
  .rn-sec-cta a{ height: 48px; padding: 0 26px; font-size: .8125rem; }
}

/* =========================================================
   v62  モバイルではファーストビューの
        「最新の物件を見る！」ボタンも中央揃えに
   ========================================================= */
@media screen and (max-width: 900px){
  .rn-hero-cta{
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }
}

/* =========================================================
   v63  モバイルのヘッダー2段目を「横スクロールなし」に
        5項目を画面幅に均等割りし、文字サイズ・字間・余白を
        詰めて全部見えるようにする。詰まって見えないよう
        項目のあいだに細い仕切り線を入れる。
   ========================================================= */
@media screen and (max-width: 900px){
  .rn-gnav{
    overflow: hidden;            /* 横スクロールをやめる */
    padding: 0 8px;
  }
  .rn-gnav-list{
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    padding: 0;
  }
  .rn-gnav-item{
    position: relative;
    /* 文字数ぶんの幅を確保したうえで、余った幅を均等に分ける
       （「モデルハウス」だけ詰まって見えないように） */
    flex: 1 1 auto;
    min-width: 0;
  }
  /* 項目のあいだの仕切り線 */
  .rn-gnav-item + .rn-gnav-item::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(30,30,30,.18);
  }
  .rn-gnav-item a{
    width: 100%;
    padding: 0 4px;
    justify-content: center;
  }
  .rn-gnav-ja{
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    font-size: clamp(.625rem, 3vw, .75rem);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* 下線は文字の幅にそろえる */
  .rn-gnav-item a::after{ content: none; }
  .rn-gnav-ja::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--rn-accent-orange);
    transform: scaleX(0);
    transition: transform .25s ease;
  }
  .rn-gnav-item.is-current .rn-gnav-ja::after,
  .rn-gnav-item a:hover .rn-gnav-ja::after,
  .rn-gnav-item a:focus-visible .rn-gnav-ja::after,
  .rn-gnav-item a:active .rn-gnav-ja::after{ transform: scaleX(1); }
}

/* =========================================================
   v64  物件一覧のカード
        ・タイトルは【地名】で改行した2段、中央揃え
        ・説明文は1行に収める（長い場合は末尾を…に）
        ・カードの高さがバラついて見えないよう行数を固定
   ========================================================= */
.rn-house-ttl{
  min-height: calc(1.5em * 2);   /* 1段でも2段でも同じ高さにして下を揃える */
}
.rn-house-lead{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 900px){
  .rn-house-ttl{ font-size: .9375rem; }
  .rn-house-lead{ font-size: .75rem; }
}

/* 同じ行のカードは高さをそろえる（説明文の有無で段差が出ないように） */
.rn-house-item{ display: flex; }
.rn-house-card,
.rn-house-soon{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.rn-house-meta{ margin-top: auto; }

/* =========================================================
   v65  モバイルのセクション下ボタンの上下余白をそろえる
        （セクション下端までの余白と同じだけ、上にも取る）
   ========================================================= */
@media screen and (max-width: 900px){
  /* セクションごとに下の余白が違うので、それぞれ同じ値を上にも取る */
  .event-wrap .rn-topics-cta{ margin-top: 84px; }   /* TOPICS  下:84px */
  .works-wrap .rn-sec-cta{    margin-top: 64px; }   /* WORKS   下:64px */
  .rn-column-sec .rn-sec-cta{ margin-top: 68px; }   /* COLUMN  下:68px */
}

/* =========================================================
   v66  ボタンの配色を全部そろえる
        ・通常：白背景／黒文字／黒フチ
        ・選択時（ホバー・タップ）：オレンジ背景／黒文字
        モバイルはホバーが無いので :active（タップ中）と
        :focus-visible にも同じ見た目を当てる。
   ========================================================= */

/* ---- 通常状態：白 ---- */
.rn-btn-ghost,
.rn-btn-solid,
.rn-drawer-cta .rn-btn-ghost,
.rn-drawer-cta .rn-btn-solid,
.rn-hero-cta,
.rn-topics-cta a,
.rn-sec-cta a,
.rn-sec-more,
.rn-top-list-head .more,
.rn-about-more a,
.page-template-page-about .merit_content-tag a{
  background: #fff;
  border-color: var(--rn-ink);
  color: var(--rn-ink);
}

/* ---- 選択時：オレンジ ---- */
.rn-btn-ghost:hover,
.rn-btn-solid:hover,
.rn-btn-ghost:active,
.rn-btn-solid:active,
.rn-btn-ghost:focus-visible,
.rn-btn-solid:focus-visible,
.rn-hero-cta:hover,
.rn-hero-cta:active,
.rn-hero-cta:focus-visible,
.rn-topics-cta a:hover,
.rn-topics-cta a:active,
.rn-topics-cta a:focus-visible,
.rn-sec-cta a:hover,
.rn-sec-cta a:active,
.rn-sec-cta a:focus-visible,
.rn-sec-more:hover,
.rn-sec-more:active,
.rn-top-list-head .more:hover,
.rn-top-list-head .more:active,
.rn-top-list-head .more:focus-visible,
.rn-about-more a:hover,
.rn-about-more a:active,
.rn-about-more a:focus-visible,
.page-template-page-about .merit_content-tag a:hover,
.page-template-page-about .merit_content-tag a:active{
  background: var(--rn-accent-orange);
  border-color: var(--rn-ink);
  color: var(--rn-ink);
}