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

　目次

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

　01. メインビジュアル
　02. コンセプト
　03. 事例紹介
　04. 最新事例・ニュース
　05. トピックス
　06. お問い合わせ
　07. 固定バナー
　08. ファンクション

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

　01. メインビジュアル

=============================================================================== */
.fwwVisual01 {
  z-index: 0;
  position: relative;
  padding: 13em 0 8.58em;
  overflow: hidden;
}
.fwwVisual01_inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.fwwVisual01_col {
  display: grid;
  grid-template-columns: 39.75% 60.25%;
  margin: 12.75em 0 0;
}
.fwwVisual01_item {
  border-right: 1px solid var(--fww-color-beige05);
}
.fwwVisual01_item:nth-of-type(1) {
  display: grid;
  place-items: center;
  padding: 0.25em 0;
  border-left: 1px solid var(--fww-color-beige05);
}
.fwwVisual01_item:nth-of-type(2) {
  display: grid;
  align-items: center;
  padding: 0.25em 4.14%;
}
.fwwVisual01_catch {
  width: 62.05%;
  margin: 0 auto;
}
.fwwVisual01_txt {
  font-weight: 700;
  font-size: 134%;
  line-height: 1.66;
}

.fwwVisualCarousel01 {
  overflow: visible;
}
[class*=fnVisualCarousel].is-loaded .fwwVisualCarousel01 {
  opacity: 1;
}
.fwwVisualCarousel01_slide {
  width: auto;
  width: clamp(240px, -108.98px + 36.735vw, 420px);
  margin: 0 1.66em;
  pointer-events: none;
}
.fwwVisualCarousel01_slide.swiper-slide-active {
  z-index: 1;
  pointer-events: auto;
}
.fwwVisualCarousel01_controlWrap {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
[class*=fnVisualCarousel].is-loaded .fwwVisualCarousel01_controlWrap {
  opacity: 1;
}

.fwwVisualCard01 {
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
}
.swiper-slide-active .fwwVisualCard01 {
  transform: scale(1.728);
  box-shadow: 0px 6px 17px rgba(151, 111, 70, 0.3);
}
.fwwVisualCard01_txt {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  align-items: center;
  min-height: 4.28em;
  padding: 0 6em 0 0;
  transform: scale(0.5787);
  transform-origin: right bottom;
  color: var(--fww-color-white01);
  font-weight: 500;
  font-size: 117%;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.fwwVisualCard01_txt::before, .fwwVisualCard01_txt::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4.28em;
  height: 4.28em;
  content: "";
}
.fwwVisualCard01_txt::before {
  background-color: var(--fww-color-brown01);
}
.fwwVisualCard01_txt::after {
  background-color: var(--fww-color-white01);
  -webkit-mask: url(/business/fww/common/images/rn/ico_arrow02.svg) center/1.35em 0.64em no-repeat;
          mask: url(/business/fww/common/images/rn/ico_arrow02.svg) center/1.35em 0.64em no-repeat;
}
.swiper-slide-active .fwwVisualCard01_txt {
  opacity: 1;
}
.fwwVisualCard01_img {
  position: relative;
  overflow: hidden;
}
.fwwVisualCard01_img::before {
  display: block;
  padding-top: 56.19%;
  content: "";
}
.fwwVisualCard01_img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
  width: 100%;
  height: 100%;
     object-fit: cover;
}
.d_hover .fwwVisualCard01 .fwwVisualCard01_img img {
  transition: transform 0.3s ease-out;
}
.d_hover .fwwVisualCard01:hover .fwwVisualCard01_img img {
  transform: var(--fww-hover-image-scale);
}

/* ==

　02. コンセプト

=============================================================================== */
.fwwConcept01 {
  z-index: 0;
  position: relative;
  height: 54.16em;
  padding: 8.33em 0 0;
}
.fwwConcept01_logo {
  width: 7.66em;
  margin: 0 auto;
}
.fwwConcept01_bg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fwwConcept01_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom center;
     object-position: bottom center;
}

