@charset "UTF-8";


/**********************************************************************/
/******************************** Copy *******************************/
/**********************************************************************/

#copy
{
	position: relative;
	margin-top: 0rem;
	padding-top: 6rem;
	z-index: -9999px;
}

/*********************************************************************/
/****************************** Concept ******************************/
/*********************************************************************/

.concept
{
	width: 100%;
	margin-bottom: 2rem;
	padding: 2rem;
	
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.concept._1{background-image: url(../_img/renovation_concept/_1.jpg);}
.concept._2{background-image: url(../_img/renovation_concept/_2.jpg);}
.concept._3{background-image: url(../_img/renovation_concept/_3.jpg);}
.concept._4{background-image: url(../_img/renovation_concept/_4.jpg);}
.concept._5{background-image: url(../_img/renovation_concept/_5.jpg);}
.concept._6{background-image: url(../_img/renovation_concept/_6.jpg);}

.concept *
{
	position: relative;
	box-sizing: border-box;
}

.instantPhoto
{
	width: 50%;
	min-width: calc(200px + 4rem);
	max-width: 500px;
	
	display: block;
	position: relative;

	background-color: rgba(255, 255, 255, .85);
	box-shadow: rgba(0, 0, 0, 0.3) -10px 10px 20px, rgba(0, 0, 0, 0.3) 0px 10px 20px;
}

/*.instantPhoto:before
{
	content:"";
	display: block;
	position: absolute;
	top: 8%;
	left:2%;
	transform: skewX(-1deg) skewY(-1deg);
	z-index: 0;
	width: 90%;
	height: 90%;
	box-shadow: rgba(0, 0, 0, 0.5) -20px 20px 30px, rgba(0, 0, 0, 0.5) 0px 20px 30px
}*/

.instantPhoto > div
{
	box-sizing: border-box;
	padding: 2rem 2rem 4rem;
	width: 100%;
/*	background-color: rgb(255, 255, 255);*/
}

.textWrapper
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.textWrapper h2
{
	padding: 2.5rem;
	font-size: 1.5em;
	font-family: GenShinGothic-Nomal, Gen-N, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W1",Meiryo, "メイリオ","ＭＳ Ｐゴシック";
	font-weight: 400;
}
.textWrapper h2:after
{
	content:"";
	position: absolute;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	border: 1px solid;
	top: calc(50% - 2.5rem);
	left: calc(50% - 2.5rem);
}

.textWrapper h3
{
	width: 100%;
	font-family: "見出ゴMB31","MidashiGoPro-MB31", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo, "メイリオ","ＭＳ Ｐゴシック";
	font-weight: bold;
	text-align: center;
	margin: 1rem 0;
}

.remarkable
{
	width:100%;
	margin-top: 2rem;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}
.remarkable:after
{
	content:"";
	display: block;
	padding-top: 25%;
}

.svg ._5 .remarkable{background-image:url(../_img/renovation_concept/diagram_5.svg);}
.no-svg ._5 .remarkable{background-image:url(../_img/renovation_concept/diagram_5.png);}
.svg ._6 .remarkable{background-image:url(../_img/renovation_concept/diagram_6.svg);}
.no-svg ._6 .remarkable{background-image:url(../_img/renovation_concept/diagram_6.png);}

.remarkable > p:not(.cross)
{
	font-size: .8rem;
	line-height: 1.5;
	margin: 0 .5rem;
	min-width: 7rem;
	min-height: 7rem;
	font-family: "見出ゴMB31","MidashiGoPro-MB31", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo, "メイリオ","ＭＳ Ｐゴシック";
	font-weight: bold;
	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.remarkable > p:not(.cross):after
{
	content:"";
	position: absolute;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	border: 1px solid;
	top: calc(50% - 3rem);
	left: calc(50% - 3rem);
}

.remarkable > p.cross
{
	width: 1rem;
	height: 1rem;
	transform: translateX(-.25rem) translateY(.75rem);
}
.remarkable > p.cross:before,
.remarkable > p.cross:after
{
	content:"";
	position: absolute;
	display: block;
	width: 1.5rem;
	height: 1px;
	background-color: rgb(0, 0, 0);
}
.remarkable > p.cross:before
{
	transform: rotate(45deg);
}
.remarkable > p.cross:after
{
	transform: rotate(-45deg);
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 650px)
{
	.instantPhoto
	{
		width: calc(100% - 0rem);
	}
}