@charset "utf-8";

footer {
  background: #fff;
}

.conceptBgBox {
  width: 100%;
  background: url(../images/concept/cct_btm_top.png) repeat-x center bottom;
  background-size: 80px 188px;
  padding: 0 0 50px;
  position: relative;
}

.projectBgBox {
  width: 100%;
  background: url(../images/project/pjt_btm_bg.png) repeat-x center bottom;
  background-size: 80px 188px;
  padding: 0 0 50px;
  position: relative;
}

.projectBgBoxOvr {
  width: 100%;
  background: url(../images/project/pjt_list_bg.jpg) no-repeat center bottom;
  background-size: cover;
  position: relative;
}

.projectDetBgBoxOvr {
  width: 100%;
  background: url(../images/project/pjt_det_bg.jpg) no-repeat center 99%;
  background-size: cover;
  position: relative;
}

@media screen and (max-width: 767px) {
  .conceptBgBox {
    background-size: 24px 38.4px;
    padding: 0 0 20px;
  }

  .projectBgBox {
    background-size: 24px 38.4px;
    padding: 0 0 20px;
  }

  .projectBgBoxOvr {
    width: 100%;
    background: url(../images/project/pjt_list_bg_sp.jpg) no-repeat center bottom;
    background-size: 100%;
    position: relative;
    padding: 0 0 15vw;
  }

  .projectDetBgBoxOvr {
    width: 100%;
    background: url(../images/project/pjt_list_bg_sp.jpg) no-repeat center bottom;
    background-size: 100%;
    position: relative;
  }
}

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

  マイメロディ ハウスとは

***************************************************************************/
/*************************************************
  コンセプト
*************************************************/
section.conceptTop {
  width: 100%;
  background: #fdecde;
  margin: 0 0;
  padding: calc(125px + 2vw) 0 0;
}

.conceptTop .wrap {
  width: 100%;
  max-width: 100%;
}

.conceptTop .ttlBlock {
  width: 95%;
  max-width: 95%;
  background: url(../images/concept/concept_ttl_bg.svg) no-repeat center top;
  background-size: contain;
  margin: 0 auto;
  padding: 21% 0 5%;
}

