@charset "UTF-8";

/* ----------------------------------------------- CSS Information
 Style Info:     施工事例
 Notes:          
--------------------------------------------------------------- */
h1.page-title {
  width: 54%;
  max-width: 950px;
  margin: 0 auto;
  padding: 1em 0 1.5em 0.5em;
  font-size: 3em;
}
/* ===== archive ===== */
.archive-wrap {
  width: 54%;
  max-width: 950px;
  margin: 0 auto; 
}
.category-wrap {
  margin: 0 auto 5%; 
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.archive-wrap .category {
  width: 24%;
  text-align: center;
}
.archive-wrap .category a {
  padding: 0.5em 0;
  font-size: 1.5em;
  display: block;
  border: 2px solid #000;
  background: #FFF;
}
.archive-wrap .category a:hover {
  color: #FFF;
  background: #FF8000;
  border: 2px solid #FF8000;
}
.archive-wrap .content {
  margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
}
.archive-wrap .archive {
  width: 33.33333%;
  width : calc(100% / 3);
}
.archive-wrap .archive a {
  padding: 1em;
  box-sizing: border-box;
  display: block;
}
.archive-wrap .archive a:hover {
  background: #FFDABB;
}
.archive .main-image {
  width: 100%;
  margin: 0 auto 7%;
  position: relative;
}
.archive .main-image::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.archive .main-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}
.archive .title {
  padding: 0 0.5em;
  box-sizing: border-box;
  font-size: 1.2em;
  border-bottom: 1px solid #000;
	white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.archive .data-wrap {
  margin: 3% 0 0;
  padding: 0 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.archive .taxonomy {
  padding: 0.3em;
  border: 1px solid #000;
  background: #FFF;
}
/* ===== end archive ===== */
/* ===== single ===== */
.single-wrap .content {
  width: 54%;
  max-width: 950px;
  margin: 0 auto 5%;
}
.single-wrap .main-image {
  margin: 0 auto 8%;
}
.single-wrap .main-image img {
  box-shadow: 1em 1em 0 0em #FFDABB, -1em 1em 0 0em #FFDABB;
}
.single-wrap .title-wrap {
  margin: 0 auto 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.single-wrap div.title {
  width: 85%;
  font-size: 2em;
}
.single-wrap .taxonomy {
  padding: 0.3em;
  border: 1px solid #000;
  background: #FFF;
}
.single-wrap .data-wrap {
  display: flex;
}
.single-wrap .data-wrap .data:first-child {
  margin: 0 1em 0 0;
}
.single-wrap .txt {
  margin: 5% auto 20%;
}
.single-wrap .subtitle {
  padding: 0 0 0 23%;
  display: inline-block;
  line-height: 1.5;
  border-bottom: 1px solid #000;
}
.subtitle .color01 {
  color: #FF8000;
}
.sec02 {
  padding: 5% 0;
  background: #EFEFEF;
}
.single-wrap h2.title {
  margin: 0 auto 5%;
  font-size: 3em;
  text-align: center;
}
.detail-wrap {
  margin: 0 -2% 5%;
  display: flex;
  flex-wrap: wrap;
}
.detail-wrap .detail {
  width: 33.33333%;
  width : calc(100% / 3);
  margin: 0 0 10%;
  padding: 0 2%;
  box-sizing: border-box;
}
.detail .txt {
  margin: 10% auto 0;
  padding: 5% 0 0;
  border-top: 1px solid #000;
}
.detail-wrap .thumbnail {
  width: 100%;
  margin: 0 auto 7%;
  position: relative;
}
.detail-wrap .thumbnail::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.detail-wrap .thumbnail img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}
.container .bg-txt {
  position: absolute;
  top: 2.5em;
  left: 0;
  transform: rotate(90deg);
  font-size: 10vw;
  color: #D1D1D1;
  line-height: 1;
  z-index: -1;
}
/* ===== end single ===== */
/* ================= smartphone ================= */
@media only screen and (max-width:699px) {
/* ===== archive ===== */
h1.page-title {
  width: 100%;
  margin: 0 auto 5%;
  padding: 0 0 0 5%;
  font-size: 25px;
}
.archive-wrap {
  width: 90%;
}
.archive-wrap .category a {
  padding: 0.3em 0;
  font-size: 14px;
}
.archive-wrap .category {
  width: 48%;
  margin: 0 0 4%;
}
.archive-wrap .content {
  margin: 0 -0.5em 5%;
}
.archive-wrap .archive {
  width: 50%;
  margin: 0 0 10%;
}
.archive-wrap .archive a {
  padding: 0.5em;
}
.archive .main-image {
  margin: 0 auto;
}
.archive .title {
  font-size: 13px;
 	white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.archive .date {
  font-size: 12px;
}
.archive .taxonomy {
  font-size: 10px;
}
.container .bg-txt {
  position: fixed;
  top: 0.7em;
  left: 5%;
  transform: rotate(0deg);
  font-size: 13vw;
  color: #E9E9E9;
	white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
/* ===== end archive ===== */
/* ===== single ===== */
.single-wrap .content {
  width: 90%;
  max-width: 950px;
  margin: 0 auto 5%;
}
.single-wrap .main-image img {
  box-shadow: 0.5em 0.5em 0 0em #FFDABB, -0.5em 0.5em 0 0em #FFDABB;
}
.single-wrap .title-wrap {
  display: block;
}
.single-wrap .taxonomy {
  display: inline-block;
}
.single-wrap h2.title {
  font-size: 27px;
}
.single-wrap div.title {
  width: 100%;
  font-size: 20px;
}
.detail-wrap .detail {
  width: 50%;
}
}