@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */
@media screen and (max-width: 736px) {
  .mainHeaderVisualWrap .pic img {
    margin-left:  -28%;
  }
}
	
/* =======================================================================================
	PAGE 
======================================================================================= */
/* ------------------------------------------------------------------------
positionSection
------------------------------------------------------------------------ */
/* positionPic
--------------------------------- */
	.positionSection .positionPic {
		background:url("../images/share/texture_bg02.jpg") center center;
	}



/* ------------------------------------------------------------------------
scenicZoneSection
------------------------------------------------------------------------ */

/* zone01
--------------------------------- */
	.scenicZoneSection .zone01{
		position: relative;
		width: 100%;
		overflow: hidden;
		padding: var(--site-marpad-XXL) 0;
		z-index: 1;
	}
	.scenicZoneSection .zone01::before{
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		z-index: -1;
		display: inline-block;
		width: 100%;
		height:100%;
		background: url("../images/location/scenic_zone_bg.jpg") top center / cover no-repeat;
		opacity: 1;
		transform: scale(1.2) rotate(0.5deg);
	}
	.scenicZoneSection .zone01.js_showTargetAnimate::before {
		animation: conBg 2s ease-out 0s forwards;
	}
		@keyframes conBg {
		  0% {
		  }
		  100% {
		  	opacity: 1;
			transform: scale(1) rotate(0deg);
		  }
		}

	.scenicZoneSection .zone01[data-bgcap-parent]::after {
			content: "image photo"; 
	}
	.scenic01Cont .picBox{
		margin-top:var(--site-marpad-S);
	}
	.scenic01Cont .txtBox{
		margin-top:var(--site-marpad-XXS);
		background-color: rgba(221,236,217,0.8);
		padding: 30px 50px;
		font-size: 1.5rem;
	}
	.scenic01Cont .txtBox .txt{
		border-bottom: 1px dotted #000;
		padding-bottom: 0.8em;
		margin-bottom: 0.8em;
	}
	.scenic01Cont .txtBox .ttl{
		line-height: 1.7;
	}
	.scenic01Cont .txtBox .ttl span{ 
		display: flex;
		align-items: baseline
	}
	.scenic01Cont .txtBox .ttl span::before { 
		content: '■';
		display: block;
		margin-right: 0.3em;
	}
	.scenic01Cont .txtBox dl .standardBox{
		display: flex;
		flex-wrap: wrap;
		margin-top: 1em;
	}
	.scenic01Cont .txtBox dl .standardBox .ttl{
		width: 14%;
		background:rgba(82,170,132,0.85);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.8rem;
	}
	.scenic01Cont .txtBox dl .standardBox ul{
		width: 86%;
		background:rgba(255,255,255,0.7);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0 1.3em;
		padding: 1em;
	}
	.scenic01Cont .txtBox dl .standardBox li{
		padding: 0.1em 0;
	}
	.scenic01Cont .txtBox dl .standardBox ul .dbcircle{
		display: flex;
		line-height: 1.5;
	}
	.scenic01Cont .txtBox dl .standardBox ul .dbcircle::before{
		content: '◎';
		display: block;
		margin-right: 0.3em;
	}
@media screen and (min-width: 736.02px) {
	.scenic01Cont .picBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.scenic01Cont .picBox p:nth-child(1){
		width: 40.476%;
	}
	.scenic01Cont .picBox p:nth-child(2){
		width: 54.761%;
	}
}
@media screen and (max-width: 736px) { /*{SP}*/
	.scenic01Cont .picBox{
		display: block;
	}
	.scenic01Cont .picBox p{
		margin-left: auto;
		margin-right: auto;
	}
	.scenic01Cont .picBox p:nth-child(1){
		width: 100%;
		max-width: 510px;
		margin-bottom: 2em;
	}
	.scenic01Cont .picBox p:nth-child(2){
		width: 100%;
		max-width: 690px;
	}
	.scenic01Cont .txtBox{
		padding: 30px ;
		font-size: 1.3rem;
	}
	.scenic01Cont .txtBox dl .standardBox .ttl{
		width: 14%;
	}
	.scenic01Cont .txtBox dl .standardBox .ttl,
	.scenic01Cont .txtBox dl .standardBox ul{
		width: 100%;
	}

}


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

}

