@charset "utf-8";

/* ***************************************************************************************************
	BASE
*************************************************************************************************** */
[class*="pt-"] .txtBox{
	line-height: 2.2;
}
[class*="pt-"]  .txtBox .row{
	display: block;
}

@media screen and (max-width: 599px) { /*{belowSP}*/
	[class*="pt-"] .txtBox{
		line-height: 1.8;
	}
}
@media screen and (max-width: 1049px) { /*{TB}*/
	[class*="pt-"]  .txtBox .inbl {
		display: inline;
	}
}
@media print, screen and (min-width: 1050px) {
	[class*="pt-"]  .txtBox {
		font-size: min(1.6rem, 1.4vw);
	}
}


/* ------------------------------------------------------------------------
	pt-tkAccess
------------------------------------------------------------------------ */
	.pt-tkAccess .js_swipeMe_active .js_swipeMeInnerBoxOverlay,
	.pt-tkAccess .js_swipeMe_active .js_swipeMeInnerBox img {width: 140%;}



/* accessCol
------------------------------------------------*/

@media print, screen and (min-width: 1050px) {
	.accessCol {
		display: grid;
		grid-template-columns: 45fr 55fr;
		align-items: center;
		gap: 4%;
		margin-top: 3em;
	}
}

/* trainmap
-------------------------*/
	.tkAccessBox .trainmap {
		max-width: 1100px;
		margin: 3em auto;
	}

/* stationPic
-------------------------*/
	.tkAccessBox .stationPic {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
		margin-top: 3em;
	}
	.tkAccessBox .stationPic .stationUnit {
		position: relative;
		overflow: hidden;
		color: #FFF;
		font-family: var(--site-fontFamily);
		line-height: 1;
		aspect-ratio: 580 / 540;
	}
	.tkAccessBox .stationPic .stationUnit.large {
		grid-column: span 2;
		aspect-ratio: 1224 / 560;
	}
	.tkAccessBox .stationPic .stationUnit img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.tkAccessBox .stationPic .stationUnit::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, .45);
		pointer-events: none;
	}
	.tkAccessBox .stationPic .stationUnit p {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		margin: 0;
		line-height: 1.4;
	}
	.tkAccessBox .stationPic p > * {
		display: block;
		font-size: 3.6vw;
	}
	.tkAccessBox .stationPic p strong {
		font-size: 1.6em;
	}
	.tkAccessBox .stationPic p em {
		font-size: 1.8em;
		letter-spacing: 0.05em;
	}
	.tkAccessBox .stationPic p .sta {
		min-width: 60%;
		text-align: center;
		margin: 0 auto;
		border-bottom: 1px solid rgba(255, 255, 255, .3);
	}
	.tkAccessBox .stationPic p small {
		font-size: 0.8em;
	}
	.tkAccessBox .stationPic .stationUnit.large p > * {
		font-size: 4.4vw;
	}
	.tkAccessBox .stationPic .stationUnit.large p small {
		font-size: 3.5vw;
	}
@media print, screen and (min-width: 600px) {
	.tkAccessBox .stationPic {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}
	.tkAccessBox .stationPic .stationUnit {
		aspect-ratio: 390 / 260;
	}
	.tkAccessBox .stationPic .stationUnit.large {
		aspect-ratio: 792 / 362;
	}
	.tkAccessBox .stationPic p > * {
		font-size: min(1.8rem, 1.4vw);
	}
	.tkAccessBox .stationPic p small {
		font-size: min(1.44rem, 1.12vw);
	}
	.tkAccessBox .stationPic .stationUnit.large p > * {
		font-size: min(2.2rem, 1.7vw);
	}
	.tkAccessBox .stationPic .stationUnit.large p small {
		font-size: min(1.76rem, 1.36vw);
	}
}

@media print, screen and (min-width: 1050px) {
	.tkAccessBox .trainmap {
		margin: 5em auto 3em;
	}
	.tkAccessBox .accessCol .trainmap {
		width: 100%;
		margin: 0;
	}
}


/* ------------------------------------------------------------------------
	pt-tkPosition
------------------------------------------------------------------------ */
	.pt-tkPosition {
		color: #FFF;
		background: rgba(var(--site-accentColor),.5);
		padding: 80px 0 100px;
	}
	.pt-tkPosition:has(.posHeadPic) {
		padding-top: 0;
	}
	.pt-tkPosition .posHeadPic {
		position: relative;
	}
	.pt-tkPosition .posHeadPic .imgcapkeep {
		z-index: 2;
		bottom: 12%;
		right: 1%;
	}
