@charset "UTF-8";
/*==================================================================
  top2.css ― グローイングスクエア千歳烏山ステージ TOP 追加スタイル
  ・既存 top.css を土台に、今回のPCデザインで新規／変更となる箇所のみ定義。
  ・ブレイクポイントは既存に合わせ 1000/1001px（〜1000=SP / 1001〜=PC）。
  ・フォントは既存コーディングを踏襲（明朝＝Noto Serif JP系、ゴシック＝Noto Sans JP系）。
  ・pc_on/smart_on の表示切替を壊さないため img には display を指定しない。
==================================================================*/

:root{
/*	--t2-serif:"游明朝","Yu Mincho",YuMincho,"Noto Serif JP","ヒラギノ明朝 ProN",serif;*/
	--t2-serif:noto-serif-jp, "游明朝","Yu Mincho",YuMincho,"Noto Serif JP","ヒラギノ明朝 ProN",sans-serif;
	--t2-sans:"Noto Sans JP","ヒラギノ角ゴ ProN",'Hiragino Kaku Gothic ProN',"メイリオ",Meiryo,sans-serif;
	--t2-brown:#5c4636;
	--t2-accent:#7a2e33;
}

.top2_main img,
.top2_point img,
.top2_bnr img,
.top2_lead_ttl img,
.top2_lead_ttl2 img,
.top2_design_ph3 img,
.top2_ph2 img,
.top2_pe_big img,
.top2_koudo img,
.top2_nav_cell img{ width:100%; height:auto; }

/*---------- メインビジュアル ----------*/
.top2_main{ clear:both; width:100%; margin:0; padding:0; position:relative; }

