@charset "utf-8";

/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */


/* parallaxBgFixed_bgObjWrap
------------------------------------------------------------------------ */
	.parallaxBgFixed_bgObjWrap {
	}
	
	.parallaxBgFixed_bgObjWrap .bgObj {
		overflow: hidden;
	}
	.parallaxBgFixed_bgObjWrap .bgObj img {
		transform: scale(1.2);
		transition: transform 5s ease-out;
	}
	.parallaxBgFixed_bgObjWrap .parallaxActive .bgObj img {
		transform: scale(1);
	}
	

/* parallaxBgFixed_observerElement
------------------------------------------------------------------------ */
	.parallaxBgFixed_observerElement > .container {
		padding-top:35vh;
		padding-bottom:35vh;
	}


@media screen and (max-width: 768px) { /*{SP}*/
	.parallaxBgFixed_observerElement > .container {
		padding-top:30vh;
		padding-bottom:30vh;
	}
}









/* ***************************************************************************************************
	PAGE
*************************************************************************************************** */

	.pt-access {
		background: var(--site-themeColor-base02);

	}

/* trainRouteMapWrap
------------------------------------------------------------------------ */
	.trainRouteMap {
		width: 100%;
		max-width: 900px;
		text-align: center;
		/*background: #fff;*/
		margin-left: auto;
		margin-right: auto;
		/*padding: min(40px, 5vw) min(40px, 3.2vw);*/
		padding: 0 min(40px, 3.2vw);
	}
	.trainRouteMap img {
		padding: 7px;
	}
@media screen and (max-width: 520px) { /*{SPs}*/
	.trainRouteMap {
		padding-left:	2vw;
		padding-right:	2vw;
	}
}



/* trainRouteWrap
------------------------------------------------------------------------ */
	.trainRouteWrap {
		--access-trainRouteBox-gap_tb: clamp(40px, 3.968vw, 60px);
		--access-trainRouteBox-gap_lr: 30px; 
		/*--access-trainRouteBox-gap_lr: clamp(25px, 1.58vw, 30px); */
		overflow: hidden;
	}
	
	.trainRouteWrap h4.ptHeading .hTxt, .hTxtStyh4 {
	  margin-bottom: 40px;
	}	
	/* trainRouteBox
	--------------------------------- */
	.trainRouteBox {
		display: flex;
		flex-wrap: wrap;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.6;
		font-size: clamp(1.3rem, 1.269vw, 1.6rem);	/* 1260px以下からサイズ変更 */
		letter-spacing: .11em;
		color: #ddd;
		margin-top:		calc(var(--access-trainRouteBox-gap_tb) * -1);
		margin-left:	calc(var(--access-trainRouteBox-gap_lr) * -1);
		margin-right:	calc(var(--access-trainRouteBox-gap_lr) * -1);
	}
	
	
	
	.trainRouteBox p {
		width: calc(33.333% - (var(--access-trainRouteBox-gap_lr) * 2));
		margin-top:		var(--access-trainRouteBox-gap_tb);
		margin-left:	var(--access-trainRouteBox-gap_lr);
		margin-right:	var(--access-trainRouteBox-gap_lr);
	}
	.trainRouteBox p > * {
		display: block;
	}
	.trainRouteBox p .routePic {
		position: relative;
		text-align: center;
	}
	.trainRouteBox p .routePic img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	.trainRouteBox p .routeMain,
	.trainRouteBox p .routeDetails {
		padding: .6em 0;
	}
	.trainRouteBox p .routeMain {
		position: relative;
		/*color: rgba(var(--site-themeColor-accent_1), 1);*/
		letter-spacing: .11em;
		letter-spacing: .15em;
		letter-spacing: clamp(.08em, .12vw, .15em);
		margin-top: .1em;
	}
	.trainRouteBox p .routeMain::after { /* border */
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: #ddd;
	}
	.trainRouteBox p .routeDetails {
		width: 100%;
		/*color: #333;*/
		font-size: .875em;
		font-weight: 300; /* 細めに設定 */
	}
	.trainRouteBox p .nameKakko {
		font-size: 1.4375em;
	}
	.trainRouteBox p .direct {
		font-size: 1.3125em;
	}
	.trainRouteBox p em.num {
		display: inline-block;
		line-height: 1;
		font-size: 2.0625em;
		letter-spacing: .04em;
		margin: 0 .03em 0 .05em;
	}
	.trainRouteBox p .onCom {
	}
	.trainRouteBox p .onComDetail {
		display: inline-block;
	}
	/* long */
	.trainRouteBox p p.routeDetails.long {
		text-align: justify;
	}
	.trainRouteBox p p.routeDetails.long .onComDetail,
	.trainRouteBox p p.routeDetails.long .inbl {
		display: inline;
	}
	/* cap */
	/*.trainRouteBox_cap {
		display: block;
		text-align: right;
		margin: 4em 0 0;
	}*/
	.trainRouteBox .imgcapkeep {
		font-size: 1rem;
	}
	.trainRouteBox[data-caption="topRight"] .imgcapkeep {	top: 0; bottom: auto; left: auto; right: 0; padding: 5px 7px;}
	.trainRouteBox[data-caption="bottomRight"] .imgcapkeep {top: auto; bottom: 0; left: auto; right: 0; padding: 5px 7px;}
	
	
	
