@charset "utf-8";

/***************************************************************************

  FV

***************************************************************************/
section.concept {
  width: 100%;
  background: url(../images/portal/fv_bg.jpg) no-repeat center top;
  background-size: cover;
  margin: 0 0 0;
  padding: calc(125px + 2vw) 0 8vw;
}

.concept .wrap {
  width: 60%;
}

.conceptCnt {
  width: 100%;
  text-align: center;
}

.conceptCnt h1 {
  width: 66%;
  margin: 0 auto 7%;
}

.conceptCnt h2 {
  width: 100%;
  margin: 0 auto 2%;
}

.conceptCnt .fvImg {
  width: 70%;
  margin: 0 auto 3%;
}

.conceptCnt .fvImg span {
  display: block;
  text-align: right;
  font-size: 0.8vw;
  letter-spacing: 0.025em;
  line-height: 2.1;
  padding: 0.2em 0 0 0;
  font-weight: 400;
  color: #925e45;
}

.conceptCnt h3 {
  width: 25%;
  margin: 0 auto 4%;
}

.conceptCnt img {
  width: 100%;
  -webkit-backface-visibility: hidden;
}

.conceptCnt strong {
  font-size: 1.4vw;
  color: #d60066;
  font-weight: bold;
  padding-bottom: 5%;
  display: block;
}

.conceptCnt p.fvTxt {
  font-size: 1.1vw;
  color: #d60066;
  font-weight: bold;
  padding-bottom: 5%;
  display: block;
  line-height: 2.57em;
}

@media screen and (max-width: 767px) {
  section.concept {
    background: url(../images/portal/fv_bg_sp.jpg) #fceef4 no-repeat center 60px;
    background-size: 100vw;
    padding: calc(125px + 2vw) 0 0;
  }

  .concept .wrap {
    width: 96%;
  }

  .conceptCnt h1 {
    width: 40%;
    margin: 0 auto 7%;
  }

  .conceptCnt .fvImg {
    width: 84%;
    margin: 0 auto 5%;
  }

  .conceptCnt .fvImg span {
    font-size: 2.5vw;
  }

  .conceptCnt h3 {
    width: 32%;
    margin: 0 auto 4%;
  }

  .conceptCnt strong {
    font-size: 4.8vw;
    padding-bottom: 7%;
  }

  .conceptCnt p.fvTxt {
    font-size: 3.8vw;
    padding-bottom: 7%;
    line-height: 2em;
  }

  .concept .fvImgUnder img {
    width: 100%;
  }
}

/***************************************************************************

  ニュース

***************************************************************************/
.ptlNews {
  width: 100%;
  background: url(../images/portal/ptl_news_bgtop.png) no-repeat center top;
  background-size: contain;
}

.ptlNews .wrap {
  width: 100%;
  max-width: 100%;
  background: url(../images/portal/ptl_news_bgbtm.png) no-repeat center bottom;
  background-size: contain;
}

.ptlNews .ptlNewsCnt {
  width: 80%;
  margin: 0 auto;
  padding: 10% 0;
}

.ptlNews h2 {
  width: 50%;
  max-width: 700px;
  margin: 0 auto 2%;
  text-align: center;
}

.ptlNews h2 img {
  width: 25%;
}

.ptlNews span {
  width: 100%;
  margin: 0 0 2%;
  display: block;
}

.ptlNews span img {
  width: 100%;
}

.ptlNews .ptlNewsList {
  width: 100%;
  margin: 0 auto 2%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
}

.ptlNews .ptlNewsList:after {
  content: "";
  display: block;
  width: 23.5%;
}

.ptlNews .ptlNewsList:before {
  content: "";
  display: block;
  width: 23.5%;
  order: 1;
}

.ptlNews li {
  width: 23.5%;
  margin-bottom: 3%;
}

.ptlNews .imgBox {
  position: relative;
  padding-top: 62.5%;
  height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 7%;
}

.ptlNews .imgBox img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  height: auto;
  transform: translateY(-50%);
}

