@charset "UTF-8";
/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. フォント
　02. バリアブル
　03. ベース
　04. インナー
　05. 背景
　06. タイトル
　07. リンク
　08. ボタン
　09. タグ
　10. 注釈
　11. フォーム
　12. カード
　13. ボタンラッパー
　14. ボタンリスト
　15. カードリスト
　16. Swiper(Override)
　17. カルーセル
　18. ローディング
　19. ファンクション

******************************************************************************* */
/* ==

　01. フォント

=============================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@300;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap");
/* ==

　02. バリアブル

=============================================================================== */
.fwwMain01 {
  --fww-color-brown01: #5A4628;
  --fww-color-gray01: #8C8C8C;
  --fww-color-gray02: #E2D7C8;
  --fww-color-gray03: #8C8C8C;
  --fww-color-gray04: #464646;
  --fww-color-white01: #FFF;
  --fww-color-beige01: #F0DFCE;
  --fww-color-beige02: #FCF3EB;
  --fww-color-beige03: #F4E7DC;
  --fww-color-beige04: #FFF9F4;
  --fww-color-beige05: #D4C3A9;
  --fww-color-red01: #FA0046;
  --fww-hover-image-scale: scale(1.05);
  --fww-fontfamily-en-kantumruy: "Kantumruy Pro", "Noto Sans JP", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
  --fww-fontfamily-en-inter: "Inter", "Noto Sans JP", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
  --fww-sp-content-maxwidth: 550px;
}

/* ==

　03. ベース

=============================================================================== */
.fwwMain01 {
  position: relative;
  padding: 0 0 8.33em;
  background-color: var(--fww-color-beige02);
  color: var(--fww-color-brown01);
  font-size: clamp(10px, 6.122px + 0.408vw, 12px);
}

.fwwMain01 * {
  box-sizing: border-box;
}

.fwwMain01 a {
  color: var(--fww-color-brown01);
}
.fwwMain01 a:visited {
  color: var(--fww-color-brown01);
}

/* ==

　04. インナー

=============================================================================== */
.fwwInner01 {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ==

　05. 背景

=============================================================================== */
.fwwBg01 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--fww-color-beige03);
}
.fwwBg01 img {
  -o-object-fit: cover;
  width: 100%;
  height: 100%;
     object-fit: cover;
  mix-blend-mode: color-burn;
  opacity: 0.5;
}

/* ==

　06. タイトル

=============================================================================== */
.fwwTitle01 {
  font-weight: 700;
  font-size: 134%;
  line-height: 1.75;
}
.fwwTitle01_sub {
  font-weight: 300;
  font-size: 666%;
  line-height: 0.93;
  font-family: var(--fww-fontfamily-en-kantumruy);
}
.fwwTitle01_sub--small01 {
  font-size: 500%;
  line-height: 1.25;
}

/* ==

　07. リンク

=============================================================================== */
.fwwLink01 {
  position: relative;
  font-weight: 700;
  font-size: 134%;
  line-height: 1.75;
  text-decoration: none;
}
.fwwLink01--arrowR {
  padding: 0 2.18em 0 0;
}
.fwwLink01--arrowR::after {
  position: absolute;
  width: 1.18em;
  height: 0.56em;
  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 .fwwLink01 {
  transition: opacity 0.3s ease-out;
}
.d_hover .fwwLink01:hover {
  opacity: 0.5;
}

/* ==

　08. ボタン

=============================================================================== */
.fwwBtn01 {
  display: inline-flex;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 16.8em;
  min-height: 3.9em;
  border: 1px solid var(--fww-color-brown01);
  background-color: transparent;
  font-weight: 700;
  font-size: 167%;
  text-decoration: none;
}
.fwwBtn01::after {
  position: absolute;
  width: 0.95em;
  height: 0.45em;
  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: 1.45em;
  bottom: 0;
  margin: auto;
          mask: url(/business/fww/common/images/rn/ico_arrow02.svg) center/contain no-repeat;
}
.d_hover .fwwBtn01 {
  transition: background-color 0.3s ease-out;
}
.d_hover .fwwBtn01::after {
  transition: background-color 0.3s ease-out;
}
.d_hover .fwwBtn01:hover {
  background-color: var(--fww-color-brown01);
  color: var(--fww-color-white01);
}
.d_hover .fwwBtn01:hover::after {
  background-color: var(--fww-color-white01);
}

/* for tab */
.fwwBtn02 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.62em;
  padding: 0;
  border: 1px solid var(--fww-color-brown01);
  background-color: transparent;
  color: var(--fww-color-brown01);
  font-weight: 700;
  font-size: 134%;
  cursor: pointer;
}
.d_hover .fwwBtn02 {
  transition: background-color 0.3s ease-out;
}
.d_hover .fwwBtn02:hover {
  background-color: var(--fww-color-white01);
}
.fwwBtn02[aria-selected=true] {
  background-color: var(--fww-color-white01);
}

