@charset "UTF-8";
/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. ヘッダー
　02. タグブロック
　03. 事例KV
　04. 建物概要
　05. ムービー
　06. 写真
　07. アプローチ
　08. その他の事例一覧
　09. お問い合わせブロック

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

　01. ヘッダー

=============================================================================== */
.fwwCaseHead01_inner {
  padding: 5em 3.22% 0;
}
.fwwCaseHead01_blc {
  margin: 5em 0 0;
}
.fwwCaseHead01_col {
  display: grid;
  grid-template-columns: 1fr 56.2%;
}
.fwwCaseHead01_tit {
  font-weight: 700;
  font-size: 333%;
  line-height: 1.2;
}
.fwwCaseHead01_txt {
  font-weight: 500;
  font-size: 167%;
  line-height: 1.8;
}

/* ==

　02. タグブロック

=============================================================================== */
.fwwCaseTag02 {
  margin: 5em 0 0;
}
.fwwCaseTag02_inner {
  padding: 0 3.22%;
}
.fwwCaseTag02_col {
  display: grid;
  grid-template-columns: 1fr 80%;
  align-items: center;
  border-top: 1px solid var(--fww-color-gray02);
  background-color: var(--fww-color-beige04);
}
.fwwCaseTag02_body {
  padding: 2.5em 4.31% 2.5em 0;
}
.fwwCaseTag02_btnWrap {
  margin: 1.66em 0 0;
  text-align: right;
}
.fwwCaseTag02_btn {
  display: inline-flex;
  position: relative;
  align-items: center;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--fww-color-brown01);
  font-size: 134%;
  line-height: 1.6;
  cursor: pointer;
}
.fwwCaseTag02_btn--update {
  padding: 0 0 0 1.62em;
}
.fwwCaseTag02_btn--update::before {
  position: absolute;
  width: 1em;
  height: 0.75em;
  background-color: var(--fww-color-brown01);
  content: "";
  -webkit-mask: url("/business/fww/common/images/rn/ico_update01.svg") center/contain no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
          mask: url("/business/fww/common/images/rn/ico_update01.svg") center/contain no-repeat;
}
.d_hover .fwwCaseTag02_btn--update {
  transition: opacity 0.3s ease-out;
}
.d_hover .fwwCaseTag02_btn--update:hover {
  opacity: 0.5;
}

/* ==

　03. 事例KV

=============================================================================== */
.fwwCaseVisual01 {
  z-index: 0;
  position: relative;
  padding: 3.33em 0 5em;
}
.fwwCaseVisual01_img {
  position: relative;
}
.fwwCaseVisual01_badge {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.fwwCaseVisual01_badge--jwda {
  width: 10.48%;
}
.fwwCaseVisual01_col {
  display: grid;
  grid-template-columns: 1fr 25.8%;
  margin: 4.16em 0 0;
  border-right: 1px solid var(--fww-color-beige05);
}
.fwwCaseVisual01_col--3col {
  grid-template-columns: 12.41% 1fr 24.19%;
}
.fwwCaseVisual01_item {
  display: grid;
  align-items: center;
  height: 100%;
  padding: 0 0.83em;
  border-left: 1px solid var(--fww-color-beige05);
}
.fwwCaseVisual01_item:first-child {
  padding: 0 0.83em 0 8.69%;
}
.fwwCaseVisual01_item:last-child {
  justify-content: center;
}
.fwwCaseVisual01_col--3col .fwwCaseVisual01_item:first-child {
  justify-content: center;
  padding: 0 0.83em;
}
.fwwCaseVisual01_col--3col .fwwCaseVisual01_item:nth-of-type(2) {
  padding: 0 0.83em 0 6.37%;
}
.fwwCaseVisual01_info {
  font-weight: 900;
  font-size: 109%;
  line-height: 1.53;
  text-align: center;
}
.fwwCaseVisual01_info span {
  font-weight: 800;
  font-family: var(--fww-fontfamily-en-inter);
}
.fwwCaseVisual01_txt {
  font-weight: 500;
  font-size: 250%;
  line-height: 1.46;
}
.fwwCaseVisual01_tit {
  font-weight: 700;
  font-size: 167%;
  line-height: 1.8;
}

/* ==

　04. 建物概要

=============================================================================== */
.fwwCaseInfo01 {
  padding: 5em 0;
}
.fwwCaseInfo01_col {
  display: grid;
  grid-template-columns: 26.45% 1fr;
  padding: 2.5em 0;
  background-color: var(--fww-color-beige04);
}
.fwwCaseInfo01_item {
  display: grid;
  align-items: center;
}
.fwwCaseInfo01_item:nth-of-type(1) {
  justify-self: center;
}
.fwwCaseInfo01_item:nth-of-type(2) {
  padding: 0 6.36% 0 8.22%;
  border-left: 1px solid var(--fww-color-gray02);
}
.fwwCaseInfo01_tit {
  font-weight: 700;
  font-size: 134%;
  line-height: 1.75;
}
.fwwCaseInfo01_tit > span {
  display: inline-flex;
  position: relative;
  align-items: center;
}
.fwwCaseInfo01_tit > span::before {
  display: inline-block;
  width: 2.87em;
  height: 1.75em;
  background-color: var(--fww-color-brown01);
  content: "";
  -webkit-mask: url("/business/fww/common/images/rn/ico_building01.svg") center/contain no-repeat;
  margin: 0 0.93em 0 0;
          mask: url("/business/fww/common/images/rn/ico_building01.svg") center/contain no-repeat;
}

.fwwCaseInfoList01_col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.83em 2.5em;
}
.fwwCaseInfoList01_item {
  display: grid;
  grid-template-columns: 36.67% 1fr;
  gap: 1.25em;
}
.fwwCaseInfoList01_tit {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 0 0.14em;
  border-radius: 2px;
  background-color: var(--fww-color-beige01);
  font-weight: 700;
  font-size: 117%;
  line-height: 1.71;
}
.fwwCaseInfoList01_txt {
  display: grid;
  align-items: center;
  font-weight: 500;
  font-size: 117%;
  line-height: 1.71;
}