/* zone02
--------------------------------- */
	.scenicZoneSection .zone02{
		padding: var(--site-marpad-L) 0;
	}
	.scenicZoneSection .zone02 h4 .hTxt{
		margin-bottom: 0;
		padding: 0.2em 0;
	}

	.scenic02Cont{
		max-width: 900px;
		margin: 0 auto;
	}
	.scenic02Cont .zonelist{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-top: 1.5em;
		/*padding: 0 50px;*/
	}
	.scenic02Cont .zonelist {
		flex-direction: row-reverse;
	}
	.scenic02Cont .zonelist .pic{
		width: 53%;
	}
	.scenic02Cont .zonelist .numBox{
		width: 45%;
		counter-reset: ol_li;
		font-size: 1.143em;
		padding-left: 2em;
	}
	.scenic02Cont .zonelist .numBox li{
		margin-bottom: 0.3em;
	  line-height: 1;
	}
	.scenic02Cont .zonelist .numBox li::before {
		counter-increment: ol_li;
		content: counter(ol_li);
		display: inline-block;
		width: 1.4em;
		/*height: 1.4em;*/
		line-height: 1.4em;
		text-align: center;
		margin-right: 0.5em;
		font-size: 1em;
		color: #ffff;
		/*background: #7c9967;*/
		font-family: var(--site-font_family-en_1);
		text-indent: -.1em;
		
			border-radius: 100%;
			background: #70a43c;
	}
	.scenic02Cont .comment {
		background: rgba(255,255,255,0.25);
		border: 1px solid #7c9967;
		padding: 0.3em 0.5em 0.5em;
		text-align: center;
		margin-top: 2.5em;
		font-size: 1.357em;
		line-height: 1.4;
	}
	.scenic02Cont .comment  em{
		color: #2d6206;
		font-size: 1.369em;
	}

@media screen and (max-width: 736px) {
	.scenic02Cont .zonelist{
		padding: 0 ;
	}
	.scenic02Cont .zonelist .numBox{
		font-size: 1em;
		margin-top: 2em;
	}
}

@media screen and (max-width: 600px) {
	.scenic02Cont .zonelist .pic{
		width: 100%;
		max-width: 530px;
		margin-left: auto;
		margin-right: auto;
	}	
	.scenic02Cont .zonelist .numBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 1em;
	}	
	.scenic02Cont .zonelist .numBox li{
		width: 43%;
		text-indent: -2em;
	}
}




/* ------------------------------------------------------------------------
suginamiCitySection
------------------------------------------------------------------------ */
	.suginamiCitySection{
		position: relative;
		max-width: 1800px;
		width: 94%;
		margin: var(--site-marpad-XXL) auto 0;
		background: url("../images/location/suginami_bg.jpg") left bottom / cover no-repeat;
		outline: 1px solid rgba(255,255,255,0.5);
		outline-offset: -20px;
	}
	.suginamiCitySection .txtBox {
		display: block;
		width: 55%;
		color: rgba(var(--site-variationColor-whitish), 1);
		text-shadow: 0 0 5px rgba(0,0,0,.4), 0 0 4px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.5);
		margin: 0 8% 0 auto;
	}
	.suginamiCitySection .txtBox [class*="enHeading_"] {
		color:#fff;
		margin-bottom: 20px;
	}

	.suginamiCitySection .txtBox [class*="enHeading_"]::after {
		background-image: url("../images/share/ico_heading_white.svg") ;
	}

	.suginamiCitySection .txtBox .rankingbox{
		max-width: 600px;
		margin: 2.5em auto 0;
	}
	.suginamiCitySection .txtBox .rankingbox .rankingTxt{
		border: 1px solid #9d8b4a;
		background: #fff;
	}
	.suginamiCitySection .txtBox .rankingbox .rankingTxt .ttl{
		background:  #9d8b4a;
		text-align: center;
		padding: 0.3em;
		text-shadow:none;
	}
	.suginamiCitySection .txtBox .rankingbox .rankingTxt .pic{
		padding: 2em 1.5em;
		text-align: center;
	}


@media screen and (max-width: 1050px) { 
	.suginamiCitySection{
		padding-bottom: var(--site-marpad-XXXL);
		 outline-offset: -10px;
	}
	.suginamiCitySection .txtBox {
		width: 80%;
		margin: 0  auto;
	}
}
@media screen and (max-width: 736px) { /*{SP}*/
	.suginamiCitySection .txtBox .rankingbox .rankingTxt .pic{
		padding: 1em;
	}
}