/* for accordion */
.fwwBtn03 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4em;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fww-color-brown01);
  font-weight: 700;
  font-size: 134%;
  cursor: pointer;
}
.fwwBtn03 > span {
  position: relative;
  padding: 0 1.25em 0 0;
}
.fwwBtn03 > span::before, .fwwBtn03 > span::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.62em;
  height: 0.12em;
  margin: auto;
  background-color: var(--fww-color-brown01);
  content: "";
}
.fwwBtn03 > span::after {
  transform: rotate(-90deg);
  transition: transform 0.3s ease-out;
}
.fwwBtn03 small {
  font-weight: 500;
  font-size: 75%;
}
.fwwBtn03.is-open > span::after {
  transform: rotate(0);
}

/* for side banner */
.fwwBtn04 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 11.42em;
  border-radius: 4px 0 0 4px;
  background-color: var(--fww-color-white01);
  box-shadow: 0px 0px 1.42em rgba(0, 0, 0, 0.1);
  color: var(--fww-color-brown01);
  font-weight: 800;
  font-size: 117%;
  letter-spacing: 0.01em;
  text-decoration: none;
  writing-mode: vertical-rl;
}
.fwwBtn04 > span {
  position: relative;
}
.fwwBtn04 > span::before {
  display: inline-block;
  background-color: var(--fww-color-brown01);
  content: "";
}
.fwwBtn04--icoBuilding > span::before {
  -webkit-mask: url(/business/fww/common/images/rn/ico_building01.svg) center/contain no-repeat;
  width: 2.14em;
  height: 1.07em;
  margin: 0 0 1.35em;
          mask: url(/business/fww/common/images/rn/ico_building01.svg) center/contain no-repeat;
}
.fwwBtn04--icoMail > span::before {
  -webkit-mask: url(/business/fww/common/images/rn/ico_mail01.svg) center/contain no-repeat;
  width: 1.21em;
  height: 1.07em;
  margin: 0 0 0.64em;
          mask: url(/business/fww/common/images/rn/ico_mail01.svg) center/contain no-repeat;
}
.d_hover .fwwBtn04 {
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.d_hover .fwwBtn04 > span::before {
  transition: background-color 0.3s ease-out;
}
.d_hover .fwwBtn04:hover {
  background-color: var(--fww-color-brown01);
  color: var(--fww-color-white01);
}
.d_hover .fwwBtn04:hover > span::before {
  background-color: var(--fww-color-white01);
}

/* ==

　09. タグ

=============================================================================== */
.fwwTag01 {
  display: inline-flex;
  align-items: center;
  min-height: 2em;
  padding: 0 1.07em 0.1em;
  border: 1px solid var(--fww-color-gray02);
  border-radius: 999em;
  background-color: var(--fww-color-white01);
  font-weight: 700;
  font-size: 117%;
  line-height: 1.71;
  text-decoration: none;
}
.fwwTag01::before {
  content: "#";
}
.fwwTag01--small01 {
  padding: 0 1.25em 0.15em;
  color: var(--fww-color-gray04);
  font-size: 100%;
}

label.fwwTag01 {
  cursor: pointer;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}
.fwwCheckBox01:checked + label.fwwTag01 {
  border-color: var(--fww-color-brown01);
  background-color: var(--fww-color-brown01);
  color: var(--fww-color-white01);
}
.fwwCheckBox01:focus-visible + label.fwwTag01 {
  outline: auto;
}

.d_hover a.fwwTag01,
.d_hover .fwwCheckBox01:not(:checked) + label.fwwTag01 {
  transition: opacity 0.3s ease-out;
}
.d_hover a.fwwTag01:hover,
.d_hover .fwwCheckBox01:not(:checked) + label.fwwTag01:hover {
  opacity: 0.5;
}

/* ==

　10. 注釈

=============================================================================== */
.fwwNotes01 {
  margin: 0.5em 0 0;
}
.fwwNotes01 > li {
  font-size: 134%;
  line-height: 1.6;
}
.fwwNotes01 > li:not(:first-child) {
  margin: 0.33em 0 0;
}

/* ==

　11. フォーム

=============================================================================== */
.fwwCheckBox01 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  clip-path: inset(50%);
}