/* ==

　05. ムービー

=============================================================================== */
.fwwCaseMovie01 {
  margin: 0 0 6.66em;
}
.fwwCaseMovie01_mov {
  display: block;
  position: relative;
}
.fwwCaseMovie01_mov::before, .fwwCaseMovie01_mov::after {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
}
.fwwCaseMovie01_mov::before {
  width: 6.66em;
  height: 6.66em;
  border-radius: 50%;
  background: url(/business/fww/case/images/rn/movie_bg01.jpg) center/cover no-repeat;
}
.fwwCaseMovie01_mov::after {
  width: 1.58em;
  height: 1.41em;
  transform: translateX(20%);
  background-color: var(--fww-color-brown01);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.fwwCaseMovie01_mov img {
  width: 100%;
}
.d_hover .fwwCaseMovie01_mov img {
  transition: opacity 0.3s ease-out;
}
.d_hover .fwwCaseMovie01_mov:hover img {
  opacity: 0.5;
}

/* ==

　06. 写真

=============================================================================== */
.fwwCasePhoto01_col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.16em 6.5em;
}
.fwwCasePhoto01_img img {
  width: 100%;
}
.fwwCasePhoto01_txt {
  margin: 1em 0 0;
  font-size: 167%;
  line-height: 1.6;
}

/* ==

　07. アプローチ

=============================================================================== */
.fwwCaseApproach01 {
  margin: 10em 0 0;
}
.fwwCaseApproach01_col {
  display: grid;
  grid-template-columns: 16.13% 1fr;
  gap: 10em;
}
.fwwCaseApproach01_col:not(:first-child) {
  margin: 10em 0 0;
}
.fwwCaseApproach01_item:nth-of-type(2) {
  border-top: 1px solid var(--fww-color-gray03);
}
.fwwCaseApproach01_tit {
  display: grid;
  position: relative;
  place-items: center;
  width: 100%;
  background: url(/business/fww/case/images/rn/approach_bg01.jpg) center/cover no-repeat;
  font-weight: 700;
  font-size: 200%;
  line-height: 1.33;
  text-align: center;
}
.fwwCaseApproach01_tit::before {
  display: block;
  padding-top: 100%;
  content: "";
}
.fwwCaseApproach01_tit > span {
  position: absolute;
}
.fwwCaseApproach01_lead {
  margin: 1.78em 0 0;
  font-weight: 700;
  font-size: 234%;
  line-height: 1.42;
}
.fwwCaseApproach01_txtBlc {
  margin: 4.16em 0 0;
}
.fwwCaseApproach01_txtBlc p {
  font-size: 167%;
  line-height: 1.6;
}
.fwwCaseApproach01_txtBlc p + p {
  margin: 1.6em 0 0;
}
.fwwCaseApproach01_dlist {
  margin: 2.66em 0 0;
}
.fwwCaseApproach01_dlist > dt {
  font-weight: 700;
  font-size: 150%;
  line-height: 1.4;
}
.fwwCaseApproach01_dlist > dd {
  margin: 0.66em 0 0;
}
.fwwCaseApproach01_list > li {
  font-size: 150%;
  line-height: 1.4;
}
.fwwCaseApproach01_list > li:not(:first-child) {
  margin: 0.33em 0 0;
}
.fwwCaseApproach01_list > li a[target=_blank]::after {
  display: inline-block;
  width: 1em;
  height: 0.77em;
  content: "";
  -webkit-mask: url(/business/fww/common/images/rn/ico_window01.svg) center/contain no-repeat;
  margin: 0 0 0 0.33em;
  background-color: var(--fww-color-brown01);
  vertical-align: 0.1em;
          mask: url(/business/fww/common/images/rn/ico_window01.svg) center/contain no-repeat;
}
.d_hover .fwwCaseApproach01_list > li a {
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
.d_hover .fwwCaseApproach01_list > li a:hover {
  opacity: 0.5;
}

/* ==

　08. その他の事例一覧

=============================================================================== */
.fwwCaseCarousel01 {
  margin: 10em 0 0;
  padding: 4.16em 0;
  overflow: hidden;
  border-top: 1px solid var(--fww-color-beige01);
  border-bottom: 1px solid var(--fww-color-beige01);
  background-color: var(--fww-color-white01);
}
.fwwCaseCarousel01_inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 3.33em;
}
.fwwCaseCarousel01_tit {
  margin: 0 0 1.25em;
  font-weight: 700;
  font-size: 200%;
  line-height: 1.83;
}

/* ==

　09. お問い合わせブロック

=============================================================================== */
.fwwCaseContact01 {
  z-index: 0;
  position: relative;
  max-width: 1040px;
  margin: 8.33em auto 0;
  padding: 5em 7.08em;
}
.fwwCaseContact01_col {
  display: grid;
  grid-template-columns: 1fr 38.62%;
  align-items: center;
  gap: 0 3.84%;
}
.fwwCaseContact01_txt {
  margin: 1.66em 0 0;
}
.fwwCaseContact01_txt p {
  font-size: 167%;
  line-height: 2;
}