/*==================================================================
  特長バッジ（6点／PC 3×2）
==================================================================*/
.top2_point_wrap{
	clear:both; width:94%; max-width:1360px; margin:0 auto; padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.top2_point{
	width:32.5%;
	margin:0 0 10px;
}
@media print,screen and (min-width:1001px){
.top2_point_wrap{
	width:98%;
	max-width:1400px;
}
.top2_point{
	width:33.2%;
	max-width: 461px;
}
}
@media print,screen and (max-width:1000px){
	.top2_point_wrap{ width:90%; }
	.top2_point{ width:48.5%; }
}

/*==================================================================
  バナー（資料請求 / LINE）
==================================================================*/
.top2_bnr_wrap{
	clear:both;
	width:75%;
	width:98%;
	max-width:1000px;
	margin:0 auto;
	padding:0;
}
.top2_bnr{ clear:both; width:100%; }
@media print,screen and (max-width:1000px){
.top2_bnr_wrap{
	width:88%;
	width:100%;
}
}

/*==================================================================
  イントロ（コンセプト）
==================================================================*/
#box1{ clear:both; width:100%; }
.top2_lead_ttl{ clear:both; width:90%; max-width:760px; margin:0 auto; text-align:center; }
.top2_lead_ttl img{ width:auto; max-width:100%; }
.top2_lead_ttl2{ clear:both; width:90%; max-width:420px; margin:0 auto; text-align:center; }
.top2_lead_ttl2 img{ width:auto; max-width:100%; }
.top2_lead_txt{
	width:100%;
	text-align:center;
	font-family: "A-OTF Ryumin Pr6N", serif;
	font-style: normal;
	font-weight: 300;
	font-feature-settings: "palt", "kern";
	text-rendering: optimizeLegibility;
	color:#000;
	font-size: 19px;
	letter-spacing: 0.05em;
	line-height: 43px;
}


@media print,screen and (min-width:1001px){
.top2_lead_ttl{
	width: 784px;
}
.top2_lead_ttl2{
	width: 402px;
}
}

@media print,screen and (max-width:1000px){
.top2_lead_txt{
	font-size:28px;
	letter-spacing: 0.03em;
    line-height: 65px;
}
}

/* リード文中のルビ（街区→いえ）：既存の広い行間内に収め、PC/SPともレイアウトを崩さない */
.top2_lead_txt ruby{ ruby-position:over; -webkit-ruby-position:before; }
.top2_lead_txt rt{ font-size:.5em; line-height:1; letter-spacing:.08em; font-weight:400; text-align:center; }

/*==================================================================
  セクション見出し下のリード（中央）
==================================================================*/
.top2_sec_lead{
	clear:both; width:90%; max-width:900px; margin:0 auto; text-align:center;
	font-family: noto-serif-jp, "游明朝","Yu Mincho",YuMincho,"Noto Serif JP","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 ProN", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", sans-serif;

	color:#3a3532; letter-spacing:.05em; line-height:43px; font-size:16px;
	
	-webkit-font-feature-settings: 'palt' 1; // for Android 4.4
	font-feature-settings: 'palt' 1;
}
@media print,screen and (max-width:1000px){
.top2_sec_lead{
	font-size:3.5vw;
/*	font-size:3.25vw;*/
	letter-spacing: 0.01em;
	line-height:2;
}
}

/*==================================================================
  ワイドコンテナ（PC＝最大1400px／グリッド帯＝最大1160px）
==================================================================*/
.top2_wide{
	clear:both;
	width:92%;
	width:96%;
	max-width:1400px;
	margin:0 auto;
}
.top2_wide2{
	clear:both;
	width:90%;
	width:96%;
	max-width:1160px;
	margin:0 auto;
}

/* セクション見出し（フラワー＋英字）の横幅をデザイン指定 260px に */

.top_box_title1 {
	clear:both;
	width:50%;
	height:auto;
	margin:0 auto;
	padding: 0;
	position:relative;
}
@media print, screen and (min-width: 1001px) {
.top_box_title1 {
	width:92%;
	max-width:260px;
}
}


/*==================================================================
  2カラム（左右）レイアウト
==================================================================*/
.top2_flex_lr{
	clear:both;
	width:100%;
	margin:0 auto;
}
@media print,screen and (min-width:1001px){
.top2_flex_lr{
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:flex-start;
}
/* 既定（ACCESS/PLAN/QUALITY/LOCATION上部）＝写真760 : テキスト約580 */
.top2_col_ph_l,
.top2_col_ph_r{
	width:55%;
	max-width: 760px;
}
.top2_col_txt_r,
.top2_col_txt_l{ width:41%; display:flex; flex-direction:column; justify-content:center; align-self:stretch; }
/* LANDSCAPE のみ 写真842 : DESIGNパネル558（合計1400・すき間0） */
#box2 .top2_flex_lr{ align-items:stretch; flex-direction:row-reverse; }	/* PCのみ：図を右／DESIGNパネルを左へ（SPはDOM順のまま図が上） */



#box2 .top2_col_ph_l{ width:60.142%; }
#box2 .top2_col_ph_l{
	max-width: 670px;
}
#box2 .top2_col_ph_l .pa01{
	right: -8%;
}






#box2 .top2_design_panel{
	width:39.858%;
	align-self:stretch;                 /* 写真と同じ高さに伸ばす */
	display:flex; flex-direction:column; justify-content:center; /* 中身をタテ中央 */
}
#box2 .top2_design_panel.design01{
	width:46%;
	max-width: 460px;
	margin-right: 30px;
	
/*	background: #CC4A4C;	*/
}



}
@media print,screen and (max-width:1000px){
.top2_col_ph_l,
.top2_col_ph_r,
.top2_col_txt_l,
.top2_col_txt_r,
.top2_design_panel{
	width:100%;
	margin:0;
}
#box2 .top2_col_ph_l .pa01{
	bottom: -1%;
	right: 4%;
}

}
.m0auto{ margin:0 auto !important; }

/*==================================================================
  LANDSCAPE（box2）写真行のレイアウト指定
  ・〜1400px：左右余白なしの全幅（＝写真は画面左端まで）。
  ・1400px超：コンテンツは1400pxで中央寄せ、外側（左右の余白）は #7ee429。
  ・READ MORE：右から40px・上下50pxの余白。
==================================================================*/
/* ::before の 100vw が縦スクロールバー幅分はみ出し、横スクロールバーが出るのを
   このセクション内でクリップして防ぐ（見た目は不変・他へ影響なし） */
