@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */


/* 矢印付き 共通 ---------------------- */
	[class*="swiperPh_arrowWrap"] .txt {
		margin-top: .8em;
		display: block;
		line-height: 1.6;
	}
@media print, screen and (min-width: 1050.02px) { 
	[class*="swiperPh_arrowWrap"] .swiperPhBox {
		display: flex;
		flex-wrap: wrap;
	}
	[class*="swiperPh_arrowWrap"] .swiperPhBox li {
		width: calc(33.33% - 5px);
		margin-right:2px;
		margin-bottom: 40px;
	}
}


/* 矢印カスタマイズ 共通 ---------------------- */
[class*="swiperPh_arrowWrap"]{
		position: relative!important;
	}
[class*="swiperPh_arrowWrap"] .swiper-button-prev,
[class*="swiperPh_arrowWrap"] .swiper-button-next {
		width: 30px;
		  height: 47px;
		/*border-radius: 50%;
		background: #666;*/
		z-index:1;
		transition: all 0.2s ease;
	}
[class*="swiperPh_arrowWrap"] .swiper-button-prev {left: -25px;}
[class*="swiperPh_arrowWrap"] .swiper-button-next {right:-25px;}
[class*="swiperPh_arrowWrap"] .swiper-button-prev::after,
[class*="swiperPh_arrowWrap"] .swiper-button-next::after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		text-align: center;		
		width: 15px;
		background: url("../images/share/ico_gold_arrow.svg") 50% 50% no-repeat;
		background-size: 100% auto;
	}
[class*="swiperPh_arrowWrap"] .swiper-button-prev::after {right:8%;  }
[class*="swiperPh_arrowWrap"] .swiper-button-next::after {left:8%;transform: rotate(-180deg);}[class*="swiperPh_arrowWrap"] .swiper-slide img {
	  height: auto;
	  width: 100%;
	}
	/*hover*/
[class*="swiperPh_arrowWrap"] .swiper-button-prev:hover,
[class*="swiperPh_arrowWrap"] .swiper-button-next:hover {
		opacity: 0.8;
	}
@media screen and (min-width: 1050.02px) {
	[class*="swiperPh_arrowWrap"] .swiper{
		overflow: visible;
	}

	/*swiper*/
	[class*="swiperPh_arrowWrap"]  [class*="swiper-button"] {
		display: none;
	}
}

@media screen and (max-width: 480px) { /*{SPs}*/

}



/* =======================================================================================
	PAGE
======================================================================================= */

/*------------------------------------------------------------------------------ 
introWrap
------------------------------------------------------------------------------ */
	.introWrap {
		padding: var(--site-marpad-XXL) 0 var(--site-marpad-S);
	}
	.introWrap .txtBox{
		background: #0c0a20;
		padding: 2.5em 2.5em;
	}
@media screen and (min-width: 736.02px) {
	.introWrap {
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.introWrap .picBox{
		position: relative;
		z-index: 0;
		width: 95%;
	}
	.introWrap .txtBox {
		width: 50%;
		position: absolute;
		z-index: 10;
		bottom: 5%;
		right: 0;
		/*z-index: 0;*/
	}
}
@media screen and (max-width: 1200px) {
	.introWrap {
		padding-bottom:  var(--site-marpad-M);
	}
	.introWrap .txtBox{
		bottom: -7%;
		width: 67%;
	}
	
}
@media screen and (max-width: 736px) {
	.introWrap {
		display: flex;
		flex-direction: column;
		width: 88%;
	}
	.introWrap > * {
		width: 100%!important;
	}
	.introWrap .txtBox{
		order: -1;
		background: none;
		padding: 0;
		margin-bottom: 2em;
	}
}








/*------------------------------------------------------------------------------ 
pt-setagayaLife_01
------------------------------------------------------------------------------ */
 	#pt-01 .pageThemeHeaderContainer {
		flex-wrap: wrap;
  }
	#pt-01 .pageThemeHeaderPic img {
		object-fit: contain;
		height: auto;
	}
	#pt-01 .graphBox{
		display: flex;
		justify-content: space-between;
	}
	#pt-01 .graphBox p:nth-child(1){
		width: 67%;
	}
	#pt-01 .graphBox p:nth-child(2){
		width: 30%;
	}
	#pt-01 .graphBox .ttl{
		text-align: center;
		font-size: clamp(13px, 1.2vw, 18px);
		display: block;
		margin-bottom: 1.5em;
		line-height: 1.4;
	}