/* ==

　12. カード

=============================================================================== */
.fwwCard01 {
  display: block;
  padding: 3.33em 9.32%;
  text-decoration: none;
}
.fwwCard01_img {
  position: relative;
  overflow: hidden;
}
.fwwCard01_img::before {
  display: block;
  padding-top: 66.66%;
  content: "";
}
.fwwCard01_img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
  width: 100%;
  height: 100%;
     object-fit: cover;
}
.fwwCard01_lead {
  margin: 1em 0 0;
  font-weight: 700;
  font-size: 167%;
  line-height: 1.8;
}
.fwwCard01_txt {
  margin: 1.07em 0 0;
  font-weight: 700;
  font-size: 117%;
  line-height: 1.71;
}
.fwwCard01_info {
  margin: 2.08em 0 0;
  padding: 1.66em 0 0;
  border-top: 1px solid var(--fww-color-gray02);
}

.d_hover .fwwCard01 .fwwCard01_img img {
  transition: transform 0.3s ease-out;
}
.d_hover .fwwCard01:hover .fwwCard01_img img {
  transform: var(--fww-hover-image-scale);
}

.fwwCard02 {
  display: block;
  text-decoration: none;
}
.fwwCard02_txt {
  margin: 1.11em 0 0;
  font-weight: 500;
  font-size: 150%;
  line-height: 1.33;
}
.fwwCard02_img {
  position: relative;
  overflow: hidden;
}
.fwwCard02_img::before {
  display: block;
  padding-top: 66.78%;
  content: "";
}
.fwwCard02_img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
  width: 100%;
  height: 100%;
     object-fit: cover;
}
.fwwCard02[target=_blank] .fwwCard02_txt::after {
  display: inline-block;
  width: 0.66em;
  height: 0.5em;
  background-color: var(--fww-color-white01);
  content: "";
  -webkit-mask: url(/business/fww/common/images/rn/ico_window01.svg) center/contain no-repeat;
  margin: 0 0 0.16em 0.55em;
          mask: url(/business/fww/common/images/rn/ico_window01.svg) center/contain no-repeat;
}

.d_hover .fwwCard02 .fwwCard02_img img {
  transition: transform 0.3s ease-out;
}
.d_hover .fwwCard02:hover .fwwCard02_img img {
  transform: var(--fww-hover-image-scale);
}

.fwwCard03 {
  display: block;
  text-decoration: none;
}
.fwwCard03_lead {
  margin: 1.25em 0 0;
  font-weight: 700;
  font-size: 134%;
  line-height: 1.75;
}
.fwwCard03_txt {
  margin: 1.42em 0 0;
  font-weight: 700;
  font-size: 117%;
  line-height: 1.71;
}
.fwwCard03_img {
  position: relative;
  overflow: hidden;
}
.fwwCard03_img::before {
  display: block;
  padding-top: 66.78%;
  content: "";
}
.fwwCard03_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 .fwwCard03 .fwwCard03_img img {
  transition: transform 0.3s ease-out;
}
.d_hover .fwwCard03:hover .fwwCard03_img img {
  transform: var(--fww-hover-image-scale);
}

