@charset "utf-8";

/* ***************************************************************************************************
	BASE
*************************************************************************************************** */
.tk_headerWrap {
	background: rgba(255, 255, 255, .5);
}
	
@media screen and (max-width: 736px) {
	.mainVisualTxt {
		text-align: left !important;
	}
}

.pageHeaderBox .imgcapkeep[data-caption="leftSide"] {
	right: auto;
	left: 0;
}



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

	.pt-tkAccess .trainmap {
		max-width: 1100px;
		margin: 3em auto;
	}
	.pt-tkAccess .stationPic {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 5px;
	}
	.pt-tkAccess .stationPic .stationUnit {
	}
	.pt-tkAccess .stationPic .stationUnit p {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #FFF;
		background: #000;
		aspect-ratio: 1 / 1;
	}
	.pt-tkAccess .stationPic .stationUnit p::before {
		opacity: .25;
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("../img/location/station_01.jpg") center center / cover no-repeat;
	}
	.pt-tkAccess .stationPic .stationUnit.shinjuku p::before {		background-image: url("../img/location/station_01.jpg");	}
	.pt-tkAccess .stationPic .stationUnit.otemachi p::before {		background-image: url("../img/location/station_02.jpg");	}
	.pt-tkAccess .stationPic .stationUnit.shinagawa p::before {		background-image: url("../img/location/station_03.jpg");	}
	.pt-tkAccess .stationPic .stationUnit.shibuya p::before {		background-image: url("../img/location/station_04.jpg");	}

	.pt-tkAccess .stationPic p > * {
		position: relative;
		z-index: 2;
		display: block;
		font-size: 3.6vw;
	}
	.pt-tkAccess .stationPic p strong {
		font-size: 1.6em;
	}
	.pt-tkAccess .stationPic p em {
		font-size: 1.8em;
		letter-spacing: 0.05em;
	}
	.pt-tkAccess .stationPic p .sta {
		display: block;
		min-width: 60%;
		text-align: center;
		margin: 0 auto;
		border-bottom: 1px solid rgba(255, 255, 255, .3);
	}
	.pt-tkAccess .stationPic p small {
		font-size: 0.8em;
	}


	.pt-tkAccess .stationUnit > small {
		display: block;
	}
@media print, screen and (min-width: 1050px) {
	.pt-tkAccess .trainmap {
		margin: 5em auto 3em;
	}
	.pt-tkAccess .stationPic {
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 30px;
	}
	.pt-tkAccess .stationPic p > * {
		font-size: 1.2em;
	}
}


/* ------------------------------------------------------------------------
	pt-tkPosition
------------------------------------------------------------------------ */
	.pt-tkPosition {
		background: rgba(var(--site-themeColor), .1);
		padding-top: 80px;
	}
	.areaMapCol .txtUnit {
		margin-bottom: 50px;
	}
@media print, screen and (min-width: 1050px) {
	.areaMapCol {
		display: grid;
		align-items: center;
		grid-template-columns: 38% 1fr;
		column-gap: 60px;
	}
	.areaMapCol .txtUnit {
		/*order: 3;*/
		margin-bottom: 0;
	}
}


	.areaNav {
		width: 100%;
		max-width: none;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1px;
		margin: 120px auto 1px;
	}
	.areaNav li {
		position: relative;
		color: #FFF;
		background: rgba(var(--site-accentColor), 1);
		overflow: hidden;
	}
	.areaNav li::before {
		opacity: .25;
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("../img/location/station_01.jpg") center center / cover no-repeat;
		
		transition: 0.3s scale ease, 0.3s opacity ease;
	}
	.areaNav li.link-daizawa::before {		background-image: url("../img/location/nav_p_03.jpg");	}
	.areaNav li.link-shimokita::before {	background-image: url("../img/location/nav_p_01.jpg");	}
	.areaNav li.link-komaba::before {		background-image: url("../img/location/nav_p_02.jpg");	}

	.areaNav li .label {
		display: block;
		position: relative;
		z-index: 3;
		height: 100%;
		padding: 1.4em 2em 1.2em;
	}
	.areaNav li .label strong {
		display: block;
		font-size: 1.4em;
		margin-top: 0.2em;
	}

	.areaNav li .label::before {
		content: "";
		position: absolute;
		bottom: 0;
		right: 30px;
		display: block;
		width: 1px;
		height: 30%;
		transform: translateX(50%);
		background: #FFF;
	}
	.areaNav li .label::after {
		content: "";
		position: absolute;
		bottom: 30%;
		right: 30px;
		display: block;
		width: 5px;
		height: 20%;
		background: #FFF;
		transform: translate(50%, 0);
		opacity: 1;
		
		animation: 1.8s areaNav 0.3s normal;
		animation-iteration-count: infinite;
	}



	.areaNav li:hover::before {
		scale: 1.1;
		opacity: .15;
	}
	.areaNav li:hover .label::after {
		transform: translate(50%, 50%);
		animation-iteration-count: 1;
	}

@keyframes areaNav {
	0% {transform: translate(50%, 0);		opacity: 1;}
	68% {transform: translate(50%, 50%);	opacity: 1;}
	100% {transform: translate(50%, 50%);	opacity: 1;}
}

