@charset "utf-8";

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

	/*--------------------------
	スワイプ 
--------------------------- */
	.js_swipeMe .pic img{
		width: 100%;
		max-width: none;
	}



	/*--------------------------
	タイトル「」 
--------------------------- */
	h3.ptHeading em.ttl{
		--M-fluidFontSize-max-fontsize: 48;
		--M-fluidFontSize-min-fontsize: 34;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 600;
		--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 );
		font-size: var(--M-fluidFontSize-fontSize);
		
		display: block;
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.2;
		margin-bottom: 1em;
		font-weight: 600;
		text-align: center;
		letter-spacing: 0.13em;
		/*font-family: var(--site-font_family-sans);*/
	}

	h3.ptHeading .corner-heading{
	  --line:     #7a7a7a; /* 線色 */
	  --w:        2px;     /* 線の太さ */
	  --hx:       34px;    /* 横線の見せる長さ */
	  --vy:       34px;    /* 縦線の見せる長さ */
	  --overlap:  8px;     /* 交点からの突き出し量 */
	  --gap:      12px;    /* 文字ブロックから角飾りまでの距離 */
		
	  position: relative;
	  display: inline-block;
	  padding: 0.5em 1.2em;  
	}
	h3.ptHeading .corner{
	  position: absolute;
	  width: 0; height: 0; 
	  pointer-events: none;
	}
	h3.ptHeading .corner.tl{ left: var(--gap); top: var(--gap); }
	h3.ptHeading .corner.br{ right: var(--gap); bottom: var(--gap); }

	h3.ptHeading .corner.tl::before, h3.ptHeading .corner.tl::after{
	  content:"";
	  position: absolute;
	  background: var(--line);
	}
	h3.ptHeading .corner.tl::before{
	  height: var(--w);
	  width: calc(var(--hx) + var(--overlap));
	  left: -8px;
	  top: 0;
	}
	h3.ptHeading .corner.tl::after{
	  width: var(--w);
	  height: calc(var(--vy) + var(--overlap));  
	  left: 0;
	  top: -8px;
	}
	h3.ptHeading .corner.br::before, h3.ptHeading .corner.br::after{
	  content:"";
	  position: absolute;
	  background: var(--line);
	}
	h3.ptHeading .corner.br::before{
	  height: var(--w);
	  width: calc(var(--hx) + var(--overlap));
	  right: -8px; bottom: 0;
	}
	h3.ptHeading .corner.br::after{
	  width: var(--w);
	  height: calc(var(--vy) + var(--overlap));
	  right: 0; bottom:-8px;
	}

@media screen and (max-width: 900px) {
	h3.ptHeading .corner-heading{
		--hx:       24px;    /* 横線の見せる長さ */
		--vy:       24px;    /* 縦線の見せる長さ */
		--gap:      10px;    /* 文字ブロックから角飾りまでの距離 */
	}
	h3.ptHeading .corner.tl::before{  left: -6px;}
	h3.ptHeading .corner.tl::after{ top: -6px;}
	h3.ptHeading .corner.br::before{  right: -6px; }
	h3.ptHeading .corner.br::after{  bottom:-6px;}
}
@media screen and (max-width: 600px) {
	  h3.ptHeading .hTxt {
		text-align: center;
	  }
}

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

/* ---------------------------------------------------------------
residence_introSection
--------------------------------------------------------------- */


	/*introPhotoBox
	-------------------------------------*/
	.introPhotoCaption {
		width: 99%;
		margin: .5em auto 0;
		text-align: right;
	}
@media screen and (max-width: 600px) {
	.introPhotoCaption {
		width: 96%;
	}
}

	/*introPhotoDetails
	-------------------------------------*/
	.introPhotoDetails {  
		display: grid;
		gap: 5px 5px;
		grid-auto-flow: row;
		grid-auto-columns: 1fr 1fr;
	}
	.no01 { grid-area: no01; }
	.no02 { grid-area: no02; }
	.no03 { grid-area: no03; }
	.no04 { grid-area: no04; }
	.no05 { grid-area: no05; }
	.no06 { grid-area: no06; }
	.no07 { grid-area: no07; }

	.introPhotoDetails [class*="no0"] {
		position: relative;
	}
	.introPhotoDetails [class*="no0"] small{
		top: 0;
		bottom: auto;
	}


