@charset "UTF-8";

/* =========================================================
   works-single.css
   yourstory / replan 個別ページ共通
========================================================= */


/* =========================================================
   right-layout 調整
========================================================= */

.works-single-page-body .right-layout-content,
.works-single-page-body .page-standard__content,
.works-single-page-body .right-layout-main,
.works-single-page-body .right-layout-inner,
.works-single-page-body .page-standard__inner{
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* right-layout側タイトルを消す */
.works-single-page-body .right-layout-title,
.works-single-page-body .right-layout-page-title,
.works-single-page-body .page-standard__page-title-wrap,
.works-single-page-body .page-standard__page-title,
.works-single-page-body .entry-title{
  display: none !important;
}


/* =========================================================
   全体
========================================================= */

.works-single{
  width: 100%;
  margin: 0 auto;
  color: #333;
  background: #fff;
}


/* =========================================================
   HERO
========================================================= */

.works-single-hero{
  position: relative;
  width: calc(100vw - 250px);
  height: 760px;
  margin-left: 250px;
  overflow: hidden;
  background: #111;
  box-sizing: border-box;
}

.works-single-hero__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.works-single-hero__image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 2;
}

.works-single-hero__image img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.works-single-hero__overlay{
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 90px;
  z-index: 5;
  color: #fff;
}