.fwwConcept02 {
  z-index: 0;
  position: relative;
  background-color: var(--fww-color-beige03);
}
.fwwConcept02::before {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/business/fww/images/rn/concept_bg02.jpg) no-repeat;
  background-size: cover;
  content: "";
  mix-blend-mode: color-burn;
  opacity: 0.5;
}
.fwwConcept02_inner {
  max-width: 1174px;
  margin: 0 auto;
  padding: 10em 40px 10.83em;
}
.fwwConcept02_col {
  display: grid;
  grid-template-columns: 53.2% 45.16%;
  gap: 1.62%;
}
.fwwConcept02_item:nth-of-type(1) {
  padding: 0 0 0 1.2%;
}
.fwwConcept02_catch {
  font-weight: 500;
  font-size: 333%;
  line-height: 1.6;
  white-space: nowrap;
}
.fwwConcept02_txtBlc {
  width: 84%;
  margin: 4.16em 0 0;
}
.fwwConcept02_txtBlc p {
  font-weight: 500;
  font-size: 134%;
  line-height: 1.75;
}
.fwwConcept02_txtBlc p + p {
  margin: 1.87em 0 0;
}

.fwwConceptImg01 {
  position: relative;
  width: 83.4%;
  margin: 11.94% auto 8.91%;
}
.fwwConceptImg01::before {
  display: block;
  padding-top: 100%;
  content: "";
}
.fwwConceptImg01 > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fwwConceptImg01_tit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 333%;
  line-height: 0.9;
  font-family: var(--fww-fontfamily-en-kantumruy);
  letter-spacing: -0.02em;
  text-align: center;
}
.fwwConceptImg01_tit small {
  font-size: 80%;
}
.fwwConceptImg01_list {
  position: relative;
  width: 100%;
  height: 100%;
}
.fwwConceptImg01_list::before, .fwwConceptImg01_list::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.fwwConceptImg01_list::before {
  overflow: hidden;
  border-radius: 50%;
  background: url(/business/fww/images/rn/concept_bg04.jpg) center no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.fwwConceptImg01_list::after {
  background: url(/business/fww/images/rn/concept_bg03.svg) center no-repeat;
  background-size: contain;
}
.fwwConceptImg01_list > li {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 27.67%;
  height: 27.67%;
  margin: auto;
  --fww-conceptImg01-count: 5;
  --fww-conceptImg01-distance: -180.7%;
  --fww-conceptImg01-rotate: calc(360deg / var(--fww-conceptImg01-count));
}
.fwwConceptImg01_list > li:nth-of-type(1) {
  transform: rotate(calc(var(--fww-conceptImg01-rotate) * 0)) translateY(var(--fww-conceptImg01-distance)) rotate(calc(var(--fww-conceptImg01-rotate) * -0));
}
.fwwConceptImg01_list > li:nth-of-type(2) {
  transform: rotate(calc(var(--fww-conceptImg01-rotate) * 1)) translateY(var(--fww-conceptImg01-distance)) rotate(calc(var(--fww-conceptImg01-rotate) * -1));
}
.fwwConceptImg01_list > li:nth-of-type(3) {
  transform: rotate(calc(var(--fww-conceptImg01-rotate) * 2)) translateY(var(--fww-conceptImg01-distance)) rotate(calc(var(--fww-conceptImg01-rotate) * -2));
}
.fwwConceptImg01_list > li:nth-of-type(4) {
  transform: rotate(calc(var(--fww-conceptImg01-rotate) * 3)) translateY(var(--fww-conceptImg01-distance)) rotate(calc(var(--fww-conceptImg01-rotate) * -3));
}
.fwwConceptImg01_list > li:nth-of-type(5) {
  transform: rotate(calc(var(--fww-conceptImg01-rotate) * 4)) translateY(var(--fww-conceptImg01-distance)) rotate(calc(var(--fww-conceptImg01-rotate) * -4));
}
.fwwConceptImg01_ico {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2.5px solid var(--fww-color-brown01);
  border-radius: 50%;
  background-color: var(--fww-color-beige02);
}
.fwwConceptImg01_ico img {
  width: 100%;
}
.fwwConceptImg01_txt {
  position: absolute;
  bottom: -28.07%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 117%;
  white-space: nowrap;
}

/* ==

　03. 事例紹介

=============================================================================== */
.fwwCase01 {
  margin: 11.66em 0 0;
}
.fwwCase01_col {
  display: grid;
  grid-template-columns: 33.07% 66.93%;
}
.fwwCase01_item:nth-of-type(2) {
  padding: 1.91em 0 0;
}

.fwwCaseTag01 {
  width: 66.93%;
  margin: 2.16em 0 0 auto;
  border-top: 1px solid var(--fww-color-gray02);
  background-color: var(--fww-color-beige04);
}
.fwwCaseTag01_body {
  padding: 1em 5.83em 1.83em;
}

.fwwCardList01_item:nth-child(n+7) {
  display: none;
}

/* ==

　04. 最新事例・ニュース

=============================================================================== */
.fwwNews01 {
  margin: 11.66em 0 0;
}
.fwwNews01_col {
  display: grid;
  grid-template-columns: 34.68% 65.32%;
}
.fwwNews01_list {
  border-top: 1px solid var(--fww-color-gray01);
}
.fwwNews01_list > li {
  border-bottom: 1px solid var(--fww-color-gray01);
  font-size: 150%;
  line-height: 1.55;
}
.fwwNews01_list > li > a,
.fwwNews01_list > li > span {
  display: block;
  position: relative;
  padding: 1.38em 3.83em 1.38em 0;
  text-decoration: none;
}
.fwwNews01_list > li > a::after {
  position: absolute;
  width: 1.05em;
  height: 0.5em;
  background-color: var(--fww-color-red01);
  content: "";
  -webkit-mask: url(/business/fww/common/images/rn/ico_arrow02.svg) center/contain no-repeat;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
          mask: url(/business/fww/common/images/rn/ico_arrow02.svg) center/contain no-repeat;
}
.d_hover .fwwNews01_list > li > a {
  transition: opacity 0.3s ease-out;
}
.d_hover .fwwNews01_list > li > a:hover {
  opacity: 0.5;
}

/* ==

　05. トピックス

=============================================================================== */
.fwwTopics01 {
  z-index: 0;
  position: relative;
  margin: 10em 0 0;
  padding: 8.33em 0 6.66em;
  overflow: hidden;
  color: var(--fww-color-white01);
}
.fwwTopics01 + .fwwTopics01 {
  margin: 0;
}
.fwwTopics01 a {
  color: var(--fww-color-white01);
}
.fwwTopics01 a:visited {
  color: var(--fww-color-white01);
}
.fwwTopics01_bg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--fww-color-beige03);
}
.fwwTopics01_bg img {
  -o-object-fit: cover;
  width: 100%;
  height: 100%;
     object-fit: cover;
}
.fwwTopics01_bg::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  content: "";
}
.fwwTopics01_head {
  display: grid;
  grid-template-columns: 34.68% 65.32%;
  margin: 0 0 6.66em;
}
.fwwTopics01_tit {
  font-weight: 700;
  font-size: 234%;
  line-height: 1.42;
}
.fwwTopics01_sub {
  padding: 0.25em 0 0;
  border-top: 1px solid var(--fww-color-white01);
  font-weight: 300;
  font-size: 500%;
  line-height: 1.25;
  font-family: var(--fww-fontfamily-en-kantumruy);
  letter-spacing: -0.002em;
  text-align: right;
}

/* ==

　06. お問い合わせ

=============================================================================== */
.fwwContact01 {
  z-index: 0;
  position: relative;
  margin: 8.33em 0 0;
  padding: 6.5em 8.33em 6.66em;
}
.fwwContact01_col {
  display: grid;
  grid-template-columns: 51.93% 44.23%;
  gap: 0 3.84%;
}
.fwwContact01_txt {
  margin: 5.33em 0 0;
}
.fwwContact01_txt p {
  font-size: 167%;
  line-height: 2;
}
.fwwContact01_btnWrap {
  margin: 4.58em 0 0;
}

/* ==

　07. 固定バナー

=============================================================================== */
.fwwFixBlock01 {
  z-index: 999;
  position: fixed;
  top: 50%;
  right: 0;
  width: 5em;
}
.fwwFixBlock01_col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.83em;
}

/* ==

　08. ファンクション

=============================================================================== */
.fnVisualCarousel01 .fwwLoading01 {
  top: 22.5em;
}

.fnFixedBanner01 {
  transform: translate(100%, -50%);
  transition: transform 0.3s ease-out;
}
.fnFixedBanner01.is-show {
  transform: translate(0, -50%);
}