@media screen and (min-width: 1050.02px) {
	#pt-01 .pageThemeHeader{
		width: 38%;
	}
	#pt-01 .graphBox{
		width: 56%;
	}

}
@media screen and (max-width: 1050px) {
	#pt-01 .graphBox .ttl{
		font-size: clamp(13px, 1.2vw, 16px);
	}
}
@media screen and (max-width: 736px) {
	#pt-01 .graphBox {
		display: block;
		order: 1;
	}
	#pt-01 .graphBox p{
		width: 100%!important;
	}
		#pt-01 .graphBox p:nth-child(2) {
		margin: 3em auto 0;
	}
	#pt-01 .graphBox p:nth-child(2) img{
		width: 70%;
		margin-left:  auto ;
		margin-right: auto;
		display: block;
	}
	#pt-01 .graphBox .ttl{
		border: 1px solid rgba(255,255,255,0.45);
		padding: 0.5em;
	}
}




/* rankingWrap
-------------------------------------------------------------*/
	#pt-01 .rankingWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	#pt-01 .rankingWrap .rankingBox {
		width: calc(25% - 2px);
		position: relative;
		background: #000;
	}
	#pt-01 .rankingWrap .rankingBox small{
		z-index: 2;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 95%;
		color:#eee;
		z-index: 2;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .ttl {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .ttl .rank {
		--M-fluidFontSize-max-fontsize: 24;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		display: block;
		line-height: 1.6;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .ttl .rank em {
		font-size:2em;
		font-family: var(--site-font_family-en_2);
	}
	
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion {
		display: inline-block;
		margin-top:1.5em;
		border-radius: 10em;
		background: #a09053;
		max-width: 180px;
		width: 100%;
		position: relative;
		z-index: 0;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion::before {
		content: "";
		display: block;
		position: absolute;
		border-radius: 10em;
		top: 0;
		right: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: var(--site-variationColor-gradient_gold);
		opacity: 1;
		transition: opacity .18s ease-out;	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion .icon {
	  display: inline-block;
	  width: 30px;
	  margin-left:10px;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion .txt {
	 	margin-left:0.3em;
		margin-right:10px;
		letter-spacing: -0.05em;
	}

	#pt-01 .rankingWrap .rankingBox .picUnit::after {
		position: absolute;
		display: block;
		content:"";
		top:0;
		left:0;
		width: 100%;
		height:100%;
		background: #000;
		opacity: .7;
		z-index: 1;
		transition: opacity 0.3s ease-in-out 0s;
	}
	@media (hover: hover) and (pointer: fine) {
		#pt-01 .rankingWrap .rankingBox:hover .picUnit::after {
		opacity: .4;
	}
		#pt-01 .rankingWrap .rankingBox:hover .expansion::before  {
			opacity: .33;
		}
	}
	#pt-01 .rankingWrap .rankingBox:focus-visible .picUnit::after {
		opacity: .4;
	}
		#pt-01 .rankingWrap .rankingBox:focus-visible .expansion::before  {
			opacity: .33;
		}

	
@media screen and (max-width: 1100px) { 	
	#pt-01 .rankingWrap {
		max-width:700px;
		margin-left: auto;
		margin-right: auto;
	}
	#pt-01 .rankingWrap .rankingBox {
		width: calc(50% - 1px);
		margin-bottom:2px;
		position: relative;
		background: #000;
	}
}	
	