/* ==

　13. ボタンラッパー

=============================================================================== */
.fwwBtnWrap01 {
  margin: 3.33em 0 0;
  text-align: center;
}

.fwwBtnWrap02 {
  margin: 3.33em 0 0;
  text-align: right;
}

/* ==

　14. ボタンリスト

=============================================================================== */
.fwwBtnList01 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.fwwBtnList01--hasBtn02 > li:nth-of-type(n+2) .fwwBtn02 {
  border-left: none;
}

.fwwBtnList02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}
.fwwBtnList02--start {
  justify-content: flex-start;
}

.fwwBtnList03 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.83em;
}

/* ==

　15. カードリスト

=============================================================================== */
.fwwCardList01 {
  overflow: hidden;
  border-bottom: 1px solid var(--fww-color-gray02);
}
.fwwCardList01_col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 3.33em -1px -1px;
  border-top: 1px solid var(--fww-color-gray02);
}
.fwwCardList01_item {
  margin: -1px 0 0 -1px;
  border: 1px solid var(--fww-color-gray02);
}
.fwwCardList01_item.is-hide {
  display: none;
}

/* ==

　16. Swiper(Override)

=============================================================================== */
/* Next / Prev button */
.swiper-button-next,
.swiper-button-prev {
  display: inline-flex;
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 4.91em;
  height: 4.91em;
  margin-top: 0;
  transform: none;
  border: 1px solid var(--fww-color-brown01);
  border-radius: 50%;
  background-color: transparent;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  width: 0.66em;
  height: 1.33em;
  background-color: var(--fww-color-brown01);
  content: "";
  font-size: initial;
  -webkit-mask: url(/business/fww/common/images/rn/ico_arrow01.svg) center/contain no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transform: translateX(20%);
          mask: url(/business/fww/common/images/rn/ico_arrow01.svg) center/contain no-repeat;
}
.d_hover .swiper-button-next,
.d_hover .swiper-button-prev {
  transition: background-color 0.3s ease-out;
}
.d_hover .swiper-button-next::after,
.d_hover .swiper-button-prev::after {
  transition: background-color 0.3s ease-out;
}
.d_hover .swiper-button-next:hover,
.d_hover .swiper-button-prev:hover {
  background-color: var(--fww-color-brown01);
}
.d_hover .swiper-button-next:hover::after,
.d_hover .swiper-button-prev:hover::after {
  background-color: var(--fww-color-white01);
}
.swiper-button-next--color01,
.swiper-button-prev--color01 {
  border-color: var(--fww-color-white01);
  background-color: rgba(255, 255, 255, 0.15);
}
.swiper-button-next--color01::after,
.swiper-button-prev--color01::after {
  background-color: var(--fww-color-white01);
}
.d_hover .swiper-button-next--color01:hover,
.d_hover .swiper-button-prev--color01:hover {
  background-color: var(--fww-color-white01);
}
.d_hover .swiper-button-next--color01:hover::after,
.d_hover .swiper-button-prev--color01:hover::after {
  background-color: var(--fww-color-brown01);
}
.swiper-button-next.swiper-button-lock,
.swiper-button-prev.swiper-button-lock {
  display: none;
}

.swiper-button-prev::after {
  transform: translateX(-20%) scale(-1, 1);
}

/* Pagenation */
.swiper-pagination {
  position: relative;
  margin: 0 0 0 -0.17em;
  text-align: left;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 0.16em;
}

