@charset "UTF-8";
/* CSS Document */

/*/// ページ内共通 ///*/
.subHeading {
	/* PC時の最大45px 〜 画面幅に応じて滑らかに縮小 〜 SP時の22pxで止まる指定 */
	font-size: clamp(22px, 3.2vw, 45px); 
	line-height: 1.444;
	letter-spacing: 0.2em;
}

.subHeading02 {
	/* PC時の最大45px 〜 画面幅に応じて滑らかに縮小 〜 SP時の18pxで止まる指定 */
	font-size: clamp(18px, 3.2vw, 24px); 
	line-height: 1.444;
	letter-spacing: 0.2em;
	margin-bottom: 6.07142857%;
}

.subHeading03 {
	/* PC時の最大36px 〜 画面幅に応じて滑らかに縮小 〜 SP時の22pxで止まる指定 */
	font-size: clamp(22px, 3.2vw, 36px); 
	line-height: 1.444;
	letter-spacing: 0.2em;
	margin-bottom: 6.07142857%;
}

.read {
	/* PC時の最大15px 〜 画面幅に応じて滑らかに縮小 〜 SP時の12pxで止まる指定 */
  	font-size: clamp(14px, 1.1vw, 18px);
	line-height: 1.933;
	letter-spacing: 0.2em;
}

/* 各段落の制御 */
.location .read-paragraph {
  display: block; /* 縦に並べる（spanタグなどのインライン対策） */
}

/* 2つ目以降の段落の頭に、可変する空行（マージン）をつくる */
.location .read-paragraph + .read-paragraph {
  margin-top: clamp(14px, 2.1vw, 30px); 
}