#box2{ overflow-x:clip; }
#box2 .top2_wide{
	width:100%;
	max-width:1400px;
	margin:0 auto; position:relative;
}
/* 1400px を超えた左右の“外側”を #7e4429 で塗る（100vw の擬似背景） */
#box2 .top2_wide::before{
	content:"";
	position:absolute;
	top:0; bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	background:#7e4429;
	z-index:0;
}




#box2 .top2_flex_lr{
	position:relative;
	z-index:1;
}
#box2 .top2_flex_lr.design01{
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	
	justify-content: flex-start;
	
/*	background: #54D0E2;*/
}




.top2_readmore{
    width: 90%;
	max-width: 248px;
    margin-left: auto;
    margin-right: 0;

}
@media print,screen and (max-width:1000px){
	/* SPは従来どおり（外側の色塗りは不要） */
/*	#box2 .top2_wide::before{ display:none; }*/
#box2 .top2_wide{
	width:90%;
}
#box2 .top2_wide.m01{
	width:100%;
}
.top2_readmore{
    width: 45%;
	max-width: none;
    margin: 0 auto;
}
}

/* 見出し下・テキスト列のリード（左右レイアウト内） */
.top2_sec_lead2{
	width:100%;
	text-align:center;
	font-family: "A-OTF Ryumin Pr6N", serif;
	font-style: normal;
	font-weight: 300;
	font-feature-settings: "palt", "kern";
	text-rendering: optimizeLegibility;
	color:#000;
	letter-spacing:0.08em;
	line-height:2.2;
	line-height:2;
	font-size:24px;
}
@media print,screen and (max-width:1000px){
.top2_sec_lead2{
	font-size: 33px;
	letter-spacing: 0.05em;
	line-height: 65px;
}
}

/*---------- 2枚並び写真 ----------*/
.top2_ph2col{ clear:both; width:100%; display:flex; flex-wrap:nowrap; justify-content:space-between; }
.top2_ph2col_2{ clear:both; width:100%; display:flex; flex-wrap:nowrap; justify-content:space-between; }
.top2_ph2col.vtop{ align-items:flex-start; }
.top2_ph2{ 
	width:49%; 
	max-width:370px; 
	position: relative;
}
.top2_ph2_2{ 
	width:56.3%; 
	max-width:563px; 
	position: relative;
}
@media print,screen and (max-width:1000px){
.top2_ph2{ 
	width:49%; 
	max-width:none; 
}
.top2_ph2_2{ 
	width:85%; 
	max-width:none;
	margin: 0 auto;
}
.top2_ph2col_2{
	flex-direction: column;
}
}
.top2_cap{
	font-family: "A-OTF Ryumin Pr6N", serif;
	font-style: normal;
	font-weight: 300;
	font-feature-settings: "palt", "kern";
	text-rendering: optimizeLegibility;
	color: #000;
    text-decoration: none;
    font-size: 12px;
    line-height: 16px;
    font-feature-settings: "palt";
    text-align: right;
    letter-spacing: 0.03em;
}
@media print,screen and (max-width:1000px){
.top2_cap{
	font-size: 19px;
	line-height: 30px;
}
}

/*==================================================================
  DESIGN サブパネル（LANDSCAPE 右）
==================================================================*/
.top2_design_panel{
	box-sizing:border-box; padding:34px 49px 30px;   /* w558 → 内側 w460 */
/*
	background:#5c4636;
	background:linear-gradient(180deg,#6a5241 0%,#4a3728 100%);
*/
	color:#f3ede6; text-align:center;
}
.top2_design_panel.design01{
	padding:34px 0 30px;   /* w558 → 内側 w460 */

}

.top2_design_ttl{ 
	font-family: "adobe-garamond-pro", serif;
    font-weight: 200;
    font-style: normal;
	font-size: 20px;
	letter-spacing: 0.2em;
}