@media screen and (min-width: 600.02px) {
	.introPhotoDetails {  
	  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	 /* grid-template-rows: 1fr 1fr;*/
	  grid-template-areas:
		"no01 no01 no02 no02 no03 no03 no07 no07"
		"no04 no04 no04 no04 no05 no06 no07 no07";
	}
}
@media screen and (min-width: 900.02px) {
	.introPhotoDetails {  
	  gap: 14px 14px;
	}
}
@media screen and (max-width: 600px) {
	  .residence_introSection h3.ptHeading .hTxt {
		text-align: left!important;
	  }
	.introPhotoDetails { 
	  grid-template-columns: 1fr 1fr 1fr;
	  grid-template-areas:
		"no01 no02 no03"
		"no04 no04 no04"
		"no05 no06 no07";
	}
}





/* ---------------------------------------------------------------
baseIsolationSection
--------------------------------------------------------------- */

/*baseIsolationBox
-------------------------------------*/
	.baseIsolationBox {
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
		align-items: center;
		flex-direction: row-reverse;
		margin-top: 2em;
	}
	.baseIsolationBox .picBox{	width: 30%; }
	.baseIsolationBox .txtBox{	width: 60%;	}
	.baseIsolationBox .picBox img{
		display: block;
		margin: 0 auto;
	}

	.baseIsolationBox .txtBox .sentensBox{

	}

@media screen and (min-width: 900.02px) {
.baseIsolationBox h3.ptHeading em.ttl,
	.baseIsolationBox .txtBox .hTxt{
	  text-align: left;
	}
	.baseIsolationBox .txtBox .sentensBox{
		text-align: left;
		line-height: 2.6;
		margin: 0 auto;
		width: auto;
		max-width: none;
	}
}
@media screen and (max-width: 900px) {
	.baseIsolationSection{
		padding-bottom: 0;
	}
	.baseIsolationBox .picBox,
	.baseIsolationBox .txtBox {	width: 100%;	}
	.baseIsolationBox .picBox {	
		width: 100%;
		max-width: 162px;
		margin: 3em auto 0;
	}
}



/* ---------------------------------------------------------------
featureSection
--------------------------------------------------------------- */

	.featureSection {
		width: 100%;
		margin: 0;
		/*padding: 250px 0;*/
		padding: clamp(80px, (180 / 900 * 100vw), 250px)  0;
		position: relative;
	}
	.featureSection::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: url("../images/share/bg_pattern02.jpg") 0 0;
		transform: skewY(8deg);
		z-index: 0;
		mix-blend-mode: multiply;
		pointer-events: none;
	}
	.featureSection .featureBox {
		position: relative;
		z-index: 1;
	}
	.featureSection .featureBox .equBox {
		max-width: 650px;
		margin: var(--site-marpad-XL)  auto 0;
	}
	.featureSection .featureBox .equBox .pic  {
		width: 250px; 
		height: 250px;
		border-radius: 50%;
		overflow: hidden;
		position: relative; 
		background: #ffff;
		margin: 0 auto 2em;
	}
	.featureSection .featureBox .equBox .pic img {
		position: absolute;
		top: 49%;
		left: 53%;
		transform: translate(-50%, -50%); 
		width: 63.2%;
		height: auto;
	}
	.featureSection .featureBox .equBox .txt {
--M-fluidFontSize-max-fontsize: 15;
  --M-fluidFontSize-min-fontsize: 13;
  --M-fluidFontSize-max-viewport: 900;
  --M-fluidFontSize-min-viewport: 700;
  --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 );
  line-height: 1.65;
  font-family: var(--site-font_family-basic);
  font-size: var(--M-fluidFontSize-fontSize);
  letter-spacing: .09em;
}

@media screen and (max-width: 900px) {
	.featureSection::after {
	  transform: skewY(18deg);
	}
	.featureBox .hTxt{
		text-align: center;
	}
}
@media screen and (max-width: 600px) {
	.featureSection .featureBox .equBox {
		margin: var(--site-marpad-M)  auto 0;
	}
	.featureSection .featureBox .equBox .pic  {
		width: 200px; 
		height: 200px;
	}
}