@media screen and (max-width: 599px) {
	.pt-tkPosition .posHeadPic img {
		aspect-ratio: 960 / 488;
		object-fit: cover;
		object-position: left center;
	}
}
	.pt-tkPosition .positionInner {
		width: 90%;
		max-width: 1260px;
		margin: 0 auto;
	}
	.pt-tkPosition .posBlock + .posBlock {
		margin-top: 100px;
	}
	.pt-tkPosition img {
		display: block;
		width: 100%;
		height: auto;
	}


	/* 見出し（英字＋キャッチ） */
	.pt-tkPosition .posHeader {
		text-align: center;
		margin-bottom: 50px;
	}
	.pt-tkPosition .posEn,
	.pt-lifeinfo .ptTitle .hWord {	/* LIFE INFORMATIONもENVIRONMENTと同じ色・大きさ */
		display: block;
		font-style: normal;
		font-weight: normal;
		line-height: 1.5;
		font-family: var(--site-fontFamily-en01), var(--site-fontFamily);
		font-size: 2rem;
		letter-spacing: 0.25em;
		margin-bottom: 0;
	}
	.pt-tkPosition .posHeader .posCatch {
		margin-top: 0.8em;
	}
	.pt-tkPosition .posHeader.line {
		padding: 12px 0;
		border-top: 1px solid rgba(193, 173, 147, .6);
		border-bottom: 1px solid rgba(193, 173, 147, .6);
	}
	.pt-tkPosition .posTxt .posCatch {
		text-align: left;
		margin-bottom: 1.8em;
	}



	/* 2カラム（SPは縦並び：テキスト→画像） */
	.pt-tkPosition .posCol {
		display: grid;
		gap: 30px;
	}
	.pt-tkPosition .posCol + .posCol {
		margin-top: 60px;
	}
	/* 画像：上1枚＋下2枚 */
	.pt-tkPosition .posPicGrid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.pt-tkPosition .posPicGrid .wide {
		grid-column: span 2;
	}
	/* 画像：縦2枚 */
	.pt-tkPosition .posPicStack {
		display: grid;
		gap: 12px;
	}
	/* 「第一種低層住居専用地域」とは：背景画像＋テキスト */
	/* 用途地域図：SPはスワイプ（js_swipeMe）で拡大表示 */
	.pt-tkPosition .zoningmap .js_swipeMe_active .js_swipeMeInnerBoxOverlay,
	.pt-tkPosition .zoningmap .js_swipeMe_active .js_swipeMeInnerBox img {
		width: 200%;
	}
	.pt-tkPosition .zoneBox {
		background: linear-gradient(to right, rgba(20, 50, 90, .55) 0%, rgba(20, 50, 90, .2) 60%, rgba(20, 50, 90, 0) 100%),
			url("../img/location/low-rise-residential-zone.jpg") center center / cover no-repeat;
		background-image: linear-gradient(to right, rgba(20, 50, 90, .55) 0%, rgba(20, 50, 90, .2) 60%, rgba(20, 50, 90, 0) 100%),
			image-set(url("../img/location/low-rise-residential-zone.webp") type("image/webp"), url("../img/location/low-rise-residential-zone.jpg") type("image/jpeg"));	/* WebP対応ブラウザはWebP */
		padding: 50px 6%;
	}
	.pt-tkPosition .zoneTtl {
		text-align: left;
		margin-bottom: 1.2em;
	}
	.pt-tkPosition .zoneBox .txtBox {
		text-shadow: 0 0 6px rgba(0, 0, 0, .4);
		 max-width: 700px;
	}
