@charset "UTF-8";

/* =================================
  Common Overwrite
================================= */
.detail main .wrap {
  padding: 0;
}
#bread {
  top: 10px;
  left: 0;
}
#bread ul { left: 0; }

/* =================================
  Detail
================================= */
.detail-unit {
  margin: 70px 0 60px;
}
.page-heading {
  font-size: 26px;
  margin: 0 0 20px 0;
}

.return {
  font-size: max(calc(20 / 750 * 100vw), 12px);
  width: fit-content;
  line-height: initial;
  padding: 1em 1.5em;
  margin: 0 0 30px;
}

.main-img {
  margin: 0 -4.666666%;
}
.detail-heading {
  display: block;
  margin: 30px 0 0;
}
.detail-heading h3 {
  width: 100%;
  font-size: 24px;
  line-height: 1.3;
  padding: 0;
}
.client-name {
  width: 36%;
  font-size: 17px;
  padding: 0 7.5px 10px;
  float: right;
}
.detail-summary {
  width: 100%;
  font-size: 15px;
  line-height: 1.8;
  padding: 0;
}
.ds01 {
  margin: 20px 0 40px;
}
.ds02 {
  margin: 20px 0 40px;
}
.detail-images {
  display: block;
}
.detail-images li {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 20px;
}
.detail-images li img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ▼ Add 20200402 ▼ */
.detail-images li img.di-half {
  width: 50%;
  max-width: 50%;
  height: auto;
}
/* ▲ Add 20200402 ▲ */

/* ▼ Tag - Modified 202108 ▼ */
.tag-area {
  width: 100%;
  /* padding: 6.25% 5% 0; */
  margin: calc(40 / 750 * 100%) 0 0; /* ◀ Modified 202403 */
}
.tag-area ul li {
  /* width: 45%; */
  margin: 0 1em 1em; /* ◀ Modified 202403 */
}
.tag-area ul li span {
  font-size: 15px;
  /* padding: 0 0 10px 0.5em; */
}
/* ▲ Tag - Modified 202108 ▲ */

/* ▼ Movie - Add 202108 ▼ */
.movie-unit {
  padding: 13.333333% 0; /* 100px 0 */
}
.movie-unit h2 {
  font-size: calc(4.8vw * 1.15); /* 36/750 */
  text-align: center;
  line-height: 1.5;
}
.movie-unit h2 small {
  font-size: 0.8333333em;
  display: block;
}
.movie-unit p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 10%; /* 75/750 */
  text-align: center;
}
.movie-items {
  padding: 0 2.2058824%;
  display: block;
}
.movie-items dl {
  width: 100%;
  margin: 0 0 8.666666%; /* 65/750 */
}
.movie-items dl dt {
  width: 40vw;
}
.movie-items ul li {
  margin: 5.333333% 0 0;
}
/* ▲ Movie - Add 202108 ▲ */

@media screen and (max-width:414px) {
  .page-heading {
    font-size: 24px;
  }
  .detail-heading h3 {
    font-size: 22px;
  }
  .client-name {
    font-size: 15px;
  }
  .detail-summary {
    font-size: 14px;
  }
  .tag-area li span {
    font-size: 15px;
    padding: 0 0 7.5px 0.5em;
  }
}

/* =================================
  Page Navi
================================= */
.page-nav { margin: 0; }

/* 検索条件
--------------------------------- */
.search-cond { display: none; }

/* =================================
  CDO
================================= */

/* ============================ ▼ Add 202403 ▼ ============================ */

/* =================================

  Catalog Present

================================= */
.ctg-present-unit { padding: calc(80 / 750 * 100%) 0 calc(120 / 750 * 100%); }
.ctg-present-unit h3 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 0 calc(100 / 750 * 100%);
}
.ctg-present-unit h3 i {
  width: calc(180 / 750 * 100vw);
  margin: 0 auto 15px;
}
.present-wrap { display: block; }
.present-item:not(:last-of-type) { margin: 0 0 calc(100 / 750 * 100%); }
.present-item figure {
  width: calc(470 / 750 * 100vw);
  margin: 0 auto;
}
.present-summary {
  padding: 0 calc(30 / 750 * 100%);
  margin: calc(40 / 750 * 100%) 0 0;
}
.present-summary label span { font-size: calc(30 / 750 * 100vw); }
.present-summary > p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(36 / 24);
  padding: 0 0 0 30px;
}
.keywords span { font-size: calc(24 / 750 * 100vw); }
.ctg-app-btn {
  width: calc(620 / 750 * 100vw);
  height: 60px;
  font-size: calc(24 / 750 * 100vw);
  margin: calc(70 / 750 * 100%) auto 0;
}
.ctg-app-btn i {
  width: calc(67 / 750 * 100vw);
  margin: 0 0 0 calc(30 / 750 * 100%);
}

/* =================================

  Search By Feature

================================= */
.search { padding: calc(120 / 750 * 100%) 0 calc(160 / 750 * 100%); }
.search .inner { padding: 0; }
/* .search hr { margin: 0 0 calc(75 / 750 * 100%); } */
.search h2 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 0 calc(60 / 750 * 100%);
}
.search p {
  line-height: calc(60 / 24);
  margin: 0 0 calc(50 / 750 * 100%);
}
.search p .tag { font-size: calc(24 / 750 * 100vw); }
.search-wrap { width: 100%; }

/* ============================ ▲ Add 202403 ▲ ============================ */

/* ============================ ▼ Add 202504 ▼ ============================ */

/* =================================

  Search By Feature - 202504

================================= */

/* Fixed Search Button
--------------------------------- */
.fixed-search-btn {
  z-index: 8889;
  transform: translate(50%, 0);
  top: initial;
  right: 50%;
  bottom: calc(120 / 750 * 100vw);
  width: calc(400 / 750 * 100%);
  line-height: initial;
  font-size: calc(24 / 750 * 100vw);
  color: #3a3937;
  background-color: #ffffff;
  border: solid 1px #d7d7d7;
  padding: 1em 5em;
}
.fixed-search-btn::before {
  left: 40px;
  background-image: url(../images/detail/glass_sp.svg);
}

.modal-content {
  bottom: 50%;
  transform: translate(-50%, 50%);
  width: calc(680 / 750 * 100%);
  height: auto;
  max-width: initial;
  padding: calc(75 / 750 * 100%) calc(40 / 750 * 100%) calc(60 / 750 * 100%);
}
.modal-content h2 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 auto calc(60 / 750 * 100%);
}
.modal-content p { margin: 0 0 calc(35 / 750 * 100%); }
.modal-content p .tag { font-size: calc(24 / 750 * 100vw); }
a.js-modal-close {
  top: calc(30px * .75);
  transform: scale(.75);
}

/* 建築実例一覧へ戻る
--------------------------------- */
.return-list {
  font-size: max(calc(20 / 750 * 100vw), 12px);
  width: fit-content;
  line-height: initial;
  padding: 1em 1.5em;
  margin: calc(80 / 750 * 100%) auto 0;
}


/* ============================ ▲ Add 202504 ▲ ============================ */