.top2_design_txt{
	text-align:center;
	font-family: "A-OTF Ryumin Pr6N", serif;
	font-style: normal;
	font-weight: 300;
	font-feature-settings: "palt", "kern";
	text-rendering: optimizeLegibility;
	color: #FFF;
	font-size: 18px;
	line-height: 34px;
	letter-spacing: 0.02em;
}
	
.top2_design_ph3{ display:flex; flex-wrap:nowrap; justify-content:space-between; }

.top2_design_ph3{
	width: 100%;
	margin: 0 auto;
}
@media print,screen and (max-width:1000px){
.top2_design_ph3{
	width: 96%;
	margin: 0 auto;
}
}
.top2_design_ph3 .top2_dph{
	width:32%;
	max-width: 145px;
}
.top2_design_cap{ margin-top:8px;
	text-align:right;
	font-family:var(--t2-sans);
	font-size:10.5px;
	color:#cfc4b8;
}
@media print,screen and (max-width:1000px){
.top2_design_panel{
	padding:26px 6% 24px;
	padding:26px 3% 24px;
}
.top2_design_panel.design01{
	width: 100%;
	margin: 0 auto;
}

.top2_design_ttl{
	font-size: 32px;
}
.top2_design_txt{
	font-size: 28px;
	line-height: 50px;
}
.top2_design_ph3 .top2_dph{
	width:32%;
	max-width: none;
}
}

/*==================================================================
  サブ見出し（SHOPPING / GOURMET / PARK / EDUCATION）
==================================================================*/
.top2_subttl{
	font-family: "adobe-garamond-pro", serif;
    font-weight: 200;
    font-style: normal;
	font-size: 20px;
	letter-spacing: 0.2em;
	text-align: center;
	color: #7e4429;
	font-size:20px;
	letter-spacing:0.1em;
	line-height:1;
}

@media print,screen and (max-width:1000px){
.top2_subttl{
    font-size: 32px;
}
}


/*---------- PARK / EDUCATION 2カラム ----------*/
.top2_pe_flex{ clear:both; width:100%; }
@media print,screen and (min-width:1001px){
	.top2_pe_flex{ display:flex; flex-wrap:nowrap; justify-content:space-between; }
	.top2_pe_col{ width:48.5%; }
}
@media print,screen and (max-width:1000px){ .top2_pe_col{ width:100%; margin:0 0 24px; } }
.top2_pe_big{ clear:both; width:100%; }

/*==================================================================
  READ MORE ボタン（右寄せ）
==================================================================*/


/*==================================================================
  低炭素 帯（4バッジ 2×2）
==================================================================*/
.bg04 .top2_koudo_ttl,
.top2_koudo_ttl{
	clear:both;
	width:90%;
	max-width:900px;
	margin:0 auto;
	text-align:center;
	color:#000;
	letter-spacing:.05em;
	line-height:1.8;
	font-size:20px;
	font-weight: 700;
	font-family: "A-OTF Ryumin Pr6N", serif;
	font-style: normal;
	font-weight: 300;
	font-feature-settings: "palt", "kern";
	text-rendering: optimizeLegibility;

}
.top2_koudo_grid{
	clear:both;
	width:92%;
	max-width:760px;
	margin:0 auto;
}
.top2_koudo_row{
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	margin-bottom:14px;
}
.top2_koudo{
	width:44%;
	max-width:306px;
}
.top2_koudo_x{
	width:8%;
	text-align:center;
	color:#8a7f70;
	font-size:22px;
	font-family: noto-serif-jp, "游明朝","Yu Mincho",YuMincho,"Noto Serif JP","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 ProN", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", sans-serif;

}
.top2_koudo_note{
	clear:both;
	width:90%;
	max-width:900px;
	margin:0 auto;
	text-align:center;
	font-family:var(--t2-sans);
	color:#8a8279;
	font-size:11px;
	line-height:1.6;
}
@media print,screen and (max-width:1000px){
.top2_koudo_ttl{
	font-size:3.8vw;
	font-size:4.1vw;
	line-height:1.2;
	line-height:1.6;
	position: relative;
	left: 0.12em;
}
.top2_koudo{
	width:46%;
}
.top2_koudo_note{
	font-size:2.7vw;
}
}



