@charset "utf-8";
/* =======================================================================================
	COMMON
======================================================================================= */


/* =======================================================================================
	PAGE 
======================================================================================= */
/* ------------------------------------------------------------------------
area5ChomeSection
------------------------------------------------------------------------ */

/* areaPicWrap
-----------------------------------------------*/
	.areaPicWrap {
		position: relative;
	}
	.areaPicWrap .iconX {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: clamp(70px, 6vw, 100px);
		z-index: 2;
	}
	.areaPicWrap ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.areaPicWrap ul li {
		width: 50%;
		position: relative;
	}
	.areaPicWrap ul li .txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 100%;
		z-index: 1;
		padding: 0.5em;
		background: rgba(0, 0, 0, 0.55);
		color: rgba(var(--site-themeColor-base_text-reverse), 1);
		font-size: clamp(24px, 1.8vw, 32px);
		line-height: 1;
		letter-spacing: 0.1em;
	}
@media screen and (max-width: 736px) { /*{SP}*/
	.areaPicWrap {
		max-width:550px;		
		margin-left:auto;
		margin-right:auto;
	}
	.areaPicWrap ul li {
		width: 100%;
	}
	.areaPicWrap .iconX {
		width: 22%;
	}
	.areaPicWrap ul li:nth-of-type(1) .imgcapkeep {
		top:0px;
		bottom:auto;
	}
}