.works-single-hero__categories{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.works-single-hero__categories span{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 12px;
  background: #c59b1b;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.works-single-hero__title{
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
  font-size: 50px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-align: left !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.works-single-hero__title::before,
.works-single-hero__title::after{
  display: none !important;
  content: none !important;
}

.works-single-hero__subtitle{
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 2 !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}


/* =========================================================
   メイン
========================================================= */

.works-single-main{
  width: calc(100vw - 250px);
  margin-left: 250px;
  padding: 96px 0 120px;
  box-sizing: border-box;
  background: #fff;
}

.works-single-main__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.8fr);
  column-gap: 72px;
  width: calc(100% - 96px);
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.works-single-main__left,
.works-single-main__right{
  min-width: 0;
}


/* =========================================================
   Architecture Story
========================================================= */

.works-single-story{
  margin: 0 0 48px;
}

.works-single-section-label{
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #c59b1b !important;
  font-family: "Times New Roman", serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.42em !important;
  text-align: left !important;
}

.works-single-story__text{
  margin: 0;
  padding: 0;
  color: #222;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 26px;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.08em;
}


/* =========================================================
   基本情報
========================================================= */

.works-single-spec{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.works-single-spec__row{
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  min-height: 68px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.works-single-spec__row dt{
  margin: 0 !important;
  padding: 0 12px 0 0 !important;
  color: #aaa;
  font-family: "Times New Roman", serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  white-space: nowrap;
}

.works-single-spec__row dd{
  margin: 0 !important;
  padding: 0 !important;
  color: #333;
  font-size: 13px;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: right;
}


/* =========================================================
   右側カテゴリー説明
========================================================= */

.works-single-category-box{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}

.works-single-category-item{
  min-height: 210px;
  padding: 34px 30px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
}

.works-single-category-item__point{
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #c59b1b !important;
  font-family: "Times New Roman", serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.works-single-category-item__name{
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #222 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.works-single-category-item__desc{
  margin: 0 !important;
  padding: 0 !important;
  color: #666 !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.04em !important;
}

/* =========================================================
   Responsive
========================================================= */

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

  .works-single-hero__title{
    font-size: 42px !important;
  }

  .works-single-main__inner{
    column-gap: 48px;
  }

  .works-single-story__text{
    font-size: 23px;
  }

}

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

  .works-single-hero{
    height: 660px;
  }

  .works-single-main__inner{
    grid-template-columns: 1fr;
    row-gap: 56px;
  }

  .works-single-category-box{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

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

  .works-single-hero{
    width: 100%;
    height: 560px;
    margin-left: 0;
  }

  .works-single-main{
    width: 100%;
    margin-left: 0;
    padding: 64px 0 86px;
  }

  .works-single-main__inner{
    width: calc(100% - 44px);
    max-width: none;
    row-gap: 44px;
  }

  .works-single-hero__overlay{
    left: 22px;
    right: 22px;
    bottom: 58px;
  }

  .works-single-hero__title{
    font-size: 30px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.08em !important;
  }

  .works-single-hero__subtitle{
    font-size: 13px !important;
  }

  .works-single-story{
    margin-bottom: 40px;
  }

  .works-single-story__text{
    font-size: 19px;
    line-height: 2;
  }

  .works-single-spec{
    grid-template-columns: 1fr;
  }

  .works-single-spec__row{
    grid-template-columns: 40% 60%;
    min-height: 62px;
  }

  .works-single-category-box{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .works-single-category-item{
    min-height: auto;
    padding: 24px 22px;
  }

}


/* =========================================================
   yourstory 下部：旧ページ風レイアウト
   上部テキスト / TOP画像 / 住宅データ / ショートコード
========================================================= */

.works-single-old-content{
  width: calc(100vw - 250px);
  margin-left: 250px;
  padding: 0 0 110px;
  background: #fff;
  box-sizing: border-box;
}

.works-single-old-content__inner{
  width: calc(100% - 96px);
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.works-single-old-lead{
  width: calc(100vw - 250px);
  margin-left: calc((100vw - 250px - 100%) / -2);
  margin-right: calc((100vw - 250px - 100%) / -2);
  margin-bottom: 70px;
  padding: 56px 48px;
  background: #111;
  color: #fff;
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: 0.06em;
  box-sizing: border-box;
}

.works-single-old-lead p{
  width: calc(100% - 96px);
  max-width: 1180px;
  margin: 0 auto 2em !important;
  color: #fff !important;
}

.works-single-old-lead p:last-child{
  margin-bottom: 0 !important;
}

.works-single-old-top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: center;
  margin: 0 0 70px;
}

.works-single-old-top__image{
  width: 100%;
}

.works-single-old-top__image img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.works-single-old-top__data{
  padding: 30px 34px;
  background: #eee;
  color: #333;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  box-sizing: border-box;
}

.works-single-old-top__data p{
  margin: 0 !important;
}

.works-single-old-shortcode{
  width: 100%;
  margin: 0 auto;
}

.works-single-old-shortcode img{
  max-width: 100%;
  height: auto;
}

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

  .works-single-old-top{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .works-single-old-top__data{
    width: 100%;
  }

}

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

  .works-single-old-content{
    width: 100%;
    margin-left: 0;
    padding: 0 0 80px;
  }

  .works-single-old-content__inner{
    width: calc(100% - 44px);
    max-width: none;
  }

	.works-single-old-lead{
	  width: 100vw;
	  margin-left: calc((100vw - 100%) / -2);
	  margin-right: calc((100vw - 100%) / -2);
	  margin-bottom: 46px;
	  padding: 38px 22px;
	  font-size: 13px;
	  line-height: 2.2;
	}

	.works-single-old-lead p{
	  width: 100%;
	  max-width: none;
	}

  .works-single-old-top{
    margin-bottom: 48px;
  }

  .works-single-old-top__data{
    padding: 24px 22px;
    font-size: 13px;
  }

}


/* =========================================================
   yourstory ショートコード下ブロック
========================================================= */

.works-single-old-blocks{
  width: 100%;
  margin: 96px 0 0;
}

.works-single-detail-block{
  margin: 0 0 96px;
  padding: 0;
}

.works-single-detail-block:last-child{
  margin-bottom: 0;
}

.works-single-detail-block__title{
  margin: 0 0 34px !important;
  padding: 0 !important;
  color: #222 !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
  font-size: 28px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-align: left !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.works-single-detail-block__title::before,
.works-single-detail-block__title::after{
  display: none !important;
  content: none !important;
}

.works-single-detail-block__main{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 48px;
  align-items: center;
}

.works-single-detail-block.is-image-left .works-single-detail-block__image{
  order: 1;
}

.works-single-detail-block.is-image-left .works-single-detail-block__side-text{
  order: 2;
}

.works-single-detail-block.is-image-right .works-single-detail-block__image{
  order: 2;
}

.works-single-detail-block.is-image-right .works-single-detail-block__side-text{
  order: 1;
}

.works-single-detail-block__image{
  width: 100%;
  overflow: hidden;
  background: #f3efe7;
}

.works-single-detail-block__image img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.works-single-detail-block__side-text,
.works-single-detail-block__body-text{
  color: #555;
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: 0.05em;
}

.works-single-detail-block__body-text{
  margin: 32px 0 0;
}

.works-single-detail-block__side-text p,
.works-single-detail-block__body-text p{
  margin: 0 0 1.4em !important;
}

.works-single-detail-block__side-text p:last-child,
.works-single-detail-block__body-text p:last-child{
  margin-bottom: 0 !important;
}

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

  .works-single-detail-block__main{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .works-single-detail-block.is-image-left .works-single-detail-block__image,
  .works-single-detail-block.is-image-right .works-single-detail-block__image{
    order: 1;
  }

  .works-single-detail-block.is-image-left .works-single-detail-block__side-text,
  .works-single-detail-block.is-image-right .works-single-detail-block__side-text{
    order: 2;
  }

}

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

  .works-single-old-blocks{
    margin-top: 64px;
  }

  .works-single-detail-block{
    margin-bottom: 64px;
  }

  .works-single-detail-block__title{
    font-size: 22px !important;
  }

}

/* =========================================================
   yourstory 会話ラベル
========================================================= */

.works-single .woman{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fde8f0;
  color: #d85f8a !important;
  font-weight: 700;
}

.works-single .man{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f3fb;
  color: #3f93c7 !important;
  font-weight: 700;
}


/* =========================================================
   replan 下部コンテンツ
   物件概要 / 建築データ / 追加画像
========================================================= */

.works-single-replan-content{
  width: calc(100vw - 250px);
  margin-left: 250px;
  padding: 0 0 120px;
  background: #fff;
  box-sizing: border-box;
}

.works-single-replan-content__inner{
  width: calc(100% - 96px);
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.works-single-replan-info{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
  margin: 0 0 80px;
}

.works-single-replan-summary{
  color: #555;
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.05em;
}

.works-single-replan-summary p{
  margin: 0 0 1.6em !important;
}

.works-single-replan-summary p:last-child{
  margin-bottom: 0 !important;
}

.works-single-replan-data{
  padding: 30px 34px;
  background: #eee;
  color: #333;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  box-sizing: border-box;
}

.works-single-replan-data p{
  margin: 0 !important;
}

.works-single-replan-photo-list{
  width: 100%;
}

.works-single-replan-photo{
  display: grid;
  gap: 36px;
  margin: 0 0 72px;
}

.works-single-replan-photo:last-child{
  margin-bottom: 0;
}

.works-single-replan-photo.is-double{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.works-single-replan-photo.is-single{
  grid-template-columns: minmax(0, 1fr);
}

.works-single-replan-photo__figure{
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.works-single-replan-photo__figure img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.works-single-replan-photo__figure figcaption{
  margin: 12px 0 0 !important;
  padding: 0 !important;
  color: #777;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.works-single-replan-photo__figure figcaption.is-vertical{
  position: absolute;
  right: 12px;
  top: 12px;
  margin: 0 !important;
  writing-mode: vertical-rl;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

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

  .works-single-replan-info{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .works-single-replan-data{
    width: 100%;
  }

}

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

  .works-single-replan-content{
    width: 100%;
    margin-left: 0;
    padding: 0 0 86px;
  }

  .works-single-replan-content__inner{
    width: calc(100% - 44px);
    max-width: none;
  }

  .works-single-replan-info{
    margin-bottom: 56px;
  }

  .works-single-replan-photo.is-double{
    grid-template-columns: 1fr;
  }

  .works-single-replan-data{
    padding: 24px 22px;
    font-size: 13px;
  }

}



/* =========================================================
   最下部 戻るボタン
========================================================= */

.works-single-back{
  width: calc(100vw - 250px);
  margin-left: 250px;
  padding: 0 0 120px;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
}

.works-single-back a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 52px;
  padding: 0 34px;
  border: 1px solid #111;
  color: #111 !important;
  background: #fff;
  font-family: "Times New Roman", serif;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none !important;
  transition: background 0.25s ease, color 0.25s ease;
}

.works-single-back a span{
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.25s ease;
}

.works-single-back a:hover{
  background: #111;
  color: #fff !important;
}

.works-single-back a:hover span{
  transform: translateX(5px);
}

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

  .works-single-back{
    width: 100%;
    margin-left: 0;
    padding: 0 0 86px;
  }

}



/* =========================================
   replan個別：共通CONTACT / footer 位置調整
   ※ works-single.css に入れる
========================================= */

@media screen and (min-width: 901px) {
  body.works-single-replan-body .front-contact,
  body.works-single-replan-body .front-footer-links {
    width: calc(100vw - 250px) !important;
    margin-left: 250px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 900px) {
  body.works-single-replan-body .front-contact,
  body.works-single-replan-body .front-footer-links {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* =========================================
   yourstory個別：共通CONTACT / footer 位置調整
   ※ works-single.css に入れる
========================================= */

@media screen and (min-width: 901px) {
  body.works-single-yourstory-body .front-contact,
  body.works-single-yourstory-body .front-footer-links {
    width: calc(100vw - 250px) !important;
    margin-left: 250px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 900px) {
  body.works-single-yourstory-body .front-contact,
  body.works-single-yourstory-body .front-footer-links {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* =========================================
   replan個別：画像表示
   横長は大きく / 縦長は小さく / キャプション中央
========================================= */

body.works-single-replan-body .works-single-replan-photo{
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto 84px !important;
}

/* figureは画像の入れ物。枠で無理に揃えない */
body.works-single-replan-body .works-single-replan-photo__figure{
  position: relative !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 0 24px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-align: center !important;
}

/* 基本：横長画像は横幅いっぱい */
body.works-single-replan-body .works-single-replan-photo__figure img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* 縦長画像：小さく表示 */
body.works-single-replan-body .works-single-replan-photo__figure.is-portrait img,
body.works-single-replan-body .works-single-replan-photo__figure:has(figcaption.is-vertical) img{
  width: auto !important;
  max-width: 42% !important;
  max-height: 680px !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2列の縦長画像は、列の中で少しだけ大きめ */
body.works-single-replan-body .works-single-replan-photo.is-double .works-single-replan-photo__figure.is-portrait img,
body.works-single-replan-body .works-single-replan-photo.is-double .works-single-replan-photo__figure:has(figcaption.is-vertical) img{
  max-width: 68% !important;
  max-height: 560px !important;
}

/* キャプション：画像の下・中央・見やすく */
body.works-single-replan-body .works-single-replan-photo__figure figcaption{
  position: static !important;
  writing-mode: horizontal-tb !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 14px auto 0 !important;
  padding: 0 18px !important;
  background: transparent !important;
  color: #555 !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 縦キャプション指定を解除 */
body.works-single-replan-body .works-single-replan-photo__figure figcaption.is-vertical{
  position: static !important;
  writing-mode: horizontal-tb !important;
  right: auto !important;
  top: auto !important;
  margin: 14px auto 0 !important;
  padding: 0 18px !important;
  background: transparent !important;
  color: #555 !important;
  text-align: center !important;
}