@media screen and (max-width: 1049px) {
	.pt-tkPosition .txtBox .tb,
	.pt-tkPosition .posTxt .posCatch br,
	.pt-tkPosition .posTxt .posCatch .tb{
		display: none;
	}
	
	.pt-tkPosition .posNakameguro .posPicGrid {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.pt-tkPosition .posEnvironment .posPicStack {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	/* SP：本文は自然に折り返す（.inblのかたまりで改行されないように） */
	.pt-tkPosition .txtBox .inbl {
		display: inline;
	}
}
@media screen and (max-width: 599px) { /*{belowSP}*/
	/* ENVIRONMENT の画像：SPは1列 */
	.pt-tkPosition .posEnvironment .posPicStack {
		grid-template-columns: 1fr;
	}
}
@media screen and (min-width: 600px) and (max-width: 1049px) { /*{TB}*/
	/* NAKAMEGURO の画像：TBは3枚横並び（SPは上1枚＋下2枚のまま） */
	/* 列の幅を画像の幅（700:345:345）の比にして、比率はそのままで高さをそろえる */
	.pt-tkPosition .posNakameguro .posPicGrid {
		grid-template-columns: minmax(0, 700fr) minmax(0, 345fr) minmax(0, 345fr);
		max-width: none;
	}
	.pt-tkPosition .posNakameguro .posPicGrid .wide {
		grid-column: auto;
	}
}
@media print, screen and (min-width: 1050px) {
	.pt-tkPosition .txtBox {
		/*font-size: min(1.7rem, 1.3vw);*/
	}
	.pt-tkPosition {
		padding: 100px 0 140px;
	}
	.pt-tkPosition .posBlock + .posBlock {
		margin-top: 150px;
	}
	.pt-tkPosition .posHeader {
		margin-bottom: 70px;
	}
	/* テキスト左／画像右 */
	.pt-tkPosition .posCol {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 5%;
	}
	.pt-tkPosition .posCol + .posCol {
		margin-top: 100px;
	}
	/* reverse：画像左／テキスト右 */
	.pt-tkPosition .posCol.reverse .posTxt {
		order: 2;
	}
	.pt-tkPosition .posCol.reverse .posPic {
		order: 1;
	}
	.pt-tkPosition .posCol.reverse {
		align-items: center;
		grid-template-columns: 52.4% minmax(0, 1fr);	/* 用途地域図：最大幅1260px時に原寸660px（660÷1260）、それ以下は比率で縮小 */
	}
	.pt-tkPosition .zoneBox {
		padding: 9% 6%;
	}
}

/* ------------------------------------------------------------------------
	pt-lifeinfo
------------------------------------------------------------------------ */
	.pt-lifeinfo {
		margin-top: 6em !important;
		padding: 80px 0;
	}
	/* 画像付きリストの文字を白に（背景が黒のため） */
	.pt-lifeinfo .lifeinfoPhBox .txtBox {
		color: #FFF;
	}
	.pt-lifeinfo .lifeinfoPhBox .txtBox .dist {
		color: rgba(255, 255, 255, .7);
	}
	/* リストの見出し（dt）を英字見出しと同じ色に */
	.pt-lifeinfo .lifeinfoListBox dt {
		color: #c1ad93;
		border-bottom-color: #c1ad93;
	}
	/* dd左側の縦線も同じ色に */
	.pt-lifeinfo .lifeinfoListBox dd::before {
		border-left-color: #c1ad93;
	}
	/* ptTitle
	---------------------------------------------------- */
	.ptTitle {
		display: block;
		line-height: 1.4;
		font-size: 1.625em;
		text-align: center;
		letter-spacing: 0.02em;
		margin-bottom: 1.5em;
	}
	.ptTitle .ttl {
		display: block;
	}
	.ptTitle .hWord {
		display: block;
		letter-spacing: 0.2em;
		font-family: var(--site-fontFamily);
		font-size: 0.6em;
		margin-bottom: 1.4em;
	}
/* 色調整 */
@media screen and (max-width: 1049px) {
    .lifeinfoListBox .spec .time {
        color: #ebc0ac;
    }
}

/*@media screen and (max-width: 419px) , screen and (min-width: 800px) and (max-width: 1049px) { {MinorBreakpoint} 複数指定 
	.lifeinfoListBox dd {position: relative;}
	.lifeinfoListBox dd::after {content: "";display: block;position: absolute;top: 0;bottom: 0;right: 6.5em;width: 0;height: calc(100% - 1em);margin: auto;border-right: 1px dashed #aaa;}
	.lifeinfoListBox .name {width: calc(100% - 6.5em);padding-right: 0.75em;}
	.lifeinfoListBox .spec {flex-wrap: wrap;justify-content: flex-start;width: 6.5em;text-align: left;padding-left: 0.75em;}
	.lifeinfoListBox .spec .dist,
	.lifeinfoListBox .spec .time {width: 5.5em;margin: 0.03em 0;}
	.lifeinfoListBox .spec .time {color: #8e7139;}
	.lifeinfoListBox .spec .separate {display: none;}
}*/




/* ***************************************************************************************************
	printOnly
*************************************************************************************************** */
@media print { /*{printOnly}*/
	.pt-tkAccess .trainmap img {
		width: 80%;
	}
	.stationUnit {
		color: #000;
		border: 1px solid #000;
	}
}