@media screen and (max-width: 480px) { /*{SPs}*/
	.suginamiCitySection .txtBox {
		width: 85%;
	}
}







/* ------------------------------------------------------------------------
 parkSection
------------------------------------------------------------------------ */

.parkSection .parkCont {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content:space-between;
}

/*-----------------------------------
picBox0 共通
-----------------------------------*/
	.parkSection .parkCont [class*="picBox0"]{ 
		display: flex;
		flex-wrap: wrap;
	}
	.parkSection .parkCont [class*="picBox0"] .ttl{ 
	 display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
}
	.parkSection .parkCont [class*="picBox0"] .ttl .line {
      flex-grow: 1;
      width: 1px;
      background-color: #000;
    }
	.parkSection .parkCont [class*="picBox0"] .ttl .ja {
      writing-mode: vertical-rl;
      text-orientation: upright;
      font-size: 18px;
      margin-top: 10px;
	   
	--M-fluidFontSize-max-fontsize: 30;
	--M-fluidFontSize-min-fontsize: 20;
	--M-fluidFontSize-max-viewport: 1600;
	--M-fluidFontSize-min-viewport: 1200;
	--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (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))), var(--M-fluidFontSize-max-fontsize) * .1rem );

	min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
	letter-spacing: 0.1em;
	line-height: 1;
	font-size: var(--M-fluidFontSize-fontSize);
    }

/* picBox01 -------------------------------*/
	.parkSection .parkCont .picBox01{ 
		order: 1; 
		max-width: 1600px;
		width: 100%;
		padding-right: clamp(30px, (30 / 900 * 100vw), 100px);
		margin-bottom: var(--site-marpad-XXL) ;
	}
	.parkSection .parkCont .picBox01 .pic{ 
		width: calc(1460 / 1600 * 100%);
		margin-right: 10px;
	}


/* picBox02 -------------------------------*/
.parkSection .parkCont .picBox02{ 
	order: 3; 
	width: calc(1081 / 1920 * 100%);
	flex-direction: row-reverse;
}
.parkSection .parkCont .picBox02 .pic{ 
	width: calc(990 / 1081 * 100%);
	margin-left: 10px;
}


/* txtBox -------------------------------*/
	.parkSection .parkCont .txtBox{ 
		order: 2;
		writing-mode: vertical-rl;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 30%;
		margin: 0 auto;
		padding: 0 4%;
		letter-spacing: 0.2em;
	}
	.parkSection .parkCont .txtBox .hTxtStyh4{ 
		text-align: left;
		margin-left: 2em;
		letter-spacing: 0.2em;
	}
	.parkSection .parkCont .txtBox .text-orientation{ 
		 text-orientation: upright;
	}


@media screen and (max-width: 1400px) {
	.parkSection .parkCont [class*="picBox0"] .ttl .ja {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 736;
	}
	.parkSection .parkCont {
		align-items:flex-end;
	}
}

@media screen and (max-width: 900px) {
	.parkSection .parkCont .picBox01 {
		margin-bottom: var(--site-marpad-M);
	}
	.parkSection .parkCont .picBox02 {
		width: 92%;
		margin-left: auto;
	}
	.parkSection .parkCont .txtBox{ 
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		width: 100%;
		justify-content: flex-start;
		margin-bottom: var(--site-marpad-M);
	}
	.parkSection .parkCont .txtBox .hTxtStyh4 {
		margin-left: 0em;
	}
}