/* ---------------------------------------------------------------
differenceSection
--------------------------------------------------------------- */
	.differenceBox{
		padding:var(--site-marpad-L) 0 var(--site-marpad-XXL); 
	}
	.compareBox{
		background: #fff;
		box-shadow: 0 0 8px rgba(0,0,0,0.25);
		padding: 80px 60px;
	}
	.compareBox .cont_compare{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 900px;
		margin: 0 auto;
	}
	.compareBox .cont_compare{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.compareBox .cont_compare > *{
		width: 44%;
	}
	.compareBox .cont_compare dt {  
		--M-fluidFontSize-max-fontsize: 28;
		--M-fluidFontSize-min-fontsize: 20;
		margin-bottom: .5em;
	}
	.compareBox .cont_compare dt span{  
		display: inline-block;
		border: 0 solid #da9a31;
		border-width: 2px 0;
		padding: .2em 1em;
	}
	.compareBox .cont_compare dd.txt{  
		text-align: center;
	}
	.compareBox .cont_compare dd.img{  
		display: flex;
		align-items: flex-end;
		margin-top: 2em;
	}
	.compareBox .cont_compare .cap{  
		display: block;
		width:  100%!important;
		margin-top: .65em;
	}
	.compareBox .commentBox{  
		display: block;
		padding: 1em;
		background: #5c4827;
		max-width: 900px;
		margin: 3em auto 0;
		text-align: center;
		color: #fff;
	}
@media screen and (max-width: 1000px) {
	.compareBox .cont_compare > *{
		width: 48.5%;
	}
}
@media screen and (max-width: 600px) {
	.compareBox{
		padding: 40px 15px;
	}
	.compareBox .hTxtStyh3{
		text-align: center;
	}
}
@media screen and (max-width: 480px) {
	.compareBox .txt .inbl{
		display: block;
	}
}



/* ---------------------------------------------------------------
earthquakeSVSection
--------------------------------------------------------------- */

	.earthquakeSVBox .pic{
		max-width: 780px;
		margin: 0 auto 3em;
	}

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

}


/* ---------------------------------------------------------------
achievementSection
--------------------------------------------------------------- */
	.achievementListWrap{
		margin-top:var(--site-marpad-XXL);
	}
	  .achievementBox .hTxt {
		text-align: center;
	  }
	  .achievementList {
		--base-generalColBox-margin-column: 10px;
	  }
	.achievementList .ttl {
		margin: 0.7em 0;
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw;
		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) );
		font-family: var(--site-font_family-serif);
		line-height: 1.4;
		text-align: center;
	}
	.achievementList .ttl .date {
		display: block;
		font-size: 0.889em;
		margin-top: .5em;
	}

@media screen and (max-width: 900px) {
	.achievementListWrap{
		margin-top:var(--site-marpad-L);
	}
	.achievementList .ttl {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 480;
	}
}
@media screen and (max-width: 600px) {
	  .achievementList {
		--base-generalColBox-margin-row:	30px;
	  }
	.achievementListWrap{
		margin-top:var(--site-marpad-M);
	}	
	
}






/* ---------------------------------------------------------------
patentSection
--------------------------------------------------------------- */

	.patentEtcWrap{
		background: #f2f6fa;
		outline: 1px solid #00a7db;
		outline-offset: -15px;
		padding: clamp(60px, (60 / 900 * 100vw), 100px)  clamp(40px, (40 / 900 * 100vw), 80px)  ;
	}

	/* patentBox */
	.patentEtcWrap .patentBox .patentlistBox{
		max-width: 900px;
		margin: 0 auto;
	}

	/* advertisingBox */
	.patentEtcWrap .advertisingBox {
		margin-top:var(--site-marpad-XXXL);
	}
	.advertisingList {
		max-width: 1000px;
		margin: 5em auto 0;
		--base-generalColBox-margin-column: 50px;
		justify-content: center;
	}
	.advertisingList a {
		box-shadow: 2px 2px 3px rgba(0,0,0,0.25);
		position: relative;
		transition: opacity .15s ease-out;
    }
	.advertisingList a .icon{
		position: absolute;
		width: 12%;
		right: 8px;
		top: 8px;
		z-index: 3;
    }
	.advertisingList a:hover {
		opacity: .7;
    }

@media screen and (max-width: 600px) {
	.patentEtcWrap{
		outline-offset: -5px;
		padding: clamp(40px, (40 / 600 * 100vw), 60px)  clamp(20px, (20 / 600 * 100vw), 40px)  ;
	}
	.patentEtcWrap .advertisingBox {
		margin-top:var(--site-marpad-L);
	}
	.advertisingList {
		margin: 3em auto 0;
		--base-generalColBox-margin-row:	10px;
		--base-generalColBox-margin-column: 10px;
	}
}





/* modalcontents
------------------------------------------------ */
    .modalContents{
        display: none;
    }

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

}
@media screen and (max-width: 600px) {
    .modalWrap .txtBox .ttl img{
        width: 75%;
    }
}

/* ----------------------------
VENOBOX 設定変更
----------------------------------*/
.venoframe, .vbox-inline {
	max-width: 900px !important;
    width: 85%!important;
    padding: 20px!important;
}
.vbox-content > *{
	position:relative;
}

@media screen and (max-width: 600px) {
.venoframe, .vbox-inline {
    padding: 10px!important;
    } 
}