/*==================================================================
  MVメインスライダー（Ken Burns / bxSlider）
  ・kenburns.css は「.top_main_ph1_txt1 の画像」を通常フローの高さ基準にするが、
    本案件はキャッチを写真に焼き込み済みでテキスト枠画像が無い（src空）。
    そのままだとスライド高さ=0でスライダーが表示されないため、
    スライド枠に画像と同じ比率(1400:630)を与えて高さを確定する。
==================================================================*/
#slider1 .top_main_ph1,
#slider2 .top_main_ph1{ width:100%; aspect-ratio:1400 / 630; }

/*==================================================================
  MVスライダーのキャプション（枠の“外・下”に表示）
  ・現行HTMLは各スライドが .top_main_ph1bg でラップされ、
    .contents98（キャプション枠）が .top_main_ph1 の外（兄弟）に置かれる。
  ・キャプションはスライダー枠の内側ではなく、枠の下端外側へ出し、
    外枠から 8px 離して表示する（PC/SP共通）。
  ・そのため bxSlider の .bx-viewport{overflow:hidden} を解除し、
    枠下にキャプション分の余白を確保する。フェード時は非アクティブ
    スライドの不透明度0によりアクティブのキャプションだけが見える。
==================================================================*/
#slider1 .top_main_ph1bg,
#slider2 .top_main_ph1bg{ position:relative; }

/* 枠外（下）にキャプションを見せるためクリップを解除 */
#index_main .bx-viewport,
.smart_on .bx-viewport{ overflow:visible !important; }

/* キャプション分の余白を枠下に確保（次セクションと重ならないように） */
#index_main .bx-wrapper,
.smart_on .bx-wrapper{ margin-bottom:34px; }

/* キャプション枠：スライド直下（＝外枠の下）に配置。外枠から 8px 下 */
#slider1 .contents98,
#slider2 .contents98{
	position:absolute; left:0; right:0; top:100%;
	width:98%; margin:8px auto 0; z-index:4; pointer-events:none;
}
/* キャプション文字：通常フローで右寄せ・外側なので通常色 */
#slider1 .contents98 .cap01,
#slider2 .contents98 .cap01{
	position:static; display:block;
	top:auto; left:auto; right:auto; bottom:auto;
	margin:0; padding:0;
	text-align:right; color:#5a5147; text-shadow:none;
}

/*==================================================================
  ACCESS（box3）レイアウト
  ・大外枠に .bg02（マーブル背景）を追加済み。
  ・〜1400px：左右いっぱいの全幅（写真は画面左端まで）。
  ・1400px超：コンテンツは1400pxで中央固定、外側は bg02 の背景がそのまま表示。
  ・READ MORE：右から80px、上下は既存スペーサー（h50/h110）で調整。
==================================================================*/
#box3 .top2_wide{ width:100%; max-width:1400px; margin:0 auto; }
#box3 .top2_readmore{ width:100%; max-width:1400px; margin:0 auto; padding:0 80px; }
@media print,screen and (max-width:1000px){
#box3 .top2_wide{
	width:90%;
	width:96%;
}
#box3 .top2_readmore{
	width:90%;
	padding:0;
}
}

