@charset "UTF-8";
/* CSS Document */
.selling-point {
	background-image: url("../images/suncradle.svg");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 64.42857143%;
	padding: 10% 0 4%;
}

.selling-point-frontier {
	width: 84.0625%;
	margin: 0 auto 3.5%;
}

/*information*/
.info {
	background-image: url("../images/information-bg.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
	text-align: center;
	padding: 3% 0;
}

.info p {
	font-size: calc((15 / var(--font-base)) * 1rem);
	line-height: 2;
}

.info p.info-title {
	font-size: calc((40 / var(--font-base)) * 1rem);
	letter-spacing: 0.1em;
	color: #767677;
	margin-bottom: calc((30 / var(--font-base)) * 1rem);
}

.info .info-forAction {
    display: flex;
    align-items: center;
	justify-content: center;
	margin-top: calc((60 / var(--font-base)) * 1rem);
	margin-bottom: calc((30 / var(--font-base)) * 1rem);
}

.info .info-forAction li {
    width: 170px;
	height: 35px;
    font-size: calc((17 / var(--font-base)) * 1rem);
	line-height: 35px;
    text-align: center;
    list-style: none;
	box-sizing: border-box;
}

.info .info-forAction li.reserve a {
	color: #fff;
}

.info .info-forAction li:nth-child(1) {
    background-color: #221815;
    color: #fff;
	margin-right: 18px;
}

.info .info-forAction li:nth-child(1) a:hover {
    background-color: #fff;
    color: #221815;
}

.info .info-forAction li:nth-child(2) {
    background-color: rgba(163,157,152,1.00);
    color: #fff;
	margin-left: 18px;
}

.info .info-forAction li:nth-child(2) a:hover {
    background-color: #eee;
    color: #221815;
}

/*/// info移管 ///*/
div.iframe-content {
height:100%;
}
iframe {
width:100%;
}

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

.subHeading02 {
	/* PC時の最大45px 〜 画面幅に応じて滑らかに縮小 〜 SP時の22pxで止まる指定 */
	font-size: clamp(18px, 3.2vw, 24px); 
	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;
}

.view-btn {
	width: 100%;
	max-width: 288px;
	height: 48px;
	position: relative;
	overflow: hidden;      /* 枠からはみ出る光の背景を隠す（参考HTMLの仕様） */
	border-radius: 31px;   /* 綺麗な丸角カプセル型 */
	box-sizing: border-box;
	transition: transform 0.6s ease, box-shadow 0.6s ease;
	/* ★カンプ画像の「美しい立体的な2重の影」をCSSで完全再現 */
	box-shadow: 4px 4px 10px rgba(197, 197, 197, 0.7), -4px -4px 10px rgba(255, 255, 255, 0.9);
	z-index: 1;
}

.view-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
	box-sizing: border-box;
	background-image: linear-gradient(90deg, #e7ecef, #f6f8f9 52%, #e7ecef);
	transition: color .6s ease;
	opacity: 1;
	line-height: 1;        /* 文字の上下の余分な隙間をゼロにして、48pxの中に完全に密閉します */
	padding-right: 0;
}

.view-btn a span {
	font-family: 'EB Garamond', serif;
	font-size: 20px;
	color: #3e3a39;
	letter-spacing: 0.08em;
	font-weight: 400;
	z-index: 2;
	position: relative;
	line-height: 1;        /* 文字単体の高さも1にしてブレを無くします */
}

/* ★画像の中にあった「細くてシャープな矢印」もCSSで完全再現 */
.view-btn a .arrow {
	display: inline-block;
	width: 38px;           /* 矢印の線の長さ */
	height: 1px;           /* 本体の線の細さ */
	background-color: #3e3a39; /* 通常時の矢印の色 */
	position: relative;
	margin-left: 20px;     /* 文字との間のすき間 */
	transition: background-color 0.6s ease;
}

/* 矢印の先端の斜め線（ひげ部分） */
.view-btn a .arrow::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 8px;
	height: 1px;
	background-color: #3e3a39;
	transform: rotate(30deg); /* 絶妙なシャープな角度 */
	transform-origin: bottom right;
	transition: background-color 0.6s ease;
}