/* low-riseWrap
-----------------------------------------------*/
	.low-riseWrap {
		border: 1px solid rgba(var(--site-themeColor-accent_01), 1);
		padding: clamp(30px, (30 / 1200 * 100vw), 50px);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.low-riseWrap .txtBox {
		width: 40%;
	}
	.low-riseWrap .txtBox .hTxt{
		text-align: left;
	}
	.low-riseWrap .picBox {
		width: 56.713%;
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.low-riseWrap  > *{
		width: 100%!important;
	}
	.low-riseWrap .txtBox {
		margin-bottom: 2em;
	}
}





/* ------------------------------------------------------------------------
area5ChomeEnvironment
------------------------------------------------------------------------ */
	.area5ChomeEnvironment{
		background:url("../images/share/bg_bk.jpg") top center /  cover repeat-y;
		color:  rgba(var(--site-themeColor-base_text-reverse), 1);
	}


/* tagara5section
-----------------------------------------------*/
	.tagara5section {
		position: relative;
		overflow: hidden;
		padding: 0;
	}
	.tagara5section::before {
		position: absolute;
		content: "";
		z-index: 0;
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url("../images/concept/02_main_bg@pc.jpg") center right / cover no-repeat;
	}
	.tagara5section.js_showTargetAnimate::before {
		animation: zoomOutOp 2.6s ease 0s forwards;
	}

	/* txt */
	.tagara5Box {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content:space-around;
		align-items: center;
		width: 100%;
		margin: 0 auto;
		padding: clamp(250px, (280 / 1200 * 100vw), 280px) 60px clamp(200px, (250 / 1200 * 100vw), 250px) ;
	}
	.tagara5TxtBox {
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	.tagara5Ttl {
		--M-fluidFontSize-max-fontsize: 28;
		--M-fluidFontSize-min-fontsize: 20;/*36*/
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		--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()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
		font-family: var(--site-font_family-serif);

		line-height: 1.8;
		/*text-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.7);*/
		margin-left: 4em;
		letter-spacing: 0.2em;
		word-break: keep-all; /* タブレットのランドスケープモード等で改行されないように */
	}
	.tagara5Ttl .txtbox {
		display: block;
		margin: -2.5em 0 0 1.5em;
	}
	.tagara5Ttl .txtbox .inner{
		background: #000;
		color: #fff;
		display: inline-block;
		padding: 0.5em 0.2em;
		line-height: 1.3;
	}
	.tagara5Txt {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		--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()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
		font-family: var(--site-font_family-serif);

		line-height: 2;
		/*text-shadow: 0 0 2px rgba(0,0,0,0.7), 0 0 5px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);*/
		letter-spacing: 0.25em;
	}
	.tagara5Txt .txtBox > [class*="row"] {
		display: block;
		margin-right: 1.4em;
	}
	.tagara5Txt .txtBox > [class*="row"] small{
		letter-spacing: 0.15em;
	}


	/* txt animation*/
	.tagara5section.js_showTargetAnimate  .tagara5Ttl{
		 animation: 1.2s ease-in-out .3s both txt_Anime;
	}
	.tagara5section.js_showTargetAnimate .tagara5Txt{
		 animation: 1.2s ease-in-out .8s both txt_Anime;
	}
@keyframes txt_Anime {
	0% {	transform: translateY(20px); filter:  blur(10px); opacity: 0;}
	100% {	transform: translateY(0); filter:  blur(0); opacity: 1;}
}



@media screen and (min-width: 900.02px) {
	.tagara5Txt sup {
		right: -.5em;
		top:0;
	}
}
@media screen and (max-width: 1400px) { /*{belowTB}*/
	.tagara5Txt .txtBox > [class*="row"] {
		margin-right: 1em;
	}
}
@media screen and (max-width: 900px) { 
	.tagara5Box {
		justify-content: flex-start;
		padding: clamp(150px, (150 / 736 * 100vw), 250px) 8%;
	}
	.tagara5TxtBox {
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		width: 100%;
		text-align: center;
	}
	.tagara5Ttl {
		margin-bottom: 2.5em;
		margin-left: 0;
		word-break: keep-all; /* 解除 */
	}
	.tagara5Ttl .txtbox {
		margin: 0 auto 1em;
	}
	.tagara5Ttl .txtbox .inner {
	  padding: 0.5em 1.2em;
	}
	.tagara5Txt {
		letter-spacing: 0.08em;
	}
	.tagara5Txt .txtBox > [class*="row"] {
		margin-right: 0;
		margin-top: 1.5em;
	}
}

@media screen and (max-width: 736px) { /*{SP}*/
	.tagara5section::before {
		background: url("../images/concept/02_main_bg@sp.jpg") center right / cover no-repeat;
	}
	
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.tagara5Txt .txtBox > [class*="row"] {
		text-align: justify;
		text-justify: inter-ideograph; /* for IE */
	}
	.tagara5Txt .txtBox .bl:not(small),
	.tagara5Txt .txtBox .inbl {
		display: inline!important;
	}
}






/*tagara5PicSection
-----------------------------------------------*/
	.tagara5PicSection{
		padding:  clamp(80px, (80 / 1400 * 100vw), 120px) 0  clamp(100px, (100 / 1400 * 100vw), 160px);
		
	}
	.tagara5PicSection .tagara5PicBox{
		position: relative;
		z-index: 0;
		padding:  clamp(160px, (160 / 1400 * 100vw), 280px) 0 clamp(200px, (200 / 1400 * 100vw), 350px);
	}
	.tagara5PicSection [class*="picBox_0"] .item {
		z-index: -1;
	}
	.tagara5PicSection .map{
		box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.6);
		width: 50%;
		margin: 0 auto;
		max-width: 900px;
	}


/* picBox
-----------------------*/
	.tagara5PicSection .picBox_01 .item:nth-child(1){
		width: 26%;
		inset: 7% auto auto 2%;
	}
	.tagara5PicSection .picBox_01 .item:nth-child(2){
		width: 16%;
		inset: 40% auto auto 0;
		z-index: -2;
	}
	.tagara5PicSection .picBox_01 .item:nth-child(3){
		width: 25%;
		inset: auto auto 9% 3%;
	}
	.tagara5PicSection .picBox_02 .item:nth-child(1){
		width: 33%;
		inset: 0 0 auto auto;
}
	.tagara5PicSection .picBox_02 .item:nth-child(2){
		width: 15%;
		inset: 35% 7% auto auto;
	}
	.tagara5PicSection .picBox_02 .item:nth-child(3){
		width: 34%;
		right: 3%;
		bottom: 0;
		inset: auto 3% 0 auto;
	}

/* picBox small
-----------------------*/
	.tagara5PicSection .picBox_01 .item:nth-child(1) .imgcapkeep{
		left: 0;
		right: auto;
	}
@media screen and (min-width: 900.02px) {
	.tagara5PicSection [class*="picBox_0"] .item {
		position: absolute;
	}
}
@media screen and (max-width: 1050px) {
	.tagara5PicSection .map{
		width: 65%;
	}
	.tagara5PicSection .picBox_01 .item:nth-child(1){
		width: 22%;
		inset: 4% auto auto 1%;
	}
	.tagara5PicSection .picBox_01 .item:nth-child(2){
		width: 15%;
		inset: 29% auto auto 0;
	}
	.tagara5PicSection .picBox_01 .item:nth-child(3){
		width: 23%;
	}
	.tagara5PicSection .picBox_02 .item:nth-child(1){
		width: 30%;
}
	.tagara5PicSection .picBox_02 .item:nth-child(2){
		width: 14%;
		inset: 40% 2% auto auto;
	}
	.tagara5PicSection .picBox_02 .item:nth-child(3){
		width: 31%;
		inset: auto 4% 0 auto;
	}
}

@media screen and (max-width: 900px) {
	.tagara5PicSection {
	  padding: clamp(50px, (80 / 900 * 100vw), 80px) 0;
	}
	.tagara5PicBox{
		display: flex;
		flex-wrap: wrap;
	}
	.tagara5PicSection .tagara5PicBox{
		padding:  0 ;
	}
	.tagara5PicSection .map{
		width: 88%;
		order: 2;
		margin: 2em auto;
	}
	.tagara5PicSection .picBox_01{	
		order: 1;	
		/*margin-bottom: -2%; */
	}
	.tagara5PicSection .picBox_02{	
		order: 3;	
		/*align-items: flex-start!important;*/
		/*margin-top: -2%;*/
	}
	.tagara5PicSection [class*="picBox_0"]{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.tagara5PicSection [class*="picBox_0"] .item {
		position:static;
		inset: unset;
	}
	.tagara5PicSection .picBox_01 .item:nth-child(1){
		width: 25%;
		
	}
	.tagara5PicSection .picBox_01 .item:nth-child(2){
		width: 25%;
	}
	.tagara5PicSection .picBox_01 .item:nth-child(3){
		width: 46%;
	}
	.tagara5PicSection .picBox_02 .item:nth-child(1){
		width: 37%;
}
	.tagara5PicSection .picBox_02 .item:nth-child(2){
		width: 20%;
	}
	.tagara5PicSection .picBox_02 .item:nth-child(3){
		width: 40%;
	}
}



.contCaption {
width: 94%;
  color: #fff;
  max-width: 1800px;
  margin: 2em auto 0;
  text-align: right;
}
.contCaption span {
	margin-right: 0.8em;
	display: inline-block;
}
.contCaption span:last-child {
	margin-right: 0;
}