.conceptTop .ttlBlock h2 {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.conceptTop .ttlBlock h2 img {
  width: 34%;
}

.conceptTop .ttlBlock h2 span {
  display: block;
  font-size: 1.2vw;
  color: #925e45;
  font-weight: bold;
  margin: -1em 0 0;
}

.conceptTopCnt {
  width: 100%;
  background: url(../images/concept/concept_cnt_bg.jpg) no-repeat center top;
  background-size: cover;
  margin: 0 0 0;
  text-align: center;
  color: #925e45;
}

.conceptTopOvr {
  width: 100%;
  padding: 0 10% 19%;
  /*background: linear-gradient(to top, rgba(253,236,222,1), rgba(253,236,222,0) 10%);*/
}

.hmIlst01 {
  width: 34%;
  margin: -1% auto 5.5%;
}

.hmIlst02 {
  width: 39%;
  margin: 8% auto 6%;
}

.conceptTopCnt h3 {
  font-size: 2vw;
  font-weight: bold;
  margin-bottom: 5%;
}

.conceptTopCnt p {
  font-size: 1.4vw;
  font-weight: bold;
  margin-bottom: 5.5%;
  line-height: 2.2;
}

@media screen and (max-width: 767px) {
  section.conceptTop {
    padding: calc(70px + 2vw) 0 0;
  }

  .conceptTop .ttlBlock {
    height: 60vw;
    background: url(../images/concept/concept_ttl_bg_sp.svg) no-repeat center top;
    background-size: 95%;
  }

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

  .conceptTopOvr h2 img {
    width: 100%;
  }

  .conceptTopOvr h2 span {
    display: block;
    font-size: 2.0vw;
    color: #925e45;
    font-weight: bold;
    margin: -1.6em 0 0;
  }

  .conceptTopCnt {
    background-size: 120vw;
  }

  .conceptTopOvr {
    padding-bottom: 3%;
  }

  .hmIlst01 {
    width: 45%;
    margin: -10% auto 5.5%;
  }

  .hmIlst01 img {
    margin-top: -30%;
  }

  .hmIlst02 {
    width: 70%;
    margin: 8% auto;
  }

  .conceptTopCnt h3 {
    font-size: 4.8vw;
    margin-bottom: 7%;
  }

  .conceptTopCnt p {
    font-size: 3.4vw;
    margin-bottom: 7%;
    line-height: 2;
  }
}

/*************************************************
  ハウスデザイン
*************************************************/
section.houseDesign {
  width: 100%;
  background: #fdecde;
  margin: 0 0 0;
  padding: 0 0 0;
}

.houseDesign .wrap {
  width: 100%;
  max-width: 80%;
}

.exteriorblock {
  width: 100%;
}

.exteriorblock h3 {
  width: 35%;
  margin: 0 auto 2%;
  text-align: center;
}

.exteriorblock h3 span {
  font-size: 1.2vw;
  color: #925e45;
  margin: -1.1em 0 0;
  display: block;
  font-weight: bold;
  letter-spacing: 0.025em;
}

.exteriorblock dl {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 0 0 5%;
}

.exteriorblock dl dt {
  width: 55%;
}

.exteriorblock dl dt img {
  width: 100%;
}

.exteriorblock dl dd {
  width: 38%;
  padding: 3% 0 0 0;
}

.exteriorblock dl dd strong {
  width: 40%;
  display: block;
}

.exteriorblock dl dd strong img {
  width: 100%;
}

.exteriorblock dl dd strong span {
  font-size: 1vw;
  color: #925e45;
  margin: 0.5em 0 1.2em;
  display: block;
  font-weight: bold;
  letter-spacing: 0.025em;
}

.exteriorblock dl dd p {
  font-size: 1.42vw;
  color: #925e45;
  font-weight: bold;
  letter-spacing: 0.025em;
  line-height: 2.1;
  padding: 0 12% 0 0;
}

.exteriorblock dl dd p span {
  display: block;
  font-size: 0.8vw;
  letter-spacing: 0.025em;
  line-height: 2.1;
  padding: 0.5em 0 0 0;
  font-weight: 400;
}

.hdNrmBlock {
  width: 100%;
}

.hdNrmBlock dl {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  margin-bottom: 3%;
}

.hdNrmBlock dl dt {
  width: 52%;
  padding: 2% 0 0;
}

.hdNrmBlock dl dt img {
  width: 100%;
}

.hdNrmBlock dl dd {
  width: 34%;
  padding: 0 0 0 0;
}

.hdNrmBlock dl dd strong {
  width: 75%;
  display: block;
}

.hdNrmBlock dl dd strong.rnStrong {
  width: 86%;
}

.hdNrmBlock dl dd strong img {
  width: 100%;
}

.hdNrmBlock dl dd strong span {
  font-size: 1vw;
  color: #925e45;
  margin: 0.5em 0 1.2em;
  display: block;
  font-weight: bold;
  letter-spacing: 0.025em;
}

.hdNrmBlock dl dd p {
  font-size: 1.42vw;
  color: #925e45;
  font-weight: bold;
  letter-spacing: 0.025em;
  line-height: 2.1;
  padding: 0 0 0 0;
}

.lightBoxArea {
  width: 100%;
  padding: 0 0 8%;
}

.hdNrmBlock:last-of-type {
  padding: 0 0 0;
}

.lightBoxArea p {
  font-size: 1.42vw;
  color: #925e45;
  font-weight: bold;
  letter-spacing: 0.025em;
  line-height: 2.1;
  padding: 0 0 1em 0;
}

.lightBoxArea p span {
  font-size: 0.8vw;
  color: #925e45;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 2.1;
  padding: 0 0 1em 0;
}

.lightBoxArea ul {
  width: 100%;
}

.lightBoxArea ul li {
  width: 18.4%;
  margin: 0 2% 2% 0;
  float: left;
}

.lightBoxArea ul li:nth-child(5n) {
  margin: 0 0 2% 0;
}

.lightBoxArea ul li img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .houseDesign .wrap {
    max-width: 88%;
  }

  .exteriorblock h3 {
    width: 57%;
    margin: 0 auto 7%;
  }

  .exteriorblock h3 span {
    font-size: 2.8vw;
    margin: .4em 0 0;
  }

  .exteriorblock dl {
    display: block;
    margin: 0 0 5%;
  }

  .exteriorblock dl dt {
    width: 100%;
  }

  .exteriorblock dl dd {
    width: 100%;
    padding: 3% 0 0 0;
  }

  .exteriorblock dl dd strong {
    width: 34%;
  }

  .exteriorblock dl dd strong img {
    width: 100%;
  }

  .exteriorblock dl dd strong span {
    margin: 0.4em 0 1em;
    font-size: 2.8vw;
  }

  .exteriorblock dl dd p {
    font-size: 3.8vw;
    line-height: 1.7;
    font-weight: normal;
    padding: 0;
  }

.exteriorblock dl dd p span {
    font-size: 2.5vw;
}

  .hdNrmBlock dl {
    display: block;
    margin-bottom: 7%;
  }

  .hdNrmBlock dl dt {
    width: 100%;
    padding: 0 0 7% 0;
  }

  .hdNrmBlock dl dd {
    width: 100%;
    padding: 0 0 0 0;
  }

  .hdNrmBlock dl dd strong {
    width: 56%;
  }

  .hdNrmBlock dl dd strong.rnStrong {
    width: 63%;
  }

  .hdNrmBlock dl dd strong span {
    font-size: 2.8vw;
    margin: 0.4em 0 1em;
  }

  .hdNrmBlock dl dd strong.rnStrong span {
    margin: .5em 0 2em;
  }

  .hdNrmBlock dl dd p {
    font-size: 3.8vw;
    font-weight: normal;
    line-height: 1.7;
  }

  .lightBoxArea p {
    font-size: 3.8vw;
    font-weight: normal;
  }

  .lightBoxArea p span {
    font-size: 2.5vw;
    font-weight: normal;
  }

  .lightBoxArea ul li {
    width: 47%;
    margin: 0 6% 6% 0;
  }

  .lightBoxArea ul li:nth-child(even) {
    margin-right: 0;
  }

  .lightBoxArea ul li:nth-child(5n) {
    margin: 0 6% 6% 0;
  }
}