@media screen and (max-width: 736px) {
	.areaNav {
		text-align: center;
	}
	.areaNav li .label {
		font-size: 3vw;
		padding-left: 0.4em;
		padding-right: 0.4em;
	}
	.areaNav li .label::before,
	.areaNav li .label::after {
		display: none;
	}
	.areaNav li a {
	}
	.areaNav li a::after {
		position: absolute;
		bottom: 3px;
		left: 50%;
		transform: translateX(-50%);
		content: "";
		display: block;
		border: transparent solid;
		border-width: 8px 15px 0;
		border-top-color: #FFF;
	}
	.areaNav li a .label {
		padding-bottom: 2em;
	}
}
@media print, screen and (min-width: 1050px) {
	.areaNav {
		width: 90%;
		max-width: 1260px;
		gap: 30px;
		margin: 80px auto 60px;
	}
}


/* ------------------------------------------------------------------------
	residentialCol
------------------------------------------------------------------------ */
	.residentialCol {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin-top: 0 !important;
	}
	.residentialCol .txtUnit {
		display: flex;
		flex-direction: column;
		justify-content: center;
		grid-column: 1 / span 2;
		background: top center no-repeat;
		background-size: cover;
		padding: 80px 30px 30px;
	}
	.residentialCol .txtUnit * {
		text-align: center !important;
	}
	.residentialCol#area-daizawa .txtUnit {		background-image: url("../img/location/bg_area_daizawa.jpg");		color: #FFF;	}
	.residentialCol#area-shimokita .txtUnit {		background-image: url("../img/location/bg_area_shimokita.jpg"); background-position: bottom center;}
	.residentialCol#area-komaba .txtUnit {		background-image: url("../img/location/bg_area_komaba.jpg");	}

	.residentialCol#area-daizawa {		background: #000;}
	.residentialCol#area-shimokita {	background: #FFF;}
	.residentialCol#area-komaba {		background: #FFF;}

	.residentialCol .txtUnit i {
		display: block;
		color: rgba(var(--site-subColor),1);
		letter-spacing: 0.25em;
		text-align: center;
		font-size: 0.9;
		margin-bottom: 2em;
	}
	.residentialCol h4.ptHeading .heading {
		font-size: 5.6vw;
	}
	.residentialCol .txtUnit .txtBox {
		font-size: 1em;
		line-height: 2.2;
		margin-top: 1em;
	}
	.residentialCol .picBox {
		transform: scale(0.9);
		transform-origin: top center;
	}

@media screen and (max-width: 736px) {
	.residentialCol .txtUnit .txtBox {
		width: 100%;
		letter-spacing: 0em;
		font-size: 0.9em;
	}
}
@media print, screen and (min-width: 840px) {
	.residentialCol {
		grid-template-columns: 70% 1fr;
		grid-template-rows: 1fr 1fr;
		margin-top: 0 !important;
	}
	.residentialCol .txtUnit {
		grid-column: 1 / span 1;
		grid-row: 1 / span 2;
		padding-bottom: 80px;
	}
	.residentialCol#area-shimokita {
		grid-template-columns: 1fr 70%;
	}
	.residentialCol#area-shimokita .txtUnit {
		grid-column: 2 / span 1;
		order: 3;
	}
	/*.residentialCol .picBox[data-colside="left"] {
		grid-row: 1 / 2;
		grid-column: 2 / span 1;
	}
	.residentialCol .picBox[data-colside="right"] {
		grid-row: 2 / 3;
		grid-column: 3 / span 1;
	}*/

	.residentialCol .picBox {
		transform: scale(1);
	}
	.residentialCol .picBox p {		width: 100%;		height: 100%;	}
	.residentialCol .picBox img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.residentialCol#area-shimokita .picBox[data-colside="right"] img {
		object-position: right center;
	}

	.residentialCol h4.ptHeading .heading {
		font-size: min(3.7vw, 2.0em);
	}
}
@media print, screen and (min-width: 1260px) {
	.residentialCol {
		grid-template-columns: 1fr 35% 1fr !important;
		grid-template-rows: 1fr !important;
	}
	.residentialCol .txtUnit {
		grid-column: 2 / span 1 !important;
		grid-row: 1 / span 1 !important;
	}
	.residentialCol .picBox[data-colside="left"] {
		grid-row: 1 / 2 !important;
		grid-column: 1 / 2 !important;
	}
	.residentialCol h4.ptHeading .heading {
		font-size: min(2.2vw, 2.0em);
	}
}



/* ------------------------------------------------------------------------
	pt-approach
------------------------------------------------------------------------ */
	.pt-approach {
		/*background: rgba(var(--site-themeColor),.1);*/
		/*padding: 3em 0 5em;*/
		margin-top: 5em !important;
	}
	.approachmap {
		position: relative;
		margin-top: 1.2em;
	}
	.approachmap .js_swipeMe_active .js_swipeMeInnerBox img {
		width: 250%;
	}
	.pt-approach .txtBox {
		text-align: left;
	}
@media print, screen and (min-width: 1049.02px) {
	.pt-approach {
		text-align: center;
		margin-top: 8em;
	}
	.approachmap {
		position: relative;
	}
	.pt-approach .txtBox {
		text-align: left;
	}
	.approachCol {
		text-align: center;
		/*display: grid;
		align-items: center;
		grid-template-columns: min(50%, 600px) 1fr;
		column-gap: 60px;
		margin: 0 auto;*/
	}
	.approachCol .txtUnit {
		order: 3;
	}
	.pt-approach .txtBox {
		text-align: center;
	}
}


/* ------------------------------------------------------------------------
	pt-lifeinfo
------------------------------------------------------------------------ */
	.pt-lifeinfo {
			background: rgba(var(--site-themeColor), .1);
			margin-top: 6em !important;
			padding: 80px 0;
	}
	/* 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;
		color: rgba(var(--site-themeColor),1);
		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: #c36639;
    }
}

/*@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;
	}
	.pt-rare {
		color: #000;
		border: solid #000;
		border-width: 1px 0;
	}
}