@media screen and (max-width: 736px) {
	.parkSection .parkCont .picBox01{ 
		padding-right: clamp(20px, (20 / 480 * 100vw), 30px);
	}
	.parkSection .parkCont .picBox02 .pic {
		width: 90%;
	}
	.parkSection .parkCont .txtBox { 
		letter-spacing: 0.1em;
		padding:0 30px;:
	}
	.parkSection .parkCont .txtBox br{ 
		display: none;
	}
	.parkSection .parkCont [class*="picBox0"] .ttl .ja {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
}


/* photoBox
--------------------------------- */
	.parkSection .photoBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.parkSection .photoBox > *{
		width: 32.5%;
	}
	.parkSection .photoBox .generalTxtBox {
		min-height: 100px;
	}

@media screen and (min-width: 480.02px) and (max-width: 900px) {
	.parkSection .photoBox .item{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 2em;
	}
	.parkSection .photoBox .item > *{
		width: 49%;
	}
	.generalTxtBox {
		border-top: 1px solid #000;
	}
	.positionSection .photoBox .item:nth-child(2){
		flex-direction: row-reverse;
	}
}

@media screen and (max-width: 480px) {
	.parkSection .photoBox > *{
		width: 100%;
		margin-bottom: 3em;
	}
	.parkSection .photoBox .generalTxtBox {
		min-height: 80px;
	}
}




/* ------------------------------------------------------------------------
eifukuchoSection
------------------------------------------------------------------------ */
/* introPhoto

.introPhoto{
	max-width: 630px;
	margin:  var(--site-marpad-M)  auto var(--site-marpad-XL);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.introPhoto > *{
	width: 48%;
 }
.introPhoto p:nth-child(2) {
  margin-top: clamp(40px, (40 / 736 * 100vw), 80px);
}
.introPhoto .cap {
	font-size: 1.05em;
	line-height: 1.4;
	text-align: center;
	display: block;
	margin-top: 0.8em;
}
.introPhoto .cap .distance{
	display: block;
	font-size: 11px;
	letter-spacing: 0.02em;
}



/* photoBox
--------------------------------- */
@media print, screen and (min-width: 1050.02px) { /*{overTBl}*/
	.eifukuchoSection .photoBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.eifukuchoSection .photoBox > *{
		width: 32.5%;
	}
	.eifukuchoSection .photoBox .generalTxtBox {
		min-height: 100px;
	}
	.eifukuchoSection .photoBox > .item:nth-child(n+4)  {
		margin-top:clamp(50px, (50 / 1200 * 100vw), 60px);
	}
}



/*
@media screen and (min-width: 480.02px) and (max-width: 900px) {
	.eifukuchoSection .photoBox .item{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 2em;
	}
	.eifukuchoSection .photoBox .item > *{
		width: 49%;
	}
	.generalTxtBox {
		border-top: 1px solid #000;
	}
	.eifukuchoSection .photoBox .item:nth-child(2){
		flex-direction: row-reverse;
	}
}

@media screen and (max-width: 480px) {
	.eifukuchoSection .photoBox > *{
		width: 100%;
		margin-bottom: 3em;
	}
	.eifukuchoSection .photoBox .generalTxtBox {
		min-height: 80px;
	}
}
*/


/*swiper設定--------------------------------- */
/*swiper-pagination*/
	.eifukuchoWrap {
		position: relative;
	}	
/* 矢印カスタマイズ */
	.eifukuchoWrap .swiper-button-prev,
	.eifukuchoWrap .swiper-button-next {
		width: 22px;
		height:22px;
		border-radius: 50%;
		background: rgba(var(--site-themeColor-accent_2), 1);
		/*border:1px solid #988656;*/
		z-index:1;
		transition: all 0.2s ease;
	}
	.eifukuchoWrap  .swiper-button-prev {left: -30px;}
	.eifukuchoWrap  .swiper-button-next {right:-30px;}

	.eifukuchoWrap .swiper-button-prev::after,
	.eifukuchoWrap .swiper-button-next::after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		text-align: center;		
		width: 9px;
		background: url("../images/share/ico_arr_white.svg") 50% 50% no-repeat;
		background-size: 100% auto;
	}
	.eifukuchoWrap .swiper-button-prev::after {right:8%; transform: rotate(-180deg); }
	.eifukuchoWrap .swiper-button-next::after {left:8%;}
	
	.eifukuchoWrap .swiper-slide img {
	  height: auto;
	  width: 100%;
	}
	/*hover*/
	.eifukuchoWrap .swiper-button-prev:hover,
	.eifukuchoWrap .swiper-button-next:hover {
		opacity: 0.8;
	}

/* ドットカスタマイズ */
	.eifukuchoWrap .swiper-pagination-bullets.swiper-pagination-horizontal {
		bottom:-30px;
	}
	
	.eifukuchoWrap .swiper-pagination-bullet-active {
		background: rgba(var(--site-themeColor-accent_2), 1);
	}




@media print, screen and (min-width: 1050.02px) { /*{overTBl}*/
	.eifukuchoWrap .swiper-pagination,
	.eifukuchoWrap .swiper-button-prev,
	.eifukuchoWrap .swiper-button-next {
		display: none;
	}
}