/*************************************************
  ボトム
*************************************************/
.cctBtm {
  width: 100%;
  background: url(../images/concept/cct_btm_btm.png) repeat-x center bottom;
  background-size: 80px 188px;
  padding: 0 0 50px;
  margin: -50px 0 0;
}

.cctBtm .wrap {
  width: 100%;
  max-width: 100%;
  background: #fefce6 url(../images/concept/cct_btm_bg.png) no-repeat center 70%;
  background-size: 100%;
  padding: 10% 0 7%;
}

.cctBtm ul {
  width: 30%;
  margin: 0 auto;
}

.cctBtm li {
  margin: 0 auto 0;
  display: block;
  font-size: 1.1vw;
  padding: 0 0 7%;
  text-align: center;
}

.cctBtm li:last-child {
  padding: 0 0 0;
}

.cctBtm a {
  color: #fff;
  width: 17em;
  background: #925e45;
  display: inline-block;
  font-weight: bold;
  padding: 0.9em 0 1em;
  border-radius: 5em;
  transition: 0.3s;
}

.cctBtm a:hover {
  opacity: 0.7;
}

.cctBtm span {
  position: relative;
  padding-right: 1.4em;
  display: inline-block;
}

.cctBtm a span:after {
  content: '▲';
  transform: rotate(90deg);
  font-size: 1vw;
  position: absolute;
  right: 0;
  top: 0.15em;
}

