@charset "utf-8";
/* CSS Document */
.mfp-bg{background: #ffffff !important;}
/*-------------------------
大見出し　＋　リード文
-------------------------*/
#titleWrap .volIcon{max-width: 100px;
    margin-right: 30px;
    display: block;}

.titleLead{text-align: center;}
.titleLead strong{font-size: 26px;}


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

}

@media screen and (max-width: 640px){
.titleLead{text-align: left;}
.titleLead strong{font-size: 23px;}	
}

.contents_sec .triangle{text-align: center;}
/*-------------------------
マンションにお住まいのみなさま
-------------------------*/

.familyBox{width: 100%; text-align: center;margin: 100px auto 50px;position: relative;padding: 0 15px;}
.familyBoxTtl{font-size: 20px; font-weight: bold; color: #dd8d94; text-align: left;
  max-width: 800px; margin: 0 auto 10px; display: flex; justify-content: center; align-items: center;}
.familyBoxTtl::after {background-color: #dd8d94; content: ""; height: 1px; width: 60%; margin-left: 15px;}

.familyBox ul{display: flex;justify-content: space-between; align-items: center; flex-wrap: wrap;max-width: 800px;margin: 0 auto;}
.familyBox ul li{width: 25%;}
.familyBox ul li {border-left: 1px dashed #000; padding: 0 0 0 3%; width: 30%;}
.familyBox ul li:first-child {border-left:none;}
.familyBox ul li p{line-height: 1.4; font-weight: bold; margin: 10px auto 0;}
.familyBox ul li p span {color: #fff; border-radius: 9999px; padding: 0 15px;}
.familyBox ul li p span.familyBoxspan01 {background-color: #ee889c;}
.familyBox ul li p span.familyBoxspan02 {background-color: #f8b400;}
.familyBox ul li p span.familyBoxspan03 {background-color: #abcb00;}

.keypersonBox{width: 25%; text-align: center; margin: 70px auto 20px; padding: 55px 40px; position: relative; background: #E9E6F3;}

.keypersonBox p{    line-height: 1.4;
    font-weight: bold;
    margin: 10px auto 0;}
.keyperson-fukidashi{}

/*.triangle3{
	position: absolute;
	bottom: -15px;
	left:calc( 50% - 15px);
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 30px;
	height: 30px;
	border: 5px solid;
	border-color:  transparent transparent #FCCA4A #FCCA4A;
	transform: rotate(-45deg);
	background: #FFFAED;
}*/

@media screen and (max-width: 960px){
	.familyBox ul li p,
	.keypersonBox p{font-size: 12px;}
	.familyBox ul li {width: 28%;}
	.familyBox {width: 100%;}
	.keypersonBox{width:30%;}
	/*.familyBox,.keypersonBox {width: 100%;}*/

}

@media screen and (max-width: 640px){
.familyBox {margin: 0 auto;}
.familyBox ul{justify-content: space-around;}	
.familyBox ul li {width: 42%; margin: 10px auto; border: none;}
.familyBox ul li p{font-size: 11px;}
.familyBoxTtl {
    font-size: 16px; text-align: center;}
.familyBoxTtl::after {display: none;}
	.familyBox,
	.keypersonBox{width: 100%;}
	.item_reverse-sp{flex-direction: column-reverse;}
	.keyperson-img{max-width: 150px; margin: 10px auto 0;}
	.keypersonBox{margin:30px auto 60px;}
}

/*-------------------------
「main.png」の調整
-------------------------*/

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

  .p-zoomPositionitem {
    /*overflow-y: auto;*/
		max-width: 780px;
		width:100%;
    margin: 0 auto;
    overflow-x: scroll;
    position: relative;
    /*-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;*/
		padding: 0 0 15px 15px;
  }
	/*.p-locationPositionMap figure{
		-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	}*/
  .p-zoomPositionitem img{
    max-width: 780px;
  }
}
@media screen and (max-width: 640px) {
	.pinIcon{text-align: right;}
  .p-zoomPositionitem.js-swipeIcon .p-swipeIcon {
    display: block;
  }
}
.js-swipeIcon  {
  position: relative;
}
.js-swipeIcon .p-swipeIcon {
  display: none;
  background: url("../../img/pages/worker/common/swipeIcon.png") no-repeat center center;
  background-size: 110px auto;
  width: 108px;
  height: 118px;
  content: '';
  position: absolute;
  top:50%;
  left: 50%;
  animation: horizontal 1s ease-in-out infinite alternate;
  z-index: 100;
  -moz-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
@keyframes horizontal {
  0% { transform:translate(-30%,-50%); }
  100% { transform:translate(-70%,-50%); }
}

.mfp-close-btn-in .mfp-close {
    color: #fff !important;
    background: #000000;
}

/*-------------------------
前号リンク
-------------------------*/
.linksec_inner {margin: 0 auto; background: #f7e7e6; padding: 60px;max-width: 780px;}
.linksec_box {margin-bottom: 20px;}
.linksec_box:last-child {margin-bottom: 0;}
.linksec_box a {font-size: 16px; font-weight: bold;}

@media screen and (max-width: 640px) {
  .linksec_inner {padding: 20px;}
  .linksec_box {margin-bottom: 10px;}
  .linksec_box a {font-size: 14px;}
}


/*-------------------------
お問い合わせ
-------------------------*/
.QAsec{}
.QAsec .QA_inner{margin: 0 auto; background: #e1d5cf; padding: 60px;max-width: 780px;}

.QAttl{text-align: center;position: relative;margin: 0 auto 30px;}

.QAttl p {font-size: 20px;color: #e43131;font-weight: bold;
  align-items: center;
  display: flex;
  justify-content: center;
}
.QAttl p::before,
.QAttl p::after {
  background-color: #e43131;
  border-radius: 5px;
  content: "";
  height: 3px;
  width: 30px;
}
.QAttl p::before {
  margin-right: 10px;
  transform: rotate(60deg);
}
.QAttl p::after {
  margin-left: 10px;
  transform: rotate(-60deg);
}

.QAsec .flex{line-height: 1.5;margin: 10px auto 20px;}
.QAsec .flex .QA_right{width: 4%;/* font-size: 25px; *//* font-weight: bold; *//* text-align: center; */max-width: 16px;}
.QAsec .flex .QA_left{width: 94%;font-size: 16px;}
.QAsec .flex .QA_left h2 {font-weight: bold;}

.anotherQAText{}
.anotherQAText .aQA_right{width: 30%; text-align: center;}
.anotherQAText .aQA_left{width: 70%; text-align: center;}

.anotherQAText .aQA_right p{font-size: 20px; color: #7d4b42; font-weight: bold; margin-bottom: 15px;}
.anotherQAText .aQA_left p {font-size: 20px; font-weight: bold; margin: 10px auto;}

.anotherQAText .aQA_left .surveyBtn a {
  background: #fff;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
  max-width: 380px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: bold;
  color: #7d4b42;
  text-align: center;
}

.answerSubImg{}
.answerSubImg .QA_right{width: 30% !important; max-width: 400px !important; }
.answerSubImg .QA_left{}

.answerText{
    border-bottom: 2px solid #5a5a5a;
    padding: 0px 0 20px;
}
.answerText .QA_right{}
.answerText .QA_left{}


.livingQcall{}
.livingQcall h4{
    /*background: #ffffff;*/
    padding: 5px;
    text-align: center;
    max-width: 250px;
    margin: 0 auto;
    font-size: 18px;
    border-radius: 25px;
}
.livingQcall h4 strong{color: #e43131;}
.livingQcall p:nth-child(3){padding-top: 15px;}
.livingQcall p:nth-child(3) span{color: #F0911E; font-size: 16px; font-weight: bold;}
.livingQcall p:nth-child(4){padding-top: 10px;}
.livingQcall p:nth-child(4) span{color: #92C200; font-size: 16px; font-weight: bold;}

.QRcode {
  background: #86CFD1;
  padding: 10px 30px;
  text-align: center;
  max-width: 300px;
  margin: 0 auto 30px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.QRcode p{font-size: 14px; color: #fff; font-weight: bold;}
.QRcode p:nth-child(2){color: #86CFD1; background: #fff; border-radius: 25px; max-width: 100px; margin: 0 auto;}
.QRcode img {width: 30%; height: 100%;}

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

}

@media screen and (max-width: 640px){
	.QAsec .QA_inner{padding: 20px;}	
.QAsec .QAinner {padding: 30px 20px;}
	.QAsec .flex .QA_right {width: 13%;}

.QAsec .flex .QA_left {
    width: 85%;
    font-size: 14px;
}
	.QAttl p{font-size: 17px;}
	
.answerSubImg .QA_right{width: 34% !important;}
.answerSubImg .QA_left{width: 100% !important;}

.anotherQAText{}
.anotherQAText .aQA_right{width: 100%; margin-bottom: 10px;}
.anotherQAText .aQA_left{width: 100%;}

.anotherQAText .aQA_right p{font-size: 14px; color: #009d8a; font-weight: bold; margin-bottom: 15px;}
.anotherQAText .aQA_left p {font-size: 14px; font-weight: bold; margin: 10px auto;}
.anotherQAText .aQA_left .surveyBtn a {font-size: 14px;}
}

/*-------------------------
次号の特集
-------------------------*/
.nextVol {}
.nextVolIcon{text-align: center;margin: -50px auto 15px;}
.nextVol .nextVol_inner{
    max-width: 540px;
    font-size: 26px;
    font-weight: bold;
    border: 1px solid #000000;
    padding: 20px 30px 20px;
	margin: 0 auto;
    }

.nextVol_no{width: 30%;}
.nextVol_text{width: 68%;}

.nomura_pt_research{
	max-width: 540px;
	margin: 60px auto;
	}
.nomura_pt_research p{font-weight: bold;line-height: 1.8;text-align: center;}
.nomura_pt_research p a{color: #2196f3;font-weight: bold;}
.nomura_pt_research figure{}
.nomura_pt_research .surveyBtnWrap{margin: 30px auto; font-size: 20px;}
.nomura_pt_research .surveyBtnWrap .surveyBtn{}
.nomura_pt_research .surveyBtnWrap .surveyBtn p{}
.nomura_pt_research .surveyBtnWrap .surveyBtn a{
	background: #e43131;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    max-width: 380px;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}
.QAsec .inquiry {text-align: center; width: 100%; margin: 0 auto 30px;}
.dotsWrap{
    padding: 20px 0;
    border-top: 4px dotted #e18cad;
    border-bottom: 4px dotted #e18cad;
}
.dotsWrap p{margin: 20px auto 0; font-size: 24px;}

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

}

@media screen and (max-width: 640px){
	.nextVol .nextVol_inner {font-size: 22px;}
.nextVol_no,
.nextVol_text{ width: 100%;text-align: center;}
.nextVol_no{max-width: 90px; margin: 0 auto 10px;}
	
.nomura_pt_research p {font-size: 15px;}
}