@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */
@media screen and (max-width: 1200px) {
/*    main {
        margin-top: 0;
    }*/
}
@media screen and (min-width: 736.02px) {
}
	/* hover, focus, current */
	@media (hover: hover) and (pointer: fine) {
	}
	.hogehoge a:focus {
	}


	.informationWrap {	background-image: url("../images/concept/foot_entry@sp.webp");}
	.informationWrap::after {	content: "駒沢オリンピック公園 [最遠区画より約430m/徒歩6分]"}
@media screen and (min-width: 736.02px) {
	.informationWrap {	background-image: url("../images/concept/foot_entry@pc.webp");}
}


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

	.pt-lead {
		position: relative;
		text-align: center;
		/*background: url("../images/concept/bg_page@sp.webp") top center no-repeat;*/
		background-size: 100% auto;
	}

	.pt-lead::after {
		opacity: .6;
		content: "image photo";
		display: inline-block;
		position: absolute;
		z-index: 10000;
		font-size: 1.0rem;
		font-family: var(--site-font_family-sans);
		
		right: 0.3em;
		top: 0.3em;
	}
	.pt-lead::before {
		opacity: .6;
		content: "呑川柿の木坂支流緑道[最遠区画より約160m/徒歩2分]";
		display: inline-block;
		position: absolute;
		z-index: 10000;
		font-size: 1.0rem;
		font-family: var(--site-font_family-sans);
		
		left: 0.3em;
		top: 0.3em;
	}
@media screen and (min-width: 736.02px) {
	.pt-lead {
		/*background-image: url("../images/concept/bg_page@pc.webp");*/
	}
}




	.leadBg {
		pointer-events: none;
		position: fixed; top: 0; left: 0;
		width: 100%;
		transition: opacity 1s ease;
	}
	.leadBg.is-active {
		position: fixed;
	}
	.leadBg.is-fin {
		opacity: 0;
	}
	.pt-lead .txtUnit {
		position: relative;
		z-index: 10;
		line-height: 2.2;
		margin: 0 auto;
		padding: var(--site-marpad-L) 9% 0;
	}
	.pt-lead h2 {
		font-size: min(4.4vw, 1.5em);
		line-height: 1.8;
		margin: 0 0 var(--site-marpad-XS);
	}
	.pt-lead .positionMap {
		width: 90%;
		max-width: 670px;
		margin: var(--site-marpad-L) auto 0;
	}


@media screen and (min-width: 736.02px) {
	.pt-lead .txtUnit {
		font-size: 1.15em;
		line-height: 2.8;
	}
	.pt-lead h2 {
		margin: 0 0 50px;
	}
}



	.positionPhotoArea {
		--photoMargin-lr: 10%;
	}
	.positionPhotoArea figure {
		position: relative;
	}
	.positionPhotoArea figure .imgUnit {
		overflow: hidden;
		display: block;
	}
	.positionPhotoArea figcaption {
		align-self: center;
		letter-spacing: 0;
		font-family: var(--site-font_faily-serif);
		font-size: min(3.2vw, 1.3em);
		margin-top: 1.0em;
	}
	.positionPhotoArea figcaption small {
		display: block;
		color: rgba(255, 255, 255, .4);
		font-family: var(--site-font_faily-serif);
		font-size: 0.8em;
		margin-top: 0.3em;
	}


	.positionPhotoUnit01 {
		text-align: right;
		margin-top: var(--site-marpad-XL);
		margin-left: var(--photoMargin-lr);
		margin-right: var(--photoMargin-lr);
	}
@media screen and (min-width: 736.02px) {
	.positionPhotoUnit01 {
		width: 70%;
		max-width: 960px;
		margin-left: auto;
	}
}


	.positionPhotoUnit02 figure {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: 48% 52%;
		grid-template-rows: 1fr 60px auto;

		margin-top: var(--site-marpad-XXL);
		/*margin-left: var(--photoMargin-lr);*/
		margin-right: var(--photoMargin-lr);
	}
	.positionPhotoUnit02 figure .imgUnit:nth-of-type(1){
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
	.positionPhotoUnit02 figure .imgUnit:nth-of-type(2){
		grid-column: 1 / 2;
		grid-row: 2 / 4;
	}
	.positionPhotoUnit02 figcaption {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
@media screen and (min-width: 736.02px) {
	.positionPhotoUnit02 {
		margin-top: var(--site-marpad-L);
		width: 70%;
		max-width: 818px;
	}
	.positionPhotoUnit02 figure {
		grid-gap: 50px;
		grid-template-rows: 1fr 100px auto;
	}
}


	.positionPhotoUnit03 {
		text-align: right;
		margin-top: var(--site-marpad-XXL);
		/*margin-left: var(--photoMargin-lr);*/
		/*margin-right: var(--photoMargin-lr);*/
	}
	.positionPhotoUnit03 figcaption {
		margin-right: 1em;
	}
@media screen and (min-width: 736.02px) {
	.positionPhotoUnit03 {
		width: 70%;
		max-width: 960px;
		margin-left: auto;
	}
	.positionPhotoUnit03 figcaption {
		position: absolute;
		right: 100%;
		top: 0;
		width: 100%;
	}
}


	.positionPhotoUnit04 figure {
		display: grid;
		grid-gap: 30px;
		grid-template-columns: repeat(2, 1fr);

		margin-top: var(--site-marpad-XXL);
		margin-left: var(--photoMargin-lr);
		/*margin-right: var(--photoMargin-lr);*/
	}
@media screen and (min-width: 736.02px) {
	.positionPhotoUnit04 {
		width: 960px;
		margin: 0 auto;
	}
}


	.positionPhotoUnit05 {
		text-align: right;
		margin-top: var(--site-marpad-XL);
		margin-left: calc(var(--photoMargin-lr) * 2);
		/*margin-right: var(--photoMargin-lr);*/
	}
	.positionPhotoUnit05 figcaption {
		margin-right: 1em;
	}
@media screen and (min-width: 736.02px) {
	.positionPhotoUnit05 {
		width: 70%;
		max-width: 818px;
		margin-top: var(--site-marpad-XXL);
		margin-left: auto;
	}
	.positionPhotoUnit05 figcaption {
		position: absolute;
		right: 100%;
		bottom: 0;
		width: 100%;
	}
}


	.positionPhotoUnit06 figure {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: 60% 1fr;
		grid-template-rows: auto 1fr;

		margin-top: var(--site-marpad-XXL);
		/*margin-left: var(--photoMargin-lr);*/
		margin-right: calc(var(--photoMargin-lr) * 2);
	}
	.positionPhotoUnit06 figure .imgUnit:nth-of-type(1){
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	.positionPhotoUnit06 figure .imgUnit:nth-of-type(2){
		padding: 0 10px;
	}
	.positionPhotoUnit06 figcaption {
		align-self: flex-end;
	}


@media screen and (min-width: 736.02px) {
	.positionPhotoUnit06 {
		width: 70%;
		max-width: 818px;
		margin-top: var(--site-marpad-XXL);
		margin-right: auto;
	}
	.positionPhotoUnit06 figcaption {
		align-self: center;
	}
}