@media screen and (max-width: 767px) {
  .cctBtm {
    background-size: 24px 38.4px;
    padding: 0 0 20px;
    margin: -20px 0 0;
  }

  .cctBtm .wrap {
    background-position: center 100%;
    padding: 16% 0 7%;
  }

  .cctBtm ul {
    width: 80%;
    margin: 0 auto 20vw auto;
  }

  .cctBtm li {
    font-size: 4vw;
    padding-bottom: 10%;
  }

  .cctBtm a {
    width: 100%;
  }

  .cctBtm a span:after {
    font-size: 4vw;
    top: 0.06em;
  }
}

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

  Q and A

***************************************************************************/
.faqBgBox {
  width: 100%;
  background: url(../images/faq/faq_btm_bg.png) repeat-x center bottom;
  background-size: 80px 188px;
  padding: 0 0 50px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .faqBgBox {
    background-size: 24px 38.4px;
    padding: 0 0 20px;
  }
}

/*************************************************
  一覧
*************************************************/
.faqBgBoxInner {
  width: 100%;
  background: #fefce6 url(../images/faq/faq_bg.png) no-repeat center calc(125px + 1vw);
  background-size: cover;
}

.faqBgBoxOvr {
  width: 100%;
  background: linear-gradient(to top, rgba(254, 252, 230, 1), rgba(254, 252, 230, 0) 10%);
}

section.faqTtlBox {
  width: 100%;
  margin: 0 0;
  padding: calc(125px + 4vw) 0 0;
}

.faqTtlBox .wrap {
  width: 100%;
  max-width: 100%;
}

.faqTtlBox .ttlBlock {
  width: 100%;
  max-width: 100%;
  background: url(../images/faq/faq_ttl_ilst.svg) no-repeat center top;
  background-size: 8.5%;
  margin: 0 auto;
  padding: 20% 0 0;
}

.faqTtlBox .ttlBlock h2 {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.faqTtlBox .ttlBlock h2 img {
  width: 28%;
}

.faqTtlBox .ttlBlock h2 span {
  display: block;
  font-size: 1.2vw;
  color: #d60066;
  font-weight: bold;
  margin: 0 0 0;
}

.lwrfaqBox {
  width: 100%;
  padding: 2.5% 0 10%;
}

.lwrfaqBox .wrap {
  width: 80%;
  max-width: 1080px;
}

.lwrfaqList {
  width: 100%;
  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: #d60066;
  font-size: 1.3rem;
  line-height: 2;
  letter-spacing: 0.075em
}

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

.lwrfaqList dt:before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  background: #d60066;
  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;
}

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

.lwrfaqList dd:before {
  content: 'A';
  position: absolute;
  left: 0;
  top: 0;
  color: #d60066;
  background: #fff;
  border: solid 1px #d60066;
  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;
}

.lwrfaqList dd:after {
  content: "";
  background-image:
    linear-gradient(to right, #d60066, #d60066 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;
}

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

@media screen and (max-width: 767px) {
  .faqBgBoxInner {
    background-position: center calc(70px + 1vw);
    background-size: 100vw;
  }

  .faqBgBoxOvr {
    width: 100%;
    background: linear-gradient(to top, rgba(254, 252, 230, 1), rgba(254, 252, 230, 0) 10%);
  }

  section.faqTtlBox {
    padding: calc(96px + 4vw) 0 0;
  }

  .faqTtlBox .ttlBlock {
    height: 52vw;
    background: url(../images/faq/faq_ttl_ilst.svg) no-repeat center top;
    background-size: 16%;
    margin: 0 auto;
    padding: 37% 0 0;
  }

  .faqTtlBox .ttlBlock h2 {
    width: 26%;
  }

  .faqTtlBox .ttlBlock h2 img {
    width: 100%;
  }

  .faqTtlBox .ttlBlock h2 span {
    font-weight: normal;
  }

  .lwrfaqBox .wrap {
    width: 88%;
  }

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

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

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

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

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

  .lwrfaqList 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;
  }
}

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

  Gallery