.page-header-location {
  width: 100%;
  height: 620px;
  background-image: url("../images/h1-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-header-location h1 {
  font-family: 'EB Garamond', serif;
  font-size: calc((50 / var(--font-base)) * 1rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1;
  text-align: center;
  z-index: 2;
}


/*
//REDEVELOPMENT//
*/
.redevelopment {
	background-image: url("../images/redevelopment-bg.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: auto 900px;
	position: relative;
	width: 100%;
	padding-top: 100px;
}

.redevelopment .inner02 {
	position: relative;
	padding-right: 20px;
	box-sizing: border-box;
}

.redevelopment h2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 8.28571429%;
}

.redevelopment h3 {
	position: relative;
	margin-top: 0;
	margin-bottom: 50px;
	max-width: 650px;
	font-size: calc((32 / var(--font-base)) * 1rem); 
	line-height: 1.806;
	text-align: center;
	margin: auto;
}

.redevelopment-annotation {
	font-size:  calc((14 / var(--font-base)) * 1rem);
	vertical-align: super;
}

.redevelopment-mainVisual {
	width: 100%;
	max-width: 780px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 130px auto;
}

.redevelopment-mainVisual .main-cg {
	width: 100%;
}

.redevelopment-mainVisual .main-cg img {
	width: 100%;
	height: auto;
	display: block;
}

.redevelopment-mainVisual .sub-cgFlex {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.redevelopment-mainVisual .sub-cgFlex img {
	width: calc(50% - 10px); /* 20pxの隙間を引いた完璧な50%幅 */
	height: auto;
	display: block;
}

.redevelopment-contentFlex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 130px auto;
}

.redevelopment .redevelopment-contentFlex .redevelopment-textBox h4 {
	width: 100%;
	max-width: 350px; 
	margin-top: 0;
	margin-bottom: 40px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.redevelopment-textBox {
	width: 36.45833333%; /*350/960*/
}

.redevelopment-textBox img {
	max-width: 350px;
	height: auto;
	margin: 0 auto;
}

.redevelopment-mapBox {
	width: 60.41666667%; /*580/960*/
}

.redevelopment-mapBox img {
	width: 100%;
	max-width: 580px;
	height: auto;
	margin: 0 auto;
	display: block;
}

.read-paragraph {
	margin: 20px auto;
}

.redevelopment h4 {
	margin-top: 0;
}

.redevelopment-textBox .read-paragraph {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.redevelopment-textBox .read-paragraph img {
	width: 100%;
	max-width: 350px;
	height: auto;
	margin: 0 auto;
}

.redevelopment-contentBg {
	background-color: #eee;
}

.redevelopment-contentFlex02 {
	width: 100%;
	max-width: 1218px; 
	margin: 130px auto 0;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0; /* カンプ通り、セット同士の隙間をなくして密着させる */
}

.redevelopment-row {
	width: 100%;
	display: flex;
	align-items: center;
}

.redevelopment-row .redevelopment-textBox {
	width: 50%;
	padding: 6% 8%; 
	box-sizing: border-box;
}

.redevelopment-row .redevelopment-textBox h4 {
	font-size: clamp(20px, 2.5vw, 28px);
	line-height: 1.5;
	letter-spacing: 0.1em;
	margin-bottom: 25px;
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.redevelopment-row .redevelopment-textBox p.read {
	font-size: clamp(14px, 1.1vw, 15px);
	line-height: 1.85;
	letter-spacing: 0.05em;
}

.redevelopment-row .redevelopment-imgBox {
	width: 50%;
	overflow: hidden;
}

.redevelopment-row:nth-child(2) {
	flex-direction: row-reverse;
}

.redevelopment-textBox {
	width: 50%;
}

.redevelopment-row .redevelopment-imgBox {
	width: 50%;
	overflow: hidden;
}

.redevelopment-row .redevelopment-imgBox img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/*
// LIFE STYLE//
*/
.lifestyle {
	background-image: url("../images/lifestyle-bg.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 900px;
	position: relative;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 0;     /* スライダーが下部にはみ出すため、下余白は0に */
}

.lifestyle .inner02 {
	position: relative;
	box-sizing: border-box;
}

.lifestyle h2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 44.78571429%;
}

.lifestyle h2 img {
	max-width: 627px;
	height: auto;
}

.lifestyle-flex {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-left: 9.21428571%;
	box-sizing: border-box;
}

.lifestyle-flex .lifestyle-headBox {
	width: auto;
}

/* トップページの挙動をそのまま継承 */
.lifestyle-flex .lifestyle-headBox .subHeading {
	position: relative;
	text-align: left;
	margin: 45% 0 0 0;
}


.lifestyle-flex .lifestyle-readBox {
	width: 50%;
	max-width: 430px;
	background-color: rgba(255, 255, 255, 0.8);
	margin: 21% 9.21428571% 0 0;
	padding: 30px 20px;
	box-sizing: border-box;
	z-index: 10;
}

.lifestyle p {
	font-size:  clamp(12px, 3.2vw, 15px);
	line-height: 2.2;
	letter-spacing: 0.1em;
	white-space: pre-line; /* HTML内の改行をそのまま画面に反映させる魔法 */
}

/*
///スライダー///
*/
.lifestyle .slider {
	width: 100%;
	overflow: hidden;
	margin-top: -130px; 
	position: relative;
	z-index: 5;
}

.lifestyle .slider .slick-slide {
	margin: 0 9px;
}

.lifestyle .slider .slick-track {
	display: flex !important;
	align-items: center;
}

.lifestyle .slider img {
	width: auto !important;
	height: 500px !important;
	display: block;
}

.lifestyle-shopsGrid {
	margin-top: calc((120 / var(--font-base)) * 1rem);
}

.lifestyle-shopsGrid .section-lead {
	font-size: clamp(22px, 3.2vw, 45px); 
	line-height: 1.444;
	letter-spacing: 0.2em;
	text-align: center;
	margin-bottom: calc((120 / var(--font-base)) * 1rem);
}

.lifestyle .shop-card {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center; 
	margin: 3rem auto;
}

/* ─── 1個目(AEON)と3個目(KOHNAN)の基本の並び（テキスト左、画像右） ─── */
.lifestyle .shop-card .shop-card-textBox {
	width: 37.5%; /* カンプ比率：360px */
	height: auto;
	margin-right: 3%; /* 隙間45px */
	margin-left: 0;
	display: block;
}

.lifestyle .shop-card .shop-card-imgBox {
	width: 61.77083333%; /* カンプ比率：593px */
}

.lifestyle .shop-card-imgBox img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* ─── 2個目のshop-card（TOKIビル）だけを完璧に反転させる ─── */
.lifestyle .shop-card:nth-of-type(2) {
	flex-direction: row-reverse; /* 左右を入れ替える */
}

.lifestyle .shop-card:nth-of-type(2) .shop-card-textBox {
	margin-right: 0;
	margin-left: 3%;
}

.lifestyle .shop-card-textBox {
	width: 37.5%; /*360/960*/
}

.lifestyle .shop-card-textBoximg {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: calc((40 / var(--font-base)) * 1rem); 
}

.lifestyle .shop-card-textBoximg img {
	width: 49%;
	max-width: 174px;
	height: auto;
	display: block;
}

.lifestyle .shop-number {
	font-size: clamp(14px, 3.2vw, 18px);
	letter-spacing: 0.15em;
	color: #65889a;
	display: block;
}

.lifestyle h4.subHeading02 {
	font-size: clamp(18px, 3.2vw, 24px);
	letter-spacing: 0.1em;
	margin: 3rem 0;
}

.lifestyle h4.subHeading03 {
	font-size: clamp(18px, 3.2vw, 24px);
	line-height: 1.444;
	letter-spacing: 0.1em;
	margin: 0.5rem 0;
}

.lifestyle .shop-desc {
	font-size: calc((13 / var(--font-base)) * 1rem);
	line-height: 1.5;
}

.lifestyle .shop-desc img {
	max-width: 360px;
	height: auto;
}



/*
//CULTURE//
*/
.culture {
	background-color: #eee;
	padding: calc((70 / var(--font-base)) * 1rem) 0;
}

.culture h2 {
	color: #65889a;
	font-size: clamp(40px, 2.5vw, 50px);
	letter-spacing: 0.2em;
	margin-bottom: 3rem;
}

.culture-flex {
	display: flex;
	justify-content: space-between;
}

.culture-textBox {
	width: 37.5%; /*360/960*/
}

.culture-imgBox {
	width: 60.20833333%; /*578/960*/
}

.culture-imgBox img {
	max-width: 578px;
	height: auto;
	object-fit: cover;
}

.culture .read {
	font-size: calc((13 / var(--font-base)) * 1rem);
	line-height: 1.5;
}

/*
//LIFE INFORMATION//
*/
.lifeinfo {
	padding: calc((70 / var(--font-base)) * 1rem) 0;
}

.lifeinfo h2 {
	color: #65889a;
	font-size: clamp(30px, 4vw, 83px);
	letter-spacing: 0.2em;
	margin-bottom: 3rem;
	text-align: center;
}

.lifeinfo h3 {
	text-align: center;
}

.lifeinfo img.location-map {
	max-width: 790px;
	height: auto;
	margin: 0 auto;
}

.lifeinfo .info-tablesGrid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: calc((60 / var(--font-base)) * 1rem);
}

.lifeinfo .info-tablesGrid .info-column {
	width: 50%;
	margin-bottom: calc((30 / var(--font-base)) * 1rem);
}

.lifeinfo .info-tablesGrid .info-column img {
	max-width: 420px;
	height: auto;
	margin: auto;
}

.lifeinfo .info-photoGallery {
	width: 100%;
	max-width: 774px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: auto;
}

.lifeinfo .info-photoGallery figure {
	width: calc(100% / 3);
	max-width: 244px;
	margin: 1.5rem auto;
}

.lifeinfo .info-photoGallery figcaption {
	font-size: clamp(12px, 2.5vw, 15px);
	line-height: 1.333;
	margin-top: calc((10 / var(--font-base)) * 1rem);
}

.lifeinfo .info-photoGallery figcaption span {
	display: block;
}

.lifeinfo .info-photoGallery p {
	margin-top: calc((70 / var(--font-base)) * 1rem);
}

/* sp */
@media (max-width: 768px) {
/* 文章の行間（スマホ用に少し詰める） */
.location .read-paragraph + .read-paragraph {
	margin-top: 20px; 
}

.page-header-location {
 	height: 340px;
}

.redevelopment {
	background-image: none;
	padding-top: 40px;
	padding-bottom: 40px;
}

.redevelopment .inner02 {
	padding-left: 20px; /* スマホ時は左右一律20pxの余白にして中央に流す */
	padding-right: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.redevelopment h2 {
	position: static;
	width: 100%;
	max-width: 336px;
	margin: 0 auto 30px;
}

.redevelopment h3 {
	text-align: center;
	max-width: 100%;
	margin-bottom: 30px;
	font-size: calc((22 / var(--font-base)) * 1rem);
}

.redevelopment-mainVisual {
	gap: 10px;
	margin: 45px auto;
}
.redevelopment-mainVisual .sub-cgFlex {
	gap: 10px;
}
.redevelopment-mainVisual .sub-cgFlex img {
	width: calc(50% - 5px);
}

.redevelopment-contentFlex {
	flex-direction: column;
	margin: 60px auto;
}

.redevelopment-textBox,
.redevelopment-mapBox {
	width: 100%;
}

.redevelopment-textBox img {
	max-width: 350px;
	height: auto;
	margin: 0 auto;
}

.redevelopment-mapBox img {
	max-width: 580px;
	height: auto;
	margin: 0 auto;
}

.redevelopment h4 {
	text-align: center;
}

.redevelopment-contentFlex02 {
	margin: 60px auto 0;
	gap: 40px; /* スマホでは密着させず、セットごとに隙間を空ける */
}

.redevelopment-row {
	/* スマホでは強制的に「上：画像、下：テキスト」の縦一列にする */
	flex-direction: column; 
}

.redevelopment-row:nth-child(2) {
	flex-direction: column;
}

.redevelopment-row .redevelopment-textBox {
	width: 100%;
	margin-bottom: 21px;
	padding: 25px 10px 0; /* スマホ用のタイトな余白 */
	background-color: transparent;
}

.redevelopment-row .redevelopment-textBox h4 {
	text-align: center;
	margin-bottom: 15px;
}

.redevelopment-row .redevelopment-textBox p.read {
	text-align: left;
}

.redevelopment-row .redevelopment-imgBox {
	width: 100%;
}

/*
//LIFE STYLE//
*/
.lifestyle {
	background-image: none;
	padding-top: 40px;
}

.lifestyle h2 {
	position: static;
	width: 100%;
}

.lifestyle h2 img {
	max-width: 335px;
	height: auto;
	margin: 0 auto;
}

.lifestyle-flex {
	flex-direction: column;
	align-items: flex-start;
	margin-left: 0;
}

.lifestyle-flex .lifestyle-headBox {
	width: 100%;
	margin: 4.5rem auto 0;
}

/* トップページの挙動をそのまま継承 */
.lifestyle-flex .lifestyle-headBox .subHeading {
	position: static;
	text-align: center;
	margin: 0 auto;
}

.lifestyle-flex .lifestyle-readBox {
	width: 100%;
	max-width: 768px;
	padding: 0;
	margin: 0 auto;
}

/*
///スライダー///
*/
.lifestyle .slider {
  margin-top: 10px; 
}

.lifestyle .slider .slick-slide {
  margin: 0 9px;
}

.lifestyle .slider img {
    height: 260px !important; /* SP画面でちょうどいい高さにリサイズ（適宜調整） */
}


.lifestyle-shopsGrid {
	margin-top:  calc((60 / var(--font-base)) * 1rem);
}

.lifestyle-shopsGrid .section-lead {
	margin-bottom: calc((40 / var(--font-base)) * 1rem);
	text-align: center;
	font-size: clamp(20px, 4vw, 24px);
	line-height: 1.5;
}

.lifestyle .shop-card {
	flex-direction: column !important; 
	align-items: center;
	margin-bottom: 80px; /* カードとカードの間のすき間 */
	width: 100%;
}


.lifestyle .shop-card .shop-card-textBox {
	width: 100%;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding: 0 0 30px 0; /* 下の画像との間に綺麗な30pxのすき間を作る */
	box-sizing: border-box;
	text-align: center;
}

.lifestyle .shop-card-textBoximg {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}

.lifestyle .shop-card-textBoximg img {
	width: calc(50% - 5px);
	max-width: 100%;
	height: auto;
}

.lifestyle .shop-card .shop-card-imgBox {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.lifestyle .shop-card .shop-card-imgBox img {
	width: 100%;
	height: auto;
	display: block;
}

.lifestyle h4.subHeading02,
.lifestyle h4.subHeading03 {
	text-align: center;
	font-size: clamp(20px, 5vw, 24px);
	line-height: 1.5;
	margin: 15px 0 25px 0;
}

.lifestyle .shop-number {
	text-align: center;
	margin-bottom: 10px;
}

.lifestyle .shop-desc {
	text-align: left;
	font-size: calc((14 / var(--font-base)) * 1rem);
	line-height: 1.7;
}

.lifestyle .shop-desc img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}


/*
//CULTURE//
*/
.culture h2 {
	margin-bottom: 3rem;
	text-align: center;
}

.culture h3 {
	text-align: center;
}

.culture-flex {
	flex-direction: column;
}

.culture-textBox {
	width: 100%;
	margin-bottom: 1.5rem;
}

.culture-imgBox {
	width: 100%;
}

.culture-imgBox img {
	max-width: 768px;
	height: auto;
	object-fit: cover;
}

/*
// LIFE INFORMATION//
*/
.lifeinfo .info-tablesGrid {
	flex-direction: column;
	margin-top: calc((30 / var(--font-base)) * 1rem);
}

.lifeinfo .info-tablesGrid .info-column {
	width: 100%;
	margin-bottom: calc((30 / var(--font-base)) * 1rem);
}

.lifeinfo .info-tablesGrid .info-column img {
	max-width: 500px;
	margin: 0 auto;
}

.lifeinfo .info-photoGallery figure {
	width: 48%;
	max-width: 360px;
	margin:  calc((15 / var(--font-base)) * 1rem) auto;
}

.lifeinfo .info-photoGallery p {
	margin-top: calc((40 / var(--font-base)) * 1rem);
}

}

/* 調整 */
@media (max-width: 430px) {
.page-header-location h1 {
  font-size: calc((23 / var(--font-base)) * 1rem);
}

.page-header-location {
  height: 200px;
}

.redevelopment-mainVisual {
	gap: 10px;
	margin-top: 25px;
	margin-bottom: 30px;
}

.redevelopment-mainVisual .sub-cgFlex {
	flex-direction: column;
}

.redevelopment-mainVisual .sub-cgFlex img {
	width: 100%;
}

.redevelopment-contentFlex {
	flex-direction: column;
	margin: 30px auto 0;
}


.lifestyle {
	padding-top: 15px;
}

.lifestyle-flex .lifestyle-headBox {
	width: 100%;
	margin: 2rem auto 0;
}

.lifestyle-shopsGrid {
	margin-top:  calc((45 / var(--font-base)) * 1rem);
}

}