@media screen and (max-width: 1340px) { /*{TBl}*/
	.trainRouteWrap {
		--access-trainRouteBox-gap_lr: clamp(20px, 1.58vw, 30px); 
	}
}
	
	
/* 2カラム */
@media screen and (max-width: 980px) { /*{TBs}*/
	.trainRouteBox p {
		width: calc(50% - (var(--access-trainRouteBox-gap_lr) * 2));
	}
}
/* 1カラム */
@media screen and (max-width: 620px) { /*{MinorBreakpoint}*/
	.trainRouteBox {
		justify-content: center;
		font-size: 1.3rem;
		margin-left: 0;
		margin-right: 0;
	}
	.trainRouteBox p {
		width: 100%;
		/*max-width: 480px;*/
		/*background: rgba(255, 255, 255, 1);*/
		margin-left: 0;
		margin-right: 0;
		/*padding: 4.167vw;
		border: 1px solid #ddd;*/
	}
	.trainRouteBox p .routeDetails {
		font-size: .92em;
	}
}



/* hotelSection
------------------------------------------------------------------------ */
	.hotelSection {
		max-width: 1000px;
	}
	.hotelSection ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top:var(--sentens-marpad-S);
	}
	.hotelSection ul li {
		width: 46%;
	}
	.hotelSection ul li .txt {
		line-height: 2.6;
	}
	.hotelSection ul li.picBox {
		/*padding-top:var(--sentens-marpad-XXL);*/
	}
	
@media screen and (max-width: 980px) { /*{TBs}*/
	.hotelSection ul {
		flex-direction: column-reverse;
		max-width:700px;
		/*padding-top:0;*/
		margin-left:auto;
		margin-right:auto;
	}
	.hotelSection ul li.txtBox {
		width: 80%;
		margin-left:auto;
		margin-right:0;
		padding-top:var(--sentens-marpad-M);
	}
	.hotelSection ul li.picBox {
		width: 80%;
		padding-top:0;
	}
}

/* meguroSection
------------------------------------------------------------------------ */	
	.meguroSection {
		max-width: 1000px;
	}
	.meguroSection .txt {
		line-height: 2.6;
	}
	.meguroWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.meguroWrap li {
		width: 47%;
	}
	
	.meguroWrap li.picBox ul {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
	}
	.meguroWrap li.picBox li:nth-of-type(1) {
		position: relative;
		z-index: 2;
		width: 63%;
	}
	.meguroWrap li.picBox li:nth-of-type(2) {
		position: relative;
		z-index: 1;
		width: 50%;
		margin-top:-20%;
		margin-left:auto;
		margin-right:0;
	}
	
@media screen and (max-width: 768px) { /*{SP}*/
	.meguroSection {
		max-width:500px;
	}
	.meguroWrap {
		flex-direction: column-reverse;
	}
	.meguroWrap li {
		width: 100%;
	}
	.meguroWrap li.txtBox {
		padding-top:var(--sentens-marpad-S);
	}
}
	


/* shopSection
------------------------------------------------------------------------ */	
	.shopSection {
		max-width: 1000px;
	}
	.shopSection .txt {
		line-height: 2.6;
	}
	
/*shopWrap*/
	.shopSection .shopWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.shopSection .shopWrap li {
		width: 28.57%;
	}
	.shopSection ul.gonWrap li.picBox {
		padding-top:var(--sentens-marpad-XXL);
	}
	
@media screen and (max-width: 768px) { /*{SP}*/
	.shopSection {
		max-width: 500px;
	}
	.shopSection .shopWrap li {
		width: 45%;
	}
	.shopSection .shopWrap li:nth-of-type(2) p {
		padding-top:50%;
	}
	.shopSection .shopWrap li:nth-of-type(3) {
		margin-top:-20%;
	}
}




	
/*共通*/
@media screen and (max-width: 768px) { /*{SP}*/
	.meguroSection h4.ptHeading .hTxt,
	.hotelSection h4.ptHeading .hTxt,
	.shopSection h4.ptHeading .hTxt {
		margin-bottom:10px;	
	}
}
	
	
	
	