/* ─── 💡ここが核心：参考HTMLから移植した「背景を流す仕掛け」 ─── */
.view-btn a::before {
	content: "";
	position: absolute;
	left: -60px;
	top: 0;
	width: 0;
	height: 100%;
	
	/* ★ブランドカラーを損なわない、上品な光のブルーグラデーション */
	background: linear-gradient(90deg, #65889a 0%, #7da2b5 100%);
	
	transform: skewX(45deg); /* 斜めにカットするエフェクト */
	z-index: 1;              /* 文字（z-index:2）の裏側、通常の背景の上 */
	/*transition: width 800ms ease-out;*/
	transition: width 1000ms cubic-bezier(0.25, 1, 0.5, 1); /* スッと滑らかに流れるイージング */
}

.view-btn:hover {
	transform: scale(1.04); 
	box-shadow: 8px 10px 20px rgba(197, 197, 197, 0.9),-8px -8px 20px rgba(255, 255, 255, 0.95);
	transition: color 1s ease; 
}

/* ホバー時に斜めのブルー背景を左から右へ大放出 */
.view-btn:hover a::before {
	width: 260%;
}

/* ホバー時に文字の色を白に、矢印の色も白に一斉同期 */
.view-btn:hover a {
	opacity: 1; /* base.cssのa:hoverに書いてある「薄くなる透明度」をリセット */
}

.view-btn:hover a span {
	color: #fff; /* 文字が白反転 */
}

.view-btn:hover a .arrow {
	background-color: #fff; /* 矢印の軸も白反転 */
}

.view-btn:hover a .arrow::after {
	background-color: #fff; /* 矢印の先端も白反転 */
}

.contNav-caution {
	font-size: calc((10 / var(--font-base)) * 1rem);
}

/* ---  POSITIONエリア --- */
.contNav-position {
	background-image: url("../images/cont-nav-position-bg.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-top: calc((150 / var(--font-base)) * 1rem);
	padding-bottom: calc((150 / var(--font-base)) * 1rem);
	position: relative;
}

.contNav-position h2 {
	/*width: 8.28571429%;*/
	width: 11.28571429%;
	max-width: 116px;
	margin-left: auto;
}

.contNav-position .contNav-position-textBox {
	position: absolute;
	/* カンプの「左端の余白」と「上からの高さ」を％で持たせることで、背景の縮小と完全に同期します */
	top: 15%;               /* カンプの上位置に合わせて微調整してください */
	left: 6.5%;             /* 左端の基本ライン（6.5%）に合わせる */
	width: 50%;             /* 右側のh2や背景の主役（光）と被らない横幅 */
}

.contNav-position .subHeading {
	position: relative;     /* absolute を解除 */
	top: 0;                 /* 位置を初期化 */
	/* タイトルと下の本文の間の隙間を可変（clamp）でガチッと制御！ */
	margin-bottom: clamp(20px, 3.5vw, 50px); 
}

.contNav-position .read {
	position: relative;     /* absolute を解除 */
	top: 0;                 /* 位置を初期化 */
	display: block;
}

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

/* 2つ目以降の段落の頭に、可変する空行（マージン）をつくる */
.contNav-position .read .read-paragraph + .read-paragraph {
  /* 【解説】
    最小値：14px（スマホなどの狭い画面での余白）
    可変値：2.1vw（画面幅に応じてリアルタイムに計算される余白）
    最大値：30px（PCなどの大画面でのカンプ実寸の余白）
  */
  margin-top: clamp(14px, 2.1vw, 30px); 
}

.contNav-position .contNav-caution {
	position: absolute;
	bottom: calc((20 / var(--font-base)) * 1rem);
	right: 6.5%; 
}


/* --- FUTUREエリア --- */
.contNav-future {
	width: 100%;
	margin-top: 4.07142857%; /* 57/1400 */
	overflow: hidden;
}

.contNav-future .contNav-future-flex {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.contNav-future .contNav-future-flex h2 {
	width: 8.28571429%;
	max-width: 116px;
	margin-left: 6.5%;
	padding-top: 15px;
}

.contNav-future .contNav-future-flex h2 img {
	width: 100%;          
	height: auto;
}

.contNav-future .contNav-future-flex img.contNav-future-bgImg {
	width: 82%;
	height: auto;
	display: block;
}

.contNav-future .contNav-future-textBox {
	padding: 4.07142857% 0;
}

.contNav-future .contNav-future-textBox .subHeading {
	margin-bottom: 4.07142857%;
}

.contNav-future .contNav-future-textBox .read {
	margin-bottom: 4.07142857%;
}

.contNav-future .view-btn {
	width: 100%;
	max-width: 288px;
	margin-left: auto;
	margin-right: 0;
	margin-top: -9.5%;
	height: 48px;
	position: relative;
	z-index: 9999;
	text-align: center;
}

.contNav-future .view-btn a {
	display: block;
	width: 100%;
	height: 100%;
}

.contNav-future .view-btn a span {
	position: relative;
	top: 12px; /* FUTUREエリアの文字だけを視覚的中央に押し下げます */
}

/* --- LOCATIONエリア --- */
.contNav-location {
	padding-bottom: calc((50 / var(--font-base)) * 1rem);
}

.contNav-location h2 {
	width: 55.71428571%;
	margin: 4.07142857% 0 0 9.21428571%;
}

.contNav-location .contNav-location-flex {
	width: 100%;
	display: flex;
	margin-left: 9.21428571%;
}

.contNav-location .contNav-location-headBox {
	width: auto;
	margin-top: 4.07142857%;
}

.contNav-location .contNav-location-headBox .subHeading {
	margin: 4.07142857% auto 0;	
}

.contNav-location .contNav-location-readBox {
	width: 430px;
	background-color: rgba(255,255,255,.8);
	padding: 2%; /*28/1400*/
	box-sizing: border-box;
	position: static;
	z-index: 10;
}

/* 文章マージン調整 */
.contNav-location .read {
  display: block;
}

/* 各段落の制御 */
.contNav-location .read .read-paragraph {
  display: block; /* 縦に並べる */
}

/* 文章の頭に、空行をつくる */
.contNav-location .read .read-paragraph + .read-paragraph {
	/* 【解説】
	最小値：14px（スマホなどの狭い画面での余白）
	可変値：2.1vw（画面幅に応じてリアルタイムに計算される余白）
	最大値：30px（PCなどの大画面でのカンプ実寸の余白）
	*/
	margin-top: clamp(14px, 2.1vw, 30px); 
}

.contNav-location .view-btn {
	margin: 30px 0;
}

.slider {
	width: 100%;
	overflow: hidden; /* 画面外のはみ出しを隠す */
	margin-top: -170px; /* 位置エリアとの間隔（カンプに合わせて調整） */
}

/* スライド内の各要素の隙間や高さを制御 */
.slider .slick-slide {
	margin: 0 9px; /* ★画像と画像の間の横の隙間（片側5px＝計10pxの隙間） */
}

/* Slickのクローン（無限ループ用の複製画像）が生成された際も
   比率を絶対に崩さず綺麗に一列に直列させるための記述 */
.slider .slick-track {
	  display: flex !important;
	  align-items: center;
}

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

/* --- DESIGNエリア --- */
.contNav-design {
	width: 100%;
	position: relative;
	color: #fff;
	background-image: url("../images/cont-nav-design-bg-pc.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto; /* 常に横幅100%で背景をピタッと収める */
	/* 画像の縦横比（1400×875）に合わせた「魔法の高さ固定」 */
	height: 0;
	padding-top: 62.5%; /* これで画面幅に応じてセクションの高さが自動伸縮 */
	margin-bottom: 0;
	overflow: hidden;
	z-index: 1;
}

.contNav-design .inner02 {
	/* inner02を基準点にして中の文字を浮かせる */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
}

.contNav-design h2 {
	width: 8.28571429%;
	position: absolute;
	top: 13%;
	right: 0;
}

.contNav-design .contNav-design-content {
	position: absolute;
	top: 11.5%;               
	right: 10%;           
	width: 50%;             
}

.contNav-design-textBox {
	width: 100%;
}

.contNav-design .contNav-design-textBox .subHeading {
	margin-bottom: clamp(20px, 3.5vw, 50px); 
} 

/* 文章マージン調整 */
.contNav-design .read {
	 display: block;
}

/* 各段落の制御 */
.contNav-design .read .read-paragraph {
	display: block; /* 縦に並べる */
}

/* 文章の頭に、空行をつくる */
.contNav-design .read .read-paragraph + .read-paragraph {
  /* 【解説】
    最小値：12px（スマホなどの狭い画面での余白）
    可変値：2.1vw（画面幅に応じてリアルタイムに計算される余白）
    最大値：28px（PCなどの大画面でのカンプ実寸の余白）
  */
  margin-top: clamp(12px, 2.1vw, 28px); 
}

.contNav-design .contNav-design-content .view-btn {
	display: block;
	width: 53%;
	max-width: 288px;
	margin-top: 35px;
	margin-left: auto;
}

.contNav-design .contNav-design-content .view-btn img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- PLANエリア --- */
.contNav-plan {
	width: 100%;
	position: relative;
	background-image: url("../images/cont-nav-plan-bg.jpg");
	background-repeat: no-repeat;
	background-position: right center; /* 右端を基準に画像を配置 */
	background-size: auto 100%;       /* 画像の高さ100%をセクションにフィットさせる */
	/* カンプの画像の比率に合わせた高さ固定（可変対応） */
	height: 0;
	padding-top: 36.42857143%;         /* 510px / 1400px（縦横比から算出） */
	margin-top: -1.85%;
	overflow: hidden;
}

.contNav-plan .inner {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center; /* ★これで縦方向に対して完全に中央揃えになります */
	align-items: flex-start; /* 横方向は左寄せ（ガイドライン合わせ） */
	box-sizing: border-box;
	padding-left: 6.5%;     /* 全体の左ツラ（ガイドライン）と開始位置を同期 */
}

.contNav-plan .contNav-plan-textBox {
	width: 65%;             /* 右側の家族写真と被らないように横幅を制限 */
	padding-top: 0
}

.contNav-plan h2 {
	width: 59.14285714%;    /* 414px / 700px (コンテンツ幅50%に対する実寸) */
	max-width: 414px;
	margin-top: 0;
	margin-bottom: clamp(40px, 5vw, 70px); /* 隙間を一律70pxに統一 */
}

.contNav-plan h2 img {
	max-width: 414px;
	height: auto;
}



/* --- ACCESSエリア --- */
.contNav-access {
	width: 100%;
	position: relative;
	background-image: url("../images/cont-nav-access-bg.jpg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 100%;
	height: 0;
	padding-top: 36.42857143%;
	overflow: hidden;
}

.contNav-access .inner {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
}

/* 右側のテキストボックス */
.contNav-access .contNav-access-textBox {
	width: 50%;
	position: absolute;
	top: 50%;
	right: 0;                          /* innerの右端（ガイドラインのツラ）にピタッと合わせる */
	transform: translateY(-50%);       /* 上下中央揃え */
}

.contNav-access h2 {
	width: 100%;
	margin-top: 0;
	margin-bottom: clamp(40px, 5vw, 70px);
}

.contNav-access h2 img {
	max-width: 577px;
	height: auto;
}

.contNav-access .contNav-access-textBox .subHeading02 {
	 text-align: right;
	 margin-top: 0;
	 margin-bottom: 0;
}

.contNav-access .contNav-access-textBox .view-btn {
	width: 50%;
	min-width: 288px;
	margin-top: 40px;
	margin-left: auto;
}


/* --- QUALITYエリア --- */
.contNav-quality {
	width: 100%;
	padding-top: calc((80 / var(--font-base)) * 1rem);
	padding-bottom: calc((80 / var(--font-base)) * 1rem);
}

.contNav-quality h2 {
	width: 49%;
	margin: 4.07142857% 0;
}

.contNav-quality .contNav-quality-textBox {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.contNav-quality .contNav-quality-textBox .subHeading02 {
	width: 60%;
	margin-bottom: 0;/* ★重要：下揃えの邪魔になるmarginを0にリセット */
	text-align: left;
}

.contNav-quality .contNav-quality-textBox .view-btn {
	max-width: 288px;               /* 画像の最大実寸 */
	margin-bottom: 0;               /* ★重要：下揃えの邪魔になるmarginを0にリセット */
}

.contNav-quality .contNav-quality-imgBox {
	display: flex;
	justify-content: space-between;
	margin: 80px auto 20px;
}

.contNav-quality .contNav-quality-imgBox img {
	width: 32.42857143%;
	height: auto;
}

.contNav-quality .contNav-caution {
	text-align: right;
	margin: 0 6.5% 0 0;
}



/*予告広告*/
.noticeArea {
	background-color: #efefef;
	padding: 4.07142857% 0;
	text-align: center; 
}

.noticeArea .notice-read {
	font-size: 12px;
	line-height: 1.917;
	margin: 12px auto;
}

.noticeArea .annotation {
	width: 100%;
	max-width: 830px;
	margin: 50px auto 0;
	text-align: left;
	letter-spacing: 0em;
}

.labelArea {
	width: 100%;
	max-width: 700px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 6.42857143% auto 0 auto;
}

.labelArea img:first-child {
	max-width: 300px;
}

.labelArea img:nth-child(2) {
	max-width: 360px;
}

.labelArea .label-annotation {
	width: 100%;
	font-size: 10px;
	line-height: 1.4;
	text-align: center;
	margin-top: 20px;
}


/*/// 相互リンク ///*/
section.links {
	width: 100%;
	background: #fff;
	overflow: hidden;
	padding: 130px 0;
	margin-bottom: 6rem;
}

section.links p.linksTitle {
	font-size: clamp(18px, 3.2vw, 30px);
	line-height: 1.667;
	text-align: center;
	margin-bottom: 3rem;
	color: #65889a;
}

section.links div.js-links-slider {
	width: 100%;
	margin: 0 auto;
	padding: 0 60px; 
	box-sizing: border-box;
	position: relative; /* 矢印の基準点 */
}

section.links div.js-links-slider p {
	width: calc(100% / 4);
	padding: 0 5px;
	box-sizing: border-box;
	text-align: center;
}

section.links div.js-links-slider p a {
	color: #333333;
	text-decoration: none;
	display: block;
}

section.links div.js-links-slider p img {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}

section.links div.js-links-slider p span {
	display: block;
	padding: 0.8em 0;
}
	
span.slickCap {
	border-bottom: solid 1px #333333;
	font-size:  clamp(12px, 3.2vw, 17px); 
}

span.slickAdd {
	font-size:  clamp(12px, 3.2vw, 17px); 
}

/* スライダーの親要素に相対配置を定義し、内側に余白を作って矢印のスペースを確保 */
section.links .inner02 {
	position: relative;
	padding: 0 50px; /* 左右に50pxの余白を作り、そこに三角矢印を配置します */
	box-sizing: border-box;
}

/* 左右の矢印ボタン共通の土台設定 */
section.links .slick-arrow {
	all: unset; /* ブラウザ標準のボタンデザインや、Slickのデフォルト文字を完全にクリア */
	position: absolute;
	top: 50%;   /* 画像の中央付近の高さに合わせる（カンプ基準） */
	transform: translateY(-50%);
	width: 0;
	height: 0;
	cursor: pointer;
	text-indent: -9999px; /* 「Previous」「Next」の文字を画面外に飛ばして非表示にする */
	z-index: 10;
}

/* ◀ 左側の矢印（Previous）を #d3a963 の三角形にする指定 */
section.links .slick-prev {
	left: 20px; /* inner02の左端からの位置 */
	border-top: 10px solid transparent;    /* 三角形の上の傾き */
	border-bottom: 10px solid transparent; /* 三角形の下の傾き */
	border-right: 14px solid #d3a963;      /* ★重要：右側の線を着色して「左向きの三角」を作る */
}

/* ▶ 右側の矢印（Next）を #d3a963 の三角形にする指定 */
section.links .slick-next {
	right: 20px; /* inner02の右端からの位置 */
	border-top: 10px solid transparent;    /* 三角形の上の傾き */
	border-bottom: 10px solid transparent; /* 三角形の下の傾き */
	border-left: 14px solid #d3a963;       /* ★重要：左側の線を着色して「右向きの三角」を作る */
}

/* マウスホバー時に少し透明にして、ボタンであることを分かりやすくする演出 */
section.links .slick-arrow:hover {
	opacity: 0.7;
}

/*//// 調整 ////*/
@media (max-width: 1030px){
/* --- DESIGNエリア --- */
.contNav-design {
	width: 100%;
	position: relative;
	height: auto !important;           /* ★PCの「height: 0」を解除してなすがままに */
	/* PC用の1枚画像をそのまま流用し、右側のグレー背景だけが画面を覆うように調整 */
	background-image: url("../images/cont-nav-design-bg-sp.jpg") !important;
	background-repeat: no-repeat;
	background-position: right bottom!important; /* 背景画像の右側（幾何学模様）をスマホのセンターに持ってくる */
	background-size: cover !important;       /* どんな画面幅でも背景の左右に白い隙間を作らない */
	padding-top: 50px;                     /* DESIGN見出しの上の余白 */
	padding-bottom: 0;                 /* 下の建物画像を底面にピタッとくっつけるため0 */
	margin-bottom: 0;
	overflow: hidden;
}

.contNav-design .inner02 {
	position: relative;                    /* PC版の absolute を解除 */
	top: 0;
	left: 0;
	transform: none;
	width: 100%;
	height: auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;  
}

.contNav-design h2 {
	position: static;                  /* PCのabsoluteを解除 */
	width: 100%;
	max-width: 278px;                  /* カンプのサイズ感に調整 */
	margin: 0 auto 35px;
}

.contNav-design h2 img.pc {
	display: none;
}

.contNav-design h2 img.sp {
	display: block;
	width: 100%;
	height: auto;
}

/* テキストとボタンを囲むコンテンツのハコ */
.contNav-design .contNav-design-content {
	position: static;                  /* PCのabsoluteを解除 */
	width: 100%;
}

.contNav-design-textBox {
	width: 100%;
}

.contNav-design .contNav-design-textBox .subHeading {
	font-size: 22px;
	line-height: 1.6;
	color: #fff;
	margin-bottom: 30px;
	text-align: center;
}

.contNav-design .read .read-paragraph + .read-paragraph {
	margin-top: 20px; 
}

/* VIEW MORE ボタン */
.contNav-design .contNav-design-content .view-btn {
	display: block;
	width: 100%;
	max-width: 288px;
	margin: 40px auto 45px;
}

/* ★カンプの完全再現：最下部に大きく接着する建物画像 */
.contNav-design img.design-mainImg.sp {
	display: block;                      /* スマホ用の建物をここで表示 */
	width: 100%;
	max-width: 768px;                    /* スマホ画面で大きくなりすぎないように制限 */
	height: auto;
	margin: 0 auto;                      /* 中央寄せのまま底面にピタッと接着 */
}

/*  ACCESSエリア */
.contNav-access {
	width: 100%;
	height: auto !important;           /* PCの高さ0を解除 */
	padding-top: 50px;
	padding-bottom: 0;                 /* 下の画像を底面にピタッと接着 */
	background-image: none !important; /* PC用の背景画像をクリア */
}

.contNav-access .inner {
	position: static;
	transform: none;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.contNav-access .contNav-access-textBox {
	position: static;
	transform: none;
	width: 100%;
	text-align: center;
}

.contNav-access .contNav-access-textBox h2 {
	width: 100%;
	max-width: 280px;
	margin: 0 auto 30px;
}

.contNav-access .contNav-access-textBox .subHeading02 {
	 text-align: center;
}

.contNav-access .contNav-access-textBox .view-btn {
	width: 100%;
	margin: 57px auto;
}

.contNav-access .contNav-access-textBox .view-btn img {
	margin: 0 auto;
}

.contNav-access-imgSp {
	width: 100%;
	margin-top: 40px;
}

.contNav-access-imgSp.sp {
	display: block;
}

/*  PLANエリア */
.contNav-plan {
	width: 100%;
	height: auto !important;/* PCの高さ0を解除 */
	padding-top: 50px;
	padding-bottom: 0;/* 下の画像を底面にピタッと接着 */
	background-image: none !important; /* PC用の背景画像をクリア */
}

.contNav-plan .inner {
	position: static;
	transform: none;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.contNav-plan .contNav-plan-textBox {
	position: static;
	transform: none;
	width: 100%;
	text-align: center;
	padding-top: 0;
}

.contNav-plan .contNav-plan-textBox h2 {
	width: 100%;
	max-width: 198px;
	margin: 0 auto 30px;
}

.contNav-plan .contNav-plan-textBox .view-btn {
	width: 100%;
	margin: 57px auto;
}

.contNav-plan .contNav-plan-textBox .view-btn img {
	margin: 0 auto;
}

.contNav-plan-imgSp {
	width: 100%;
	margin-top: 40px;
}

.contNav-plan-imgSp.sp {
	display: block;
}

/* --- QUALITYエリア --- */
.contNav-quality {
/*	width: 100%;
	padding-top: calc((80 / var(--font-base)) * 1rem);
	padding-bottom: calc((80 / var(--font-base)) * 1rem);*/
}

.contNav-quality h2 {
	width: 100%;
	max-width: 332px;
	margin: 0 auto 30px;
}

.contNav-quality .contNav-quality-textBox {
	width: 100%;
	flex-direction: column;
}

.contNav-quality .contNav-quality-textBox .subHeading02 {
	width: 100%;
	text-align: center;
}

.contNav-quality .contNav-quality-textBox .view-btn {
	margin: 57px auto 0;
}

.contNav-quality .contNav-quality-imgBox {
	display: flex;
	justify-content: space-between;
	margin: 60px auto 20px;
}

.contNav-quality .contNav-quality-imgBox img {
	width: calc(100% / 3);
	height: auto;
}

}

/* sp */
@media (max-width: 768px) {
.selling-point {
	background-size: 87.46666667%;
	padding: 12% 0 6%;
}

.selling-point-frontier {
	width: 100%;
	margin-bottom: 2.7rem;
}

.selling-point-frontier img {
	max-width: 728px;
	margin: 0 auto;
}

.selling-point-text img {
	max-width: 728px;
	margin: 0 auto;
}

/*information*/
.info {
	padding: 6% 0;
}
.info .info-forAction {
	margin-top: calc((30 / var(--font-base)) * 1rem);
	margin-bottom: calc((10 / var(--font-base)) * 1rem);
}

.info p.info-title {
	font-size: calc((15 / var(--font-base)) * 1rem);
	margin-bottom: calc((30 / var(--font-base)) * 1rem);
}

.info .info-forAction li {
	font-size: calc((15 / var(--font-base)) * 1rem);
}

.info .info-forAction li:nth-child(1) {
	margin-right: 12px;
}

.info .info-forAction li:nth-child(2) {
	margin-left: 12px;
}


/*/// ページ内ナビゲーション共通 ///*/
.view-btn {
	width: 100%;
	max-width: 288px;
	margin: 30px auto 0;
}


/*POSITIONエリア*/
.contNav-position {
    background-image: none;
    background-color: #fff;
    padding: 60px 0 40px;
  }

.contNav-position .inner02 {
	max-width: 100%;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contNav-position h2 {
	width: 100%;
	max-width: 360px;
	margin: 0 auto 35px;
    position: static;
}
.contNav-position h2 img.sp {
	display: block;
	width: auto;
	margin: 0 auto;
}

/* テキスト全体のハコ（PCのabsoluteをリセット） */
.contNav-position .contNav-position-textBox {
	position: static;       /* absoluteを解除 */
	width: 100%;
}

.contNav-position .subHeading {
	text-align: center;
	margin-bottom: 25px;
}

.contNav-position .read {
}

/* 文章の行間（スマホ用に少し詰める） */
.contNav-position .read .read-paragraph + .read-paragraph {
	margin-top: 20px; 
}

/* 地図画像 */
.contNav-position-mapSp {
	width: 100%;
	margin-bottom: 20px;
}
.contNav-position-mapSp img.sp {
	width: 100%;
	height: auto;
	display: block;
}

.contNav-position .contNav-caution {
	width: 70%;
	top: 90%;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
}

/* --- FUTUREエリア --- */
.contNav-future {
	margin-top: 50px;
}
  
.contNav-future .contNav-future-flex {
	flex-direction: column;
	align-items: center;
}

.contNav-future .contNav-future-flex h2 {
	width: 100%; 
	max-width: 360px;
	margin: 0 auto 30px;
	padding-top: 0;
}

.contNav-future .contNav-future-flex img.contNav-future-bgImg {
	width: 100%;
}

.contNav-future .contNav-future-textBox {
	max-width: 100%;
    padding: 40px 20px 0;
	box-sizing: border-box;
}

.contNav-future .contNav-future-textBox .subHeading {
	text-align: center;
	margin-bottom: 25px;
}

.contNav-future .view-btn {
	width: 100%;
	max-width: 288px;
	margin: 0 auto 45px;
}

/* --- LOCATIONエリア --- */
.contNav-location {
	padding-bottom: 40px;
}

.contNav-location h2 {
	width: 100%;
	max-width: 340px;
	margin: 40px auto 0 auto;
}

.contNav-location .contNav-location-flex {
	flex-direction: column;
	align-items: center;
	margin-left: auto;
}

.contNav-location .contNav-location-headBox {
	width: 100%;
	margin-top: 0;
}

.contNav-location .contNav-location-headBox .subHeading {
	text-align: center;
	margin-bottom: 25px;
}

.contNav-location .contNav-location-readBox {
    width: 100%;
    background-color: transparent; /* 背景の白透過を消してスッキリ流す */
    padding: 0;
}

.contNav-location .read .read-paragraph + .read-paragraph {
	margin-top: 20px; 
}

.contNav-location .view-btn {
	margin: 30px auto;
}

.slider {
  margin-top: 40px; 
}

.slider .slick-slide {
  margin: 0 5px; /* ★画像と画像の間の横の隙間（片側5px＝計10pxの隙間） */
}

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


/*予告広告*/
.noticeArea {
	padding: 45px 0;
}

.noticeArea .notice-read {
	text-align: left;
}

.noticeArea .annotation {
	width: 100%;
	max-width: 830px;
	margin: 20px auto 0;
	text-align: left;
	letter-spacing: 0em;
}

.labelArea {
	flex-direction: column;
}

.labelArea img:first-child {
	max-width: 360px;
	margin: 0 auto;
}

.labelArea img:nth-child(2) {
	margin: 30px auto 0;
}

.labelArea .label-annotation {
	text-align: left;
	margin-top: 15px;
}

/*/// 相互リンク ///*/
section.links {
	width: 100%;
	padding: 60px 0;
	margin-bottom: 0;
}
}

/* 調整 */
@media (max-width: 430px) {
.info .info-forAction li:nth-child(1) {
	margin-right: 9px;
}

.info .info-forAction li:nth-child(2) {
	margin-left: 9px;
}
.contNav-position .contNav-caution {
	width: 95%;

}

.contNav-quality .contNav-quality-imgBox {
	flex-direction: column;
	margin: 30px auto 20px;
}

.contNav-quality .contNav-quality-imgBox img {
	width: 100%;
}

/*/// 相互リンク ///*/
section.links {
	padding: 30px 0;
}

section.links div.js-links-slider {
    padding: 0;
}

section.links div.js-links-slider p {
	width: 100%;
    padding: 0;
}

section.links div.js-links-slider p img {
	width: 100% !important;
	max-width: none !important; /* 460pxの制限を完全に消し去ります */
	height: auto !important;
}

section.links div.js-links-slider .slick-prev {
	left: -30px;
}
section.links div.js-links-slider .slick-next {
	right: -30px;
}
}