@media screen and (max-width: 736px) { 
	#pt-01 .rankingWrap .rankingBox .txtUnit .ttl {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .ttl .rank {
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion {
		position: absolute;
		top: 50%;
		right: 3px;
		transform: translateY(-50%);
		display: block;
		width: auto;
		margin-top: 0;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion .txt {
		margin: 0;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion .txt span {
		display: none;
	}
	#pt-01 .rankingWrap .rankingBox .txtUnit .expansion .icon {
		margin-left: 0;
	}
	/*#pt-01 .rankingWrap .rankingBox {
		width: 100%;
	}*/
}	




/* modalWrap モーダルレイアウト
-------------------------------------------------------------*/
	.modalWrap {
		width: 88%;
		margin:0 auto;
		padding:clamp(30px, (30 / 1200 * 100vw), 40px) 0;
	}
	.modalWrap .txtBox {
		font-family: var(--site-font_family-serif);
	}
	.modalWrap .txtBox .ttl {
		text-align: center;
		--M-fluidFontSize-max-fontsize: 28;
		--M-fluidFontSize-min-fontsize: 24;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1.8;
		color: rgba(var(--site-variationColor-gold_1), 1); 
	}
	.modalWrap .txtBox .ttl .rank em {
		font-size:1.6em;
		font-family: var(--site-font_family-en_2);
	}
	.modalWrap .txtBox .txt {
		margin-left:auto;
		margin-right:auto;
		max-width:800px;
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1.8;
	}
	.modalWrap .txtBox .txt > span {
		display: block;
		margin-inline: auto;
		max-inline-size: max-content;
	}
	.modalWrap .picBox {
		text-align: center;
		margin-top:30px;
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.modalWrap {
		width: 96%;
	}
}

/*個別*/
	.rank01.modalWrap .picBox {
		max-width:600px;
		margin-left:auto;
		margin-right:auto;
	}







/*------------------------------------------------------------------------------ 
pt-park_01
------------------------------------------------------------------------------ */
	hr.hrLine {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1px;
		background: #9c977f;
		border: none;
		margin: 0 auto;
		/*margin-block: 0;
		margin-inline: 0;*/
		padding: 0;
		max-width: 1260px;
	}

/*公園マップ共通--------------------*/
[class*="parkMap_0"] .mapPCTB .map{
	padding: 0;
	background :rgba(255,255,255,0.4);
	margin: 0 auto;
	display: block;
}
[class*="parkMap_0"] img{
	width: 80%;
	margin: 0 auto;
	display: block;
}

@media screen and (min-width: 736.02px) {
	[class*="parkMap_0"] .btnSP{
		display: none;
	}
}
@media screen and (max-width: 736px) {
	[class*="parkMap_0"] .mapPCTB{
		display: none;
	}
	[class*="parkMap_0"] .btnSP a{
		position: relative;
	}
	[class*="parkMap_0"] .btnSP a .label{
		font-size: 1.5rem;
	}
	[class*="parkMap_0"] .btnSP a .label::before {
		position: absolute;
		top: 50%;
		bottom: 0;
		left: -40px;
		right: 0;
		width: 3em;
		height: 3em;
		background: url("../images/share/ico_zoom.svg") center center / contain no-repeat;
		content: "";
		display: inline-block;
		transform: translateY(-50%);
	  }
	
	/*VenoBox設定*/
		.vbox-content {overflow: scroll!important;}
		.vbox-container img.zoom {max-width:200%;background: #fff;padding:5px;}
}


/* parkPhWrap 共通 ---------------------- */
	.parkPhBox {
		margin: 3em auto 5em;
	}
@media print, screen and (min-width: 736.02px) { 
	.parkPhBox {
		display: flex;
		flex-wrap: wrap;
	}
	.parkPhBox li {
		width: calc(33.33% - 2px);
		margin-right:2px;
	}
}

@media screen and (max-width: 736px) {
	.parkPhWrap01,
	.parkPhWrap02{
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		width: 100%;
	}
	.parkPhWrap01 .swiper-wrapper,
	.parkPhWrap02 .swiper-wrapper{
		transition-timing-function: linear;
	}
	 [class*="parkPhWrap0"]  .swiper-slide img {
		height: auto;
		width: 100%;
	}
}




/*
otherParkWrap
-----------------------------------------*/
	.otherParkWrap .pageThemeHeader {
		width: 100%;
	}
	.otherParkWrap .pageThemeHeaderContainer {
		margin-bottom: 0;
	}

@media screen and (max-width: 1050px) {

}




/*------------------------------------------------------------------------------ 
pt-ultramanShotengai_01
------------------------------------------------------------------------------ */


/* areaMapWrap
-------------------------------------------------------------*/
	.shoppingSection .areaMapWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.shoppingSection .areaMapWrap > * {
		width: 47.61%;
	}
@media screen and (max-width: 736px) { /*{SP}*/
	/*.shoppingSection{
		width: 100%;
	}*/
	.shoppingSection .areaMapWrap {
		flex-direction: column-reverse;
	}
	.shoppingSection .areaMapWrap > * {
		width: 100%;
	}
}

	/*picBox--------------------------*/
	.shoppingSection .areaMapWrap .picBox [class*="unit_"] li{
		position: relative;
	}
@media screen and (min-width: 736.02px) {
	.shoppingSection .areaMapWrap .picBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.shoppingSection .areaMapWrap .picBox > *{
		width: 48.33%;
	}

	.shoppingSection .areaMapWrap .picBox [class*="unit_"] ul{
		flex-direction: column;
		  height: auto;
	}
	.shoppingSection .areaMapWrap .picBox [class*="unit_"] li{
		margin-bottom:clamp(18px, (18 / 1200 * 100vw), 20px);
	}
}
@media screen and (max-width: 736px) { /*{SP}*/
	.shoppingSection .areaMapWrap .picBox{
		margin-top:30px;
	}
	.shoppingSection .areaMapWrap .picBox [class*="unit_"]{
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		
	}
	.shoppingSection .areaMapWrap .picBox [class*="unit_"]{
		margin-bottom: 1em;
	}
	.shoppingSection .areaMapWrap .picBox [class*="unit_"]  .swiper-slide img {
		height: auto;
		width: 100%;
	}
}


/*swiper-----------*/
	.shoppingSection .areaMapWrap .swiper-wrapper{
		transition-timing-function: linear;
	}














	/*mapBox--------------------------*/
	.shoppingSection .areaMapWrap .mapBox .mapBoxInner{
		background: #fff;
		display: block;
		text-align: center;
		padding: 0 1em;
	}
	.shoppingSection .areaMapWrap .mapBox .mapBox-btn{
		display: none;
	}

@media screen and (max-width: 480px) { /*{SPs}*/
	.shoppingSection .areaMapWrap .mapBox .mapBoxInner {
		display: block;
		padding:0 15px;
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
}



/* ---------------------------------------------------
マップアコーディオン設定
---------------------------------------------------*/

.accordion-btn {display: none;}
@media screen and (max-width: 736px) { /*{SP}*/
	.accordion {
		position: relative;
		margin-bottom: 5em;
	}
	
	.accordion-map {
	  overflow: hidden; /* 画像を隠す */
	  position: relative;
	}
	/* 最初に見えてる画像エリアの高さ */
	.accordion-map.is-hide {
	  height: 400px;
	}
	.accordion-map::before {
		background: -webkit-linear-gradient(top, rgba(14,21,48,0) 0%, rgba(14,21,48,.9) 50%, rgba(14,21,48,.9) 50%, rgba(14,21,48,1.00) 100%);
		background:         linear-gradient(top, rgba(14,21,48,0) 0%, rgba(14,21,48,.9) 50%, rgba(14,21,48,.9) 50%, rgba(14,21,48,1.00) 100%);
		bottom: 0;
		content: "";
		height: 150px; /* グラデーションで隠す高さ */
		position: absolute;
		width: 100%;
		left: 0
	}

	.accordion-btn {
		bottom: 25px;
		cursor: pointer;
		display: block;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		transition: all .2s;
		max-width:  300px;
		width: 100%;
		z-index: 1;
	}
	.accordion-btn.is-show {
	  bottom: -4.5em;
	}
	.accordion-btn::after {
	  content: "▼ 公園MAPを見る";
	}
	.accordion-btn.is-show::after {
	  content: "▲ 公園MAPを閉じる";
	}
	.accordion-btn.generalBtnUnit_bgGradient::before {
		z-index: -1;
	}
	@media (hover: hover) and (pointer: fine) {
		.accordion-btn.generalBtnUnit_bgGradient:hover::before {
			opacity: .33;
		}
	}
	.accordion-btn.generalBtnUnit_bgGradient:focus-visible::before {
		opacity: .33;
	}

	.accordion-btn.is-show + .accordion-map::before {
	  display: none;
	}
}













/*------------------------------------------------------------------------------ 
pt-parenting_01
------------------------------------------------------------------------------ */