.swiper-pagination-bullet {
  width: 1.83em;
  height: 2px;
  border-radius: 0;
  background-color: var(--fww-color-brown01);
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-pagination--color01 .swiper-pagination-bullet {
  background-color: var(--fww-color-white01);
}

/* Container */
.swiper {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
[class*=fnCarousel].is-loaded .swiper {
  opacity: 1;
}

/* Original */
.swiper-nav-wrapper {
  display: grid;
  grid-template-columns: 1fr 4.91em 4.91em;
  align-items: center;
  opacity: 0;
  -moz-column-gap: 3.33em;
       column-gap: 3.33em;
  margin: 4.16em 0 0;
  transition: opacity 0.5s ease-out;
}
[class*=fnCarousel].is-loaded .swiper-nav-wrapper {
  opacity: 1;
}

.swiper-control-wrapper {
  position: absolute;
  top: 1.66em;
  right: 1.66em;
}
.d_hover .swiper-control-wrapper .swiper-button-stop,
.d_hover .swiper-control-wrapper .swiper-button-play {
  transition: background-color 0.3s ease-out, opacity 0.3s ease-out;
}
.d_hover .swiper-control-wrapper .swiper-button-stop::before, .d_hover .swiper-control-wrapper .swiper-button-stop::after,
.d_hover .swiper-control-wrapper .swiper-button-play::before,
.d_hover .swiper-control-wrapper .swiper-button-play::after {
  transition: background-color 0.3s ease-out;
}
.d_hover .swiper-control-wrapper:hover .swiper-button-stop,
.d_hover .swiper-control-wrapper:hover .swiper-button-play {
  background-color: var(--fww-color-brown01);
}
.d_hover .swiper-control-wrapper:hover .swiper-button-stop::before, .d_hover .swiper-control-wrapper:hover .swiper-button-stop::after,
.d_hover .swiper-control-wrapper:hover .swiper-button-play::before,
.d_hover .swiper-control-wrapper:hover .swiper-button-play::after {
  background-color: var(--fww-color-white01);
}
.swiper-control-wrapper.is-paused .swiper-button-stop {
  opacity: 0;
  pointer-events: none;
}

.swiper-button-stop,
.swiper-button-play {
  position: absolute;
  top: 0;
  right: 0;
  width: 2em;
  height: 2em;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--fww-color-white01);
  cursor: pointer;
}
.swiper-button-stop::before, .swiper-button-stop::after,
.swiper-button-play::before,
.swiper-button-play::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: var(--fww-color-brown01);
  content: "";
}

.swiper-button-stop::before, .swiper-button-stop::after {
  width: 0.16em;
  height: 0.66em;
}
.swiper-button-stop::before {
  transform: translateX(0.16em);
}
.swiper-button-stop::after {
  transform: translateX(-0.17em);
}

.swiper-button-play::before {
  width: 0.5em;
  height: 0.66em;
  transform: translateX(25%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.swiper-button-play::after {
  content: none;
}

/* ==

　17. カルーセル

=============================================================================== */
.fwwCarousel01 {
  overflow: visible;
}
.fwwCarousel01:not(.swiper-initialized) .fwwCarousel01_slide {
  margin-right: 40px;
}
.fwwCarousel01_slide {
  width: calc((100% - 120px) / 4);
}
.fwwCarousel01[data-carousel-slides="3"] .fwwCarousel01_slide {
  width: calc((100% - 80px) / 3);
}

/* ==

　18. ローディング

=============================================================================== */
.fwwLoading01 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6.66em;
  height: 6.66em;
  margin: -3.34em 0 0 -3.34em;
  background: url(/common/images/rn04/svg/loading_ico01.svg) center center/contain no-repeat;
}

/* ==

　19. ファンクション

=============================================================================== */
[class*=fnCarousel] {
  position: relative;
}

.fnAcco01[data-acco-device=sp] {
  pointer-events: none;
}
.fnAcco01[data-acco-device=sp].fwwBtn03 > span {
  padding: 0;
}
.fnAcco01[data-acco-device=sp].fwwBtn03 > span::before, .fnAcco01[data-acco-device=sp].fwwBtn03 > span::after {
  content: none;
}