***************************************************************************/
.galleryBgBox {
  width: 100%;
  background: url(../images/gallery/gly_btm_bg.png) repeat-x center bottom;
  background-size: 80px 188px;
  padding: 0 0 55px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .galleryBgBox {
    background-size: 24px 38.4px;
    padding: 0 0 20px;
  }
}

/*************************************************
  一覧
*************************************************/
.galleryBgBoxInner {
  width: 100%;
  background: #fefce6 url(../images/gallery/gly_bg.png) repeat center calc(125px + 1vw);
  background-size: 27px;
}

section.galleryTtlBox {
  width: 100%;
  margin: 0 0;
  padding: calc(125px + 4vw) 0 0;
}

.galleryTtlBox .wrap {
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.galleryTtlBox .ttlBlock {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 0;
}

.galleryTtlBox .ttlBlock h2 {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.galleryTtlBox .ttlBlock h2 img {
  width: 29%;
}

.galleryTtlBox .ttlBlock h2 span {
  display: block;
  font-size: 1.2vw;
  color: #925e45;
  font-weight: bold;
  margin: -1.3em 0 0;
}

.galleryTtlBox p {
  display: block;
  font-size: 1.5vw;
  line-height: 2.2;
  color: #925e45;
  font-weight: bold;
  margin: 2% auto 3.5% auto;
  letter-spacing: 0.125em;
}

.galleryCntBox {
  width: 100%;
  padding: 0 0 5%;
}

.galleryCntBox .wrap {
  width: 80%;
  max-width: 1080px;
}

.galFstBlock,
.galSndBlock {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 6%;
}

.galFstBlock li {
  width: 32.3%;
  margin: 0 0 4%;
}

.galFstBlock li:first-child {
  width: 100%;
}

.galFstBlock li img,
.galSndBlock li img {
  width: 100%;
}

.galSndBlock li {
  width: 23.0%;
  margin: 0 0 2%;
}

.galleryCntBox p {
  display: block;
  font-size: 1.2vw;
  color: #925e45;
  font-weight: bold;
  margin: 0 0 1em;
}

@media screen and (max-width: 767px) {
  .galleryBgBoxInner {
    background-size: 10px;
  }

  section.galleryTtlBox {
    padding: calc(96px + 4vw) 0 0;
  }

  .galleryTtlBox .ttlBlock h2 {
    width: 28%;
  }

  .galleryTtlBox .ttlBlock h2 img {
    width: 100%;
  }

  .galleryTtlBox p {
    font-size: 4.4vw;
    margin: 2% auto 7%;
    letter-spacing: 0em;
  }

  .galleryCntBox .wrap {
    width: 88%;
  }

  .galFstBlock,
  .galSndBlock {
    margin: 0;
  }

  .galFstBlock li {
    width: 100%;
    margin: 0 0 7%;
  }

  .galSndBlock li {
    width: 47%;
    margin: 0 6% 6% 0;
  }

  .galSndBlock li:nth-child(even) {
    margin-right: 0;
  }

  .galleryCntBox p {
    margin: 0 0 2em;
  }
}

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

  プロジェクト

***************************************************************************/
/*************************************************
  一覧
*************************************************/
section.projectTtlBox {
  width: 100%;
  background: #deecc3;
  margin: 0 0;
  padding: calc(125px + 2vw) 0 0;
}

.projectTtlBox .wrap {
  width: 100%;
  max-width: 100%;
}

.projectTtlBox .ttlBlock {
  width: 100%;
  max-width: 100%;
  background: url(../images/project/project_ttl_bg.svg) no-repeat center top;
  background-size: contain;
  margin: 0 auto;
  padding: 22.5% 0 0;
}

.projectTtlBox .ttlBlock h2 {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.projectTtlBox .ttlBlock h2 img {
  width: 28%;
}

.projectTtlBox .ttlBlock h2 span {
  display: block;
  font-size: 1.2vw;
  color: #925e45;
  font-weight: bold;
  margin: 0 0 0;
}

.projectListBox {
  width: 100%;
  background: linear-gradient(to bottom, rgba(222, 236, 195, 1), rgba(222, 236, 195, 0) 10%);
}

.projectListBox .wrap {
  width: 87%;
  max-width: 87%;
  margin: 0 auto;
  padding: 4% 0 12%;
}

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

.lwrProjectList li {
  width: 48%;
  background: #fff;
  border-radius: 22px;
  padding: 0 0 2em;
  margin: 0 0 5%;
  position: relative;
  border: solid 3px #925e45;
}

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

.lwrProjectList li a:hover {
  opacity: 0.7;
}

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

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

.lwrProjectList li.pjtUnd .pjtImg:before {
  content: '';
  width: 100%;
  height: 100%;
  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;
}

.lwrProjectList li a {
  width: 100%;
}

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

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

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

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

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

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

span.pjtReadMore {
  font-size: 1.2rem;
  color: #fff;
  background: #925e45 url(../images/project/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) {
  section.projectTtlBox {
    padding: calc(96px + 2vw) 0 0;
  }

  .projectTtlBox .ttlBlock {
    height: 60vw;
    background: url(../images/project/project_ttl_bg_sp.svg) no-repeat center top;
    background-size: 96vw;
    padding: 36% 0 0;
  }

  .projectTtlBox .ttlBlock h2 {
    width: 27%;
  }

  .projectTtlBox .ttlBlock h2 img {
    width: 100%;
  }

  .projectListBox .wrap {
    width: 88%;
    max-width: 88%;
    padding: 0 0 12%;
  }

  .lwrProjectList {
    padding: 0 3.5%;
    margin: 0 0 2%;
    display: block;
  }

  .lwrProjectList li {
    width: 100%;
    margin: 0 0 7%;
    padding-bottom: 1em;
    border: solid 2px #925e45;
  }

  .pjtStatus {
    width: 18%;
    top: -5%;
    right: -2%;
    z-index: 10;
  }

  span.pjtReadMore {
    font-size: 1.6rem;
    background-size: 16px 16px;
  }
}

/*************************************************
  詳細
*************************************************/
.projectDetBgBoxOvr .projectListBox .wrap {
  padding: 4% 0 7%
}

.projectDetKv {
  width: 100%;
  background: #deecc3;
  margin: 0 0;
  padding: calc(125px + 2vw) 0 0;
}

.projectDetKv .wrap {
  width: 80%;
  max-width: 80%;
}

.projectDetKv h2 {
  width: 100%;
  margin: 1% 0 3%;
	border-radius: 15px;
}

.projectDetKv h2 img {
  width: 100%;
	border-radius: 15px;
	-webkit-backface-visibility: hidden;
}
.projectDetKv h2.pjtUnd:before {
  content: '';
  width: 100%;
  height: 100%;
  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;
	border-radius: 15px;
}

.projectDetCatCnt {
  width: 100%;
}

.projectDetCatCnt p {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  padding: 0 0 1em;
  line-height: 2.2em;
  color: #925e45;
}

section.projectDetTtlBox {
  width: 100%;
  background: #deecc3;
  margin: 0 0;
}

.projectDetTtlBox .wrap {
  width: 100%;
  max-width: 100%;
}

.projectDetTtlBox .ttlBlock {
  width: 100%;
  max-width: 100%;
  background: url(../images/project/project_ttl_bg.svg) no-repeat center top;
  background-size: contain;
  margin: 0 auto;
  padding: 22.5% 0 0;
}

.projectDetTtlBox .ttlBlock h2 {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.projectDetTtlBox .ttlBlock h2 img {
  width: 55%;
}

.projectDetTtlBox .ttlBlock h2 span {
  display: block;
  font-size: 1.2vw;
  color: #925e45;
  font-weight: bold;
  margin: 0 0 0;
}

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

.lwrProjectDetList li {
  width: 49%;
  background: #fff;
  border-radius: 22px;
  padding: 1% 0 1em;
  margin: 0 0 2%;
  position: relative;
  border: solid 3px #925e45;
}

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

.lwrProjectDetList li .pjtImg {
  position: relative;
  padding-top: 66.25%;
  height: 0;
  width: 93%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 15px;
}

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

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

.lwrProjectDetList .pjtStatus {
  top: -3%;
  right: -2%;
}

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

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

.lwrProjectDetList p {
  color: #925e45;
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.075em;
  line-height: 2;
  margin-bottom: 1.5em;
}

.gaiyouTblWrap {
  width: 93%;
  margin: 0 auto 8%;
  padding: 5% 0;
  font-size: 2vw;
  text-align: left;
}

.gaiyouTblWrap table {
  width: 100%;
	border: solid 2px #925e45;
}

.gaiyouTblWrap table th,
.gaiyouTblWrap table td {
  padding: 1em 1.5em;
	font-size: 1.6rem;
	background: #fff;
	border-bottom: solid 2px #925e45;
}

.gaiyouTblWrap table th {
	width: 25%;
	background: #f6e4dc;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: #925e45;
	font-weight: bold;
}

.pjtSndCnt {
  width: 93%;
  margin: 0 auto 8%;
  padding: 10%;
  background: #eee;
  font-size: 2vw;
  color: #fff;
  text-align: center;
}

.pjtSndCnt p {
  color: #925e45;
  font-size: 2vw;
  font-weight: bold;
}

.toHmsBtn {
  margin: 0 auto 0;
  display: block;
  font-size: 1.1vw;
  padding: 0 0 0;
  text-align: center;
}

.toHmsBtn a {
  color: #fff;
  background: #d60066;
  display: inline-block;
  padding: 0.9em 5em 1em;
  border-radius: 5em;
  transition: 0.3s;
}

.toHmsBtn a:hover {
  opacity: 0.7;
}

.toHmsBtn a span {
  position: relative;
  padding-right: 1.4em;
  display: inline-block;
}

.toHmsBtn a span:after {
  content: '▲';
  transform: rotate(90deg);
  font-size: 1vw;
  position: absolute;
  right: 0;
  top: 0.15em;
}

@media screen and (max-width: 767px) {
  .projectDetBgBoxOvr .projectListBox .wrap {
    padding-top: 0;
  }

  .projectDetKv {
    padding: calc(96px + 2vw) 0 0;
  }

  .projectDetKv .wrap {
    width: 88%;
    max-width: 88%;
  }

  .projectDetCatCnt p {
    font-size: 1.2rem;
    padding: 0 0 7%;
    line-height: 1.8;
  }

  .projectDetTtlBox .ttlBlock {
    height: 58vw;
    background: url(../images/project/project_ttl_bg_sp.svg) no-repeat center top;
    background-size: 96vw;
    padding: 36% 0 0;
  }

  .projectDetTtlBox .ttlBlock h2 {
    width: 52%;
  }

  .projectDetTtlBox .ttlBlock h2 img {
    width: 100%;
  }

  .lwrProjectDetList {
    padding: 0;
    margin: 0 0 2%;
    display: block;
  }

  .lwrProjectDetList li {
    width: 100%;
    margin: 0 0 7%;
    border: solid 2px #925e45;
  }

  .lwrProjectDetList li.pjtUnd .pjtImg:before {
    background-position: center 50%;
  }

  .lwrProjectDetList li .pjtImg {
    width: 88%;
    border-radius: 10px;
  }

  .lwrProjectDetList li .pjtImg img {
    border-radius: 10px;
  }

  .lwrProjectDetList .pjtCnt {
    padding-top: 0;
  }

  .lwrProjectDetList p {
    font-size: 1.4rem;
    line-height: 1.7;
    margin-bottom: 0;
  }

  .pjtSndCnt {
    width: 100%;
  }

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

  .toHmsBtn {
    font-weight: bold;
    font-size: 3.6vw;
    padding: 0 0 0;
  }

  .toHmsBtn a {
    width: 100%;
    padding: 1.2em 3em 1.4em;
  }

  .toHmsBtn a span:after {
    font-size: 3.6vw;
    top: .06em;
  }

  .projectUnderBox {
    height: 36vw;
    background: url(../images/project/project_bg_under.png) #deecc3 no-repeat center top;
    background-size: 120%;
  }
.gaiyouTblWrap {
  width: 100%;
  margin: 0 auto 10%;
  padding: 0;
}

.gaiyouTblWrap table {
  width: 100%;
}

.gaiyouTblWrap table th,
.gaiyouTblWrap table td {
  padding: 0.5em 1.2em;
	font-size: 1.4rem;
}

.gaiyouTblWrap table th {
	width: 30%;
}
}

@media screen and (max-width: 520px) {
.gaiyouTblWrap {
  width: 100%;
  margin: 0 auto 10%;
  padding: 0;
	border-radius: 10px;
}

.gaiyouTblWrap table {
  width: 100%;
	border-top: solid 2px #925e45;
	border-left: solid 2px #925e45;
	border-right: solid 2px #925e45;
	border-bottom: 0;
}

.gaiyouTblWrap table th,
.gaiyouTblWrap table td {
  padding: 0.5em 1.2em;
	font-size: 1.4rem;
	display: block;
}

.gaiyouTblWrap table th {
	width: 100%;
}
}
/*****************************************
  ページネーション
*****************************************/
.page_navi {
  width: 100%;
  display: inline-block;
  text-align: center;
  clear: both;
  font-size: 1.4rem;
  margin: 0 0 6%;
  padding: 10px 0 !important;
  list-style: none !important;
}

.page_navi li {
  display: inline;
  list-style: none !important;
  background: none !important;
  line-height: 1;
  padding: 0 !important;
  margin: 0 4px !important;
  clear: none;
}

.page_navi li.current span {
  font-weight: 600;
  display: inline-block;
  padding: 9px 13px 11px;
  background: #fff;
  border-radius: 2em;
  border: solid 1px #925e45;
  color: #925e45;
}

.page_navi li a {
  color: #fff;
  padding: 9px 13px 11px;
  background: #925e45;
  display: inline-block;
  text-decoration: none;
  transition: 0.3s;
  border-radius: 2em;
  border: solid 1px #925e45;
  opacity: 1;
  font-weight: bold;
}

.page_navi li a:hover {
  opacity: 0.7;
}

.page_navi li.page_nums span {
  color: #fff;
  background: #f3f3f3;
  display: inline-block;
  border: solid 1px #333333;
}

.page_navi li.previous a,
.page_navi li.next a {
  color: #925e45;
  background: initial;
  display: inline-block;
  border: none;
}

.page_navi li.previous a {
  padding-left: 2.1em;
  background: url(../images/project/pjt_prev.svg) no-repeat left center;
  background-size: 1.6em;
}

.page_navi li.next a {
  padding-right: 2.2em;
  background: url(../images/project/pjt_next.svg) no-repeat right center;
  background-size: 1.6em;
}

@media screen and (max-width: 767px) {
  .page_navi {
    font-size: 1.0rem;
  }

  .page_navi li {
    vertical-align: middle;
  }

  .page_navi li.previous a,
  .page_navi li.next a {
    vertical-align: middle;
  }
}

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

  lightbox

***************************************************************************/
.lightbox .lb-image {
  border-color: #f3b0c0 !important;
  background: #935e42;
}

.lb-container {}