/*==================================================================
  ACCESS 駅名テキスト画像（写真内オーバーレイ・左右天地センター）
  ・PC：原寸 220×70。
  ・SP：SHIBUYA/TOKYO は写真幅の約70%、SHINJUKU(大)は同等の見た目(約34%)。
==================================================================*/
.top2_acc_txt{
	width: 100%;
	max-width: 220px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.top2_acc_txt2{
	width: 100%;
	max-width: 220px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
@media print,screen and (max-width:1000px){
.top2_acc_txt{
	width: 40%;
	max-width: none;

}
.top2_acc_txt2{
	width: 74%;
	max-width: none;
}
}


/*==================================================================
  LOCATION（box4）SHOPPING / PARK / EDUCATION 調整
==================================================================*/
/* SHOPPING：トップ写真(右カラム=w760)と同じ幅・右寄せで収める */
@media print,screen and (min-width:1001px){
	#box4 .top2_shop_r{ width:54.3%; margin-left:auto; }
}

/* PARK / EDUCATION：PARK群（つつじ大＋みんなの森/もぐら縦2）｜縦ドット｜EDUCATION群（給田小/上北沢中縦2・右寄せ） */
#box4 .top2_pe2{ clear:both; width:100%; }
#box4 .top2_pe2 img{ width:100%; height:auto; }
#box4 .top2_pe2_cell{ position:relative; }
#box4 .top2_pe2_big{ position:relative; }
#box4 .top2_pe2_lbl_park,
#box4 .top2_pe2_lbl_edu{ text-align:center; }

@media print,screen and (min-width:1001px){
	/* 3グループ横並び：PARK群を左／区切りを中央／EDUCATION群を右端に */
	#box4 .top2_pe2_row{ display:flex; flex-wrap:nowrap; align-items:stretch; padding-bottom:48px; }
	#box4 .top2_pe2_park{ width:70.5%; display:flex; flex-direction:column; }
	#box4 .top2_pe2_edu{ width:19.5%; margin-left:auto; display:flex; flex-direction:column; } /* 右寄せ */
	#box4 .top2_pe2_div{ width:0; align-self:stretch; margin-left:auto; border-left:1px dotted #ab9f90; }

	/* PARK群内：つつじ大＋みんなの森/もぐら（下端を揃える） */
	#box4 .top2_pe2_pg{ display:flex; flex-wrap:nowrap; align-items:stretch; flex:1; }
	.top2_pe2_pg .top2_pe2_big{ 
		width:69.6%; 
		max-width: 563px;
	}
	.top2_pe2_pg .top2_pe2_stack{
		width:27.7%; margin-left:2.7%;
		max-width: 224px;
		}
	/* EDUCATION群内：スタックをグループ高さいっぱいに */
	#box4 .top2_pe2_edu .top2_pe2_stack{ flex:1; }

	/* スタック共通：縦積み、2枚目を下端へ＝つつじ下端と一致 */
	#box4 .top2_pe2_stack{ display:flex; flex-direction:column; }
	#box4 .top2_pe2_big > .top2_cap,
	#box4 .top2_pe2_cell > .top2_cap{ position:absolute; top:100%; left:0; right:0; margin-top:5px; }
	#box4 .top2_pe2_cell:last-child{ margin-top:auto; }
}
@media print,screen and (max-width:1000px){
	/* SP：PARK群→EDUCATION群の順に縦積み（各ラベルは自グループの上） */
	#box4 .top2_pe2_row{ display:block; }
	/* #box4 .top2_pe2_edu{ margin-top:32px; } */
	#box4 .top2_pe2_pg{ display:block; }
	#box4 .top2_pe2_stack{ display:flex; justify-content:space-between; }
	#box4 .top2_pe2_cell{ width:48.5%; }
	#box4 .top2_pe2_div{ display:none; }
}



/*==================================================================
  大きい写真のキャプションを画像の外（下）に出す（通常フロー・明朝11px右寄せ）
  ・LOCATION上部/PLAN/QUALITY の大写真キャプション用。
  ・下にコンテンツ（小写真等）があるため absolute ではなく通常フローで配置。
==================================================================*/
.top2_cap_static{ position:static !important; margin-top:8px; }


.content800_top{
	width: 92%;
	max-width: 800px;
	margin: 0 auto;
}
.contents1400_top{
	width: 95%;
	max-width: 1400px;
	margin: 0 auto;
}
@media print,screen and (max-width:1000px){
.bnr_size{
	width: 70%;
    margin: 0 auto;
}
.top2_cap_static{
	margin: 0;
}
}