.ptlNews strong {
  margin-bottom: 7%;
  display: block;
  color: #d60056;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}

.ptlNews strong span {
  font-size: 1.4rem;
}

.ptlNews p {
  color: #ec88a4;
  font-size: 1.3rem;
  line-height: 2em;
  letter-spacing: 0.075em;
  padding: 0 0.5em 0 0;
}

@media screen and (max-width: 767px) {
  .ptlNews .ptlNewsCnt {
    width: 100%;
    margin: 0 auto;
    padding: 14% 0;
  }

  .ptlNews h2 {
    width: 60%;
    margin-bottom: 4%;
  }

  .ptlNews h2 img {
    width: 40%;
  }

  .ptlNews span {
    width: 100%;
    margin: 0;
    display: block;
  }

  .ptlNews span img {
    width: 100%;
  }

  .ptlNews .ptlNewsList {
    width: 100%;
    margin: 0 auto 2%;
    flex-wrap: nowrap;
  }

  .ptlNews .ptlNewsList:after {
    width: 100%;
  }

  .ptlNews .ptlNewsList:before {
    width: 100%;
  }

  .ptlNews li {
    padding: 0 10px;
    width: 100%;
  }

  .ptlNews .imgBox {
    margin-bottom: 5%;
  }

  .ptlNews strong {
    margin-bottom: 5%;
  }
}

/***************************************************************************

  プロジェクト

***************************************************************************/
.ptlProject {
  width: 100%;
  background: url(../images/portal/ptl_pjt_bg.jpg) no-repeat center 50%;
  background-size: cover;
}

.ptlProject .grdOvr {
  width: 100%;
  background: linear-gradient(to top, rgba(252, 238, 244, 1), rgba(252, 238, 244, 0) 10%);
}

.ptlProject .wrap {
  width: 87%;
  max-width: 87%;
  margin: 0 auto;
  padding: 5% 0 6%;
}

.ptlProject h2 {
  width: 100%;
  margin: 0 auto 4%;
  text-align: center;
}

.ptlProject h2 img {
  width: 15%;
}

.ptlProject h2 span {
  width: 100%;
  display: block;
  margin-bottom: 1%;
}

.ptlProject h2 span img {
  width: 100%;
}

.ptlProjectList {
  width: 100%;
  padding: 0 3.5%;
  margin: 0 0 2%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  position: relative;
}

.ptlProjectList:after {
  content: '';
  position: absolute;
  width: 30vw;
  height: 28vw;
  background: url(../images/portal/ptl_pjt_ovr.svg) no-repeat;
  background-size: contain;
  z-index: 10;
  bottom: -19.2vw;
  right: -4.2%;
}

.ptlProjectList li {
  width: 48%;
  background: #fff;
  border-radius: 20px;
  padding: 0 0 2em;
  margin: 0 0 5%;
  position: relative;
}

.ptlProjectList a {
  transition: 0.3s;
  opacity: 1;
  display: block;
}

.ptlProjectList a:hover {
  opacity: 0.7;
}

.pjtStatus {
  position: absolute;
  width: 15%;
  height: 0;
  top: -5%;
  right: -5%;
  z-index: 10;
}

.pjtStatus img {
  width: 100%;
  -webkit-backface-visibility: hidden;
}

.ptlProjectList li.pjtUnd .pjtImg:before {
  content: '';
  width: 100%;
  height: 101%;
  background: url(../images/portal/ptl_pjt_udc.svg) no-repeat center 80% rgba(255, 255, 255, 0.7);
  background-size: 70%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

.ptlProjectList li a {
  width: 100%;
}

.ptlProjectList li .pjtImg {
  position: relative;
  padding-top: 68.18%;
  height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.ptlProjectList li .pjtImg img {
  width: 100%;
  border-radius: 20px 20px 0 0;
  position: absolute;
  top: 50%;
  left: 0;
  height: auto;
  transform: translateY(-50%);
}

.pjtCnt {
  width: 100%;
  padding: 1.5em 1.3em 0.7em;
}

.pjtCnt strong {
  color: #d60056;
  font-size: 2.2rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.5em;
  line-height: 1.6;
  display: block;
}

.pjtCnt strong i {
  color: #d60056;
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

.pjtCnt p {
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.075em;
  color: #ec88a4;
  line-height: 1.7;
  margin-bottom: 1.5em;
}

span.pjtReadMore {
  font-size: 1.2rem;
  color: #fff;
  background: #d60056 url(../images/portal/ptl_pjt_arw.svg) no-repeat 90% center;
  background-size: 12px 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.4em 4em 0.65em 1.5em;
  border-radius: 2em;
}

@media screen and (max-width: 767px) {
  .ptlProject .wrap {
    width: 100%;
    max-width: 100%;
    padding: 6% 0 7%;
    overflow: hidden;
  }

  .ptlProject h2 {
    margin: 0 auto 5%;
  }

  .ptlProject h2 img {
    width: 26%;
  }

  .ptlProject h2 span {
    width: 120%;
    display: block;
    margin-bottom: 1%;
    -webkit-transform: translate(-6%, 0);
    transform: translate(-6%, 0);
  }

  .ptlProjectList {
    padding: 0 6%;
    display: block;
    margin-bottom: 25%;
  }

  .ptlProjectList:after {
    content: '';
    position: absolute;
    width: 90vw;
    height: 26.7vw;
    background: url(../images/portal/ptl_pjt_ovr_sp.svg) no-repeat;
    background-size: contain;
    bottom: -18vw;
    right: 2%;
  }

  .ptlProjectList li {
    width: 100%;
    margin-bottom: 12%;
  }

  .pjtStatus {
    width: 22%;
    top: -7%;
    right: 0;
  }

  .ptlProjectList li.pjtUnd .pjtImg:before {
    background: url(../images/portal/ptl_pjt_udc.svg) no-repeat center 60% rgba(255, 255, 255, 0.7);
    background-size: 60%;
  }

  .pjtCnt {
    padding: 0.8em 1.3em 0.7em;
  }

  .pjtCnt strong {
    letter-spacing: 0.1em;
  }

  span.pjtReadMore {
    font-size: 1.6rem;
    background: #d60056 url(../images/portal/ptl_pjt_arw.svg) no-repeat 90% center;
    background-size: 16px 16px;
  }
}

/***************************************************************************

  QandA

***************************************************************************/
.ptlFaq {
  width: 100%;
  background: #fceef4 url(../images/portal/ptl_faq_bg.png) no-repeat center bottom;
  background-size: contain;
}

.ptlFaq .wrap {
  width: 87%;
  max-width: 87%;
  margin: 0 auto;
  padding: 0 0 11%;
}

.ptlFaq h2 {
  width: 100%;
  margin: 0 auto 4%;
  text-align: center;
}

.ptlFaq h2 img {
  width: 15%;
}

.ptlFaq h2 span {
  width: 100%;
  display: block;
  margin-bottom: 1%;
}

.ptlFaq h2 span img {
  width: 100%;
  margin: 0 0 -7%;
}

.ptlFaqList {
  width: 90%;
  margin: 0 auto 4%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 3% 5% 0;
  color: #d40556;
  font-size: 1.3rem;
  line-height: 2;
  letter-spacing: 0.075em
}

.ptlFaqList dt {
  width: 100%;
  padding: 0.6em 0 3% 5.8rem;
  position: relative;
}

.ptlFaqList dt:before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  background: #d40556;
  border-radius: 5px;
  font-weight: bold;
  width: 1.8em;
  height: 1.8em;
  font-size: 2.2rem;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.6;
}

.ptlFaqList dd {
  width: 100%;
  padding: 0.6em 0 4% 5.8rem;
  margin: 0 0 3%;
  position: relative;
}

.ptlFaqList dd:before {
  content: 'A';
  position: absolute;
  left: 0;
  top: 0;
  color: #d40556;
  background: #fff;
  border: solid 1px #d40556;
  border-radius: 5px;
  font-weight: bold;
  width: 1.8em;
  height: 1.8em;
  font-size: 2.2rem;
  letter-spacing: -0.05em;
  text-align: center;
  line-height: 1.52;
  box-sizing: border-box;
}

.ptlFaqList dd:after {
  content: "";
  background-image:
    linear-gradient(to right, #d40556, #d40556 2px, transparent 2px, transparent 2px);
  background-size: 8px 2px;
  background-position: left bottom;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.ptlFaqList dd:last-child:after {
  background-image: none;
  background-size: 0;
}

@media screen and (max-width: 767px) {
  .ptlFaq .wrap {
    width: 100%;
    max-width: 100%;
    padding: 0 0 20%;
    overflow: hidden;
  }

  .ptlFaq h2 {
    margin: 0 auto 6%;
  }

  .ptlFaq h2 img {
    width: 26%;
  }

  .ptlFaq h2 span {
    width: 120%;
    -webkit-transform: translate(-6%, 0);
    transform: translate(-6%, 0);
  }

  .ptlFaq h2 span img {
    margin: 0 0 -8%;
  }

  .ptlFaqList {
    width: 88%;
    margin: 0 auto 10%;
    padding: 5% 5% 0;
    line-height: 1.6;
  }

  .ptlFaqList dt {
    padding: 0 0 10% 4rem;
  }

  .ptlFaqList dt:before {
    font-size: 1.5rem;
  }

  .ptlFaqList dd {
    padding: 0 0 10% 4rem;
    margin: 0 0 10%;
  }

  .ptlFaqList dd:before {
    font-size: 1.5rem;
  }

  .ptlFaqList dd:after {
    background-image:
      linear-gradient(to right, #d40556, #d40556 1px, transparent 1px, transparent 1px);
    background-size: 4px 1px;
  }

  .ptlFaqList dd:last-child {
    margin-bottom: 0;
  }
}

/***************************************************************************

  ギャラリー

***************************************************************************/
.ptlGallery {
  width: 100%;
  background: url(../images/portal/ptl_gal_bgtop.png) no-repeat center top;
  background-size: contain;
  margin: -14% 0 0;
  padding: 38% 0 0;
}

.ptlGallery .wrap {
  width: 100%;
  max-width: 100%;
  background: url(../images/portal/ptl_gal_bgbtm.png) no-repeat center bottom;
  background-size: contain;
  padding: 0 0 20%;
}

.ptlGallery .ptlGalleryCnt {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.ptlGallery .ptlGalleryCnt img {
  width: 100%;
  -webkit-backface-visibility: hidden;
}

.ptlGalBtmBox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}

/*
.ptlGallery {
	width: 100%;
	background: url(https://pj.housemate-p.jp/common/images/portal/ptl_gal_bgtop.png) no-repeat center top;
	background-size: contain;
	margin: -14% 0 0;
	padding: 38% 0 0;
}
.ptlGallery .wrap {
	width: 100%;
	max-width: 100%;
	background: url(https://pj.housemate-p.jp/common/images/portal/ptl_gal_bgbtm.png) no-repeat center bottom;
	background-size: contain;
	padding: 0 0 20%;
}
.ptlGallery .ptlGalleryCnt {
	width: 80%;
	margin: 0 auto;
	padding: 0.5% 0 0 0.5%;
	background: url(../images/portal/ptl_gal_cnt_bg.svg) no-repeat center top;
	background-size: cover;
}
.ptlGallery h2 {
	width: 100%;
	background: url(../images/portal/ptl_gal_ttl_bg.svg) no-repeat center top;
	background-size: contain;
	padding: 1.5% 0 8.5%;
	margin: 0 0 0 0;
	text-align: center;
}
.ptlGallery h2 img {
	width: 15%;
}
.ptlGalCpy {
	width: 70%;
	text-align: center;
	margin: 0 auto 1.5%;
}
.ptlGalSlidesBox {
	width: 100%;
	padding: 13% 0 0;
	position: relative;
	height: 0;
	margin: 0 0 0%;
}
.ptlGalSlidesBoxInner {
	width: 100%;
	padding: 0 1% 0 0.5%;
	position: absolute;
	height: 0;
	left: 0;
	top: 0;
	height: 119.3%;
	display: flex;
	justify-content: space-between;
}
.ptlGalSlidesBox img {
	width: auto;
	height: 96%;
}
.ptlGalBtmBox {
	padding: 5.8% 0 0;
	position: relative;
}
.ptlGalBtmBox:before {
	content: '';
	position: absolute;
	top: 7%;
	left: 21%;
	background: url(../images/portal/ptl_gal_lft.svg) no-repeat left center;
	background-size: contain;
	width: 15%;
	height: 100%;
}
.ptlGalBtmBox:after {
	content: '';
	position: absolute;
	top: 7%;
	right: 24.5%;
	background: url(../images/portal/ptl_gal_rht.svg) no-repeat left center;
	background-size: contain;
	width: 11%;
	height: 100%;
}*/
@media screen and (max-width: 767px) {
  .ptlGallery .ptlGalleryCnt {
    width: 88%;
  }

  .ptlGalBtmBox {
    bottom: 1vw;
  }

  .ptlGalBtmBox .toDetBtn {
    font-size: .8em;
    font-weight: 400;
  }

  .ptlGalBtmBox .toDetBtn a {
    padding: 2vw 10vw;
  }

  .ptlGalBtmBox .toDetBtn a span:after {
    font-size: .8em;
    top: .2em;
  }
}