/* lifeInfoSection
---------------------------------------------------------------------------
<div ～～ .generalColBox [maxCol2 toCol1_SP] ～～>
<dl><dt><span>カテゴリー名</span></dt><dd><em>施設名</em><span>約0000m</span></dd></dl>
<dl class="cat-medical is_widthMax"><dt><span>医療施設(カテゴリー名)</span></dt><dd><em><span class="name">施設名</span><small class="department">［xxxxx科］</small></em><span>約0000m</span></dd></dl>
</div>
------------------------------------------------------------------------ */
	.lifeInfoSection {
		max-width: 1000px;
	}
	.lifeInfoSection .ptHeading {
		margin-bottom: 60px;
		padding: 7px 0;
		border-top: 1px solid #bbb;
		border-bottom: 1px solid #bbb;
	}
	.lifeInfoSection .ptHeading .hTxt_en {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 16;
		margin-bottom: 0;
	}
	
	.lifeInfoSection .generalColBox {
		--common-generalColBox-margin-t:	50px;
		--common-generalColBox-margin-lr:	40px;
	}
	
	.lifeInfoSection dl {
		/*color: #444;*/
		letter-spacing: .11em;
	}
	.lifeInfoSection dt {
		line-height: 1;
		color: #fff;
		/*font-family: var(--site-font_family-serif);*/
		font-size: 2rem;
		/*text-align: center;*/
		letter-spacing: .14em;
		background: linear-gradient(to bottom, #999 50%, #555 50%) left center / 4px calc(100% - (13px * 2)) no-repeat;
		margin-bottom: 10px;
		padding: 16px 0 16px 1em;
		/*border-bottom: 1px solid rgba(var(--site-themeColor-accent_1), .7);*/
	}
	.lifeInfoSection dd {
		display: flex;
		justify-content: space-between;
		/*font-family: var(--site-font_family-sans);*/
		font-size: 1em;
		background: linear-gradient(to right, #b7b7b7 1px, transparent 1px, transparent 2px) left bottom / 2px 1px repeat-x;
		padding: .7em 0;
	}
	.lifeInfoSection dd > em {
		display: block;
		width: calc(100% - 12.5em - 1em);
		text-align: left;
											/*	background: rgba(255,0,0,0.1);*/
	}
	.lifeInfoSection dd > span {
		display: block;
		width: 12.5em;
		text-align: right;
											/*	background: rgba(0,255,0,0.1);*/
	}
	.lifeInfoSection dd > span .dist,
	.lifeInfoSection dd > span .separate,
	.lifeInfoSection dd > span .time {
		display: inline-block;
	}
	/* -- 特殊設定 -- */
	.lifeInfoSection dl.is_widthMax {
		width: 100%;
	}
	.lifeInfoSection .cat-medical dd > em {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.lifeInfoSection .cat-medical dd > em .name {
		flex: 0 0 17em; /* feeling. */
		display: block;
		padding-right: 2.5em;
	}
	.lifeInfoSection .cat-medical dd > em .department {
		display: block;
		line-height: 1.45;
		/*color: #dabf88;*/
		font-size:0.9em;
		font-family: var(--site-font_family-serif);
		padding-right: 1em; /* feeling. */
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	.lifeInfoSection .generalColBox {
		--common-generalColBox-margin-lr:	25px;
	}
	.lifeInfoSection dd {
		font-size: .9275em;
	}
}
@media screen and (max-width: 980px) { /*{TBs}*/
	.lifeInfoSection .ptHeading {
		margin-bottom: 40px;
	}
}
@media screen and (max-width: 768px) { /*{SP}*/
	.lifeInfoSection dl {
		letter-spacing: .09em;
	}
	/* -- 特殊設定 -- */
	.lifeInfoSection .cat-medical dd > em {
		flex-wrap: wrap;
	}
	.lifeInfoSection .cat-medical dd > em .name {
		flex: 0 0 100%;
		padding-right: 0;
	}
	.lifeInfoSection .cat-medical dd > em .department {
		/*color: #7d9f4a;*/
		padding: .15em 0;
		/*opacity: .85;*/
	}
}
@media screen and (max-width: 620px) { /*{MinorBreakpoint}*/
	.lifeInfoSection dt {
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 620px) , screen and (min-width: 980.02px) and (max-width: 1340px) { /*{MinorBreakpoint}*/
	/* 微調整 */
	.lifeInfoSection dd > em {				width: calc(100% - 7em - 1em);}
	.lifeInfoSection dd > span {			width: 7em; border-left: 1px solid rgba(255, 255, 255, .2);}
	.lifeInfoSection dd > span .dist {		display: block;}
	.lifeInfoSection dd > span .time {		display: block; opacity: .8;}
	.lifeInfoSection dd > span .separate {	display: none;}
}