@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/






/* ==================================================
   田澤工務店：SWELL固定ページ タイトルスライド共通CSS
================================================== */

/* ==================================================
   アーカイブページ：タイトル色と左寄せ
================================================== */

#body_wrap.tzw-archive-title-custom #top_title_area {
  position: relative;
  isolation: isolate;
}

#body_wrap.tzw-archive-title-custom
#top_title_area
.l-topTitleArea__body {
  position: absolute !important;
  z-index: 4;
  top: 50% !important;
  left: clamp(36px, 6vw, 76px) !important;
  right: clamp(36px, 6vw, 76px) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  transform: translateY(-50%) !important;
  text-align: left !important;
}

#body_wrap.tzw-archive-title-custom
#top_title_area
.l-topTitleArea__body
.c-pageTitle {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.3em 0.55em 0.36em !important;
  color: var(--tzw-archive-title-color, #ffffff) !important;
  background: var(--tzw-archive-title-background, #24191a) !important;
  border: 0 !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: none !important;
  text-align: left !important;
}

#body_wrap.tzw-archive-title-custom.tzw-archive-title-no-background
#top_title_area
.l-topTitleArea__body
.c-pageTitle {
  background: transparent !important;
}

#body_wrap.tzw-title-slideshow-active #top_title_area,
#body_wrap.tzw-archive-slideshow-active #top_title_area {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* 数値指定：PCとスマホで個別の高さ */
#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-title-height--fixed {
  height: var(--tzw-title-height-pc, 560px) !important;
  min-height: var(--tzw-title-height-pc, 560px) !important;
  max-height: none !important;
}

/* 画面サイズにフィット：固定ヘッダーは画像へ重なるため差し引かない */
#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-title-height--viewport {
  height: 100vh !important;
  height: 100svh !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  max-height: none !important;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area
> .tzw-title-slide,
#body_wrap.tzw-archive-slideshow-active
#top_title_area
> .tzw-title-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none;
  will-change: opacity;
}

/*
 * SWELLメインビジュアルの「左から右へ」相当。
 * 画像を少し拡大して動かすことで、端に余白を出さない。
 */
@keyframes tzw-title-slide-left-to-right {
  0% {
    transform: scale(1.1) translateX(-1%);
  }
  100% {
    transform: scale(1.1) translateX(1%);
  }
}

#body_wrap.tzw-title-slideshow-active
#top_title_area
> .tzw-title-slide--pan {
  transform-origin: center center;
  animation: tzw-title-slide-left-to-right 10s linear 0s 1 normal both;
  will-change: opacity, transform;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-title-swipe-enabled {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-title-swipe-enabled.is-dragging {
  cursor: grabbing;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-title-swipe-enabled a,
#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-title-swipe-enabled button {
  cursor: pointer;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area
> .tzw-title-slide--current,
#body_wrap.tzw-archive-slideshow-active
#top_title_area
> .tzw-title-slide--current {
  z-index: 0 !important;
  opacity: 1 !important;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area
> .tzw-title-slide--next,
#body_wrap.tzw-archive-slideshow-active
#top_title_area
> .tzw-title-slide--next {
  z-index: 0 !important;
  opacity: 0 !important;
  transition: opacity 1.1s ease !important;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area
> .tzw-title-slide--next.is-visible,
#body_wrap.tzw-archive-slideshow-active
#top_title_area
> .tzw-title-slide--next.is-visible {
  opacity: 1 !important;
}

#body_wrap.tzw-title-slideshow-active #top_title_area .l-topTitleArea__body {
  position: absolute !important;
  z-index: 4;
  top: 50% !important;
  left: clamp(36px, 6vw, 76px) !important;
  right: clamp(36px, 6vw, 76px) !important;
  width: auto !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  transform: translateY(-50%) !important;
  text-align: left !important;
}

/* 写真上でもページタイトルを読みやすくする */
#body_wrap.tzw-title-slideshow-active
#top_title_area
.l-topTitleArea__body
.c-pageTitle {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.3em 0.55em 0.36em !important;
  color: var(--tzw-title-color, #ffffff) !important;
  background: var(--tzw-title-background, #24191a) !important;
  border: 0 !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: none !important;
  text-align: left !important;
}

#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-title-no-background
.l-topTitleArea__body
.c-pageTitle {
  background: transparent !important;
}

/* PHPのbodyクラスでも透明化し、JSのキャッシュ影響を受けないようにする */
#body_wrap.tzw-title-slideshow-active.tzw-page-title-no-background
#top_title_area
.l-topTitleArea__body
.c-pageTitle {
  background: transparent !important;
}

/* 左下：任意のURLを設定できるリンク（最大4個） */
#body_wrap.tzw-title-slideshow-active #top_title_area > .tzw-title-left-link-list {
  position: absolute;
  z-index: 10;
  left: clamp(20px, 5vw, 76px);
  bottom: clamp(22px, 3vw, 42px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(650px, 58vw);
}

#body_wrap.tzw-title-slideshow-active #top_title_area .tzw-title-left-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 145px;
  min-height: 50px;
  padding: 12px 22px;
  color: var(--tzw-title-left-link-color, #ffffff) !important;
  background: var(--tzw-title-left-link-background, #24191a) !important;
  border: 1px solid transparent;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  transition:
    filter 0.25s ease,
    transform 0.25s ease;
}

#body_wrap.tzw-title-slideshow-active #top_title_area .tzw-title-left-link:hover {
  color: var(--tzw-title-left-link-color, #ffffff) !important;
  filter: brightness(0.9);
  transform: translateY(-2px);
}

#body_wrap.tzw-title-slideshow-active.tzw-left-links-no-background
#top_title_area
.tzw-title-left-link,
#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-left-links-no-background
.tzw-title-left-link {
  background: transparent !important;
}

/* 右下：色を編集画面で変更できるテキストリンク */
#body_wrap.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link {
  position: absolute;
  z-index: 10;
  right: clamp(20px, 5vw, 76px);
  bottom: clamp(22px, 3vw, 42px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(360px, 34vw);
  min-height: 50px;
  padding: 12px 24px;
  color: var(--tzw-title-link-color, #ffffff) !important;
  background: var(--tzw-title-link-background, #ff4444) !important;
  border: 1px solid transparent;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}

#body_wrap.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link:hover {
  color: var(--tzw-title-link-color, #ffffff) !important;
  filter: brightness(0.9);
  transform: translateY(-2px);
}

#body_wrap.tzw-title-slideshow-active.tzw-right-link-no-background
#top_title_area
> .tzw-title-text-link,
#body_wrap.tzw-title-slideshow-active
#top_title_area.tzw-right-link-no-background
> .tzw-title-text-link {
  background: transparent !important;
}

#body_wrap.tzw-title-slideshow-active #top_title_area .tzw-title-left-link:focus-visible,
#body_wrap.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link:focus-visible {
  outline: 3px solid rgba(255, 68, 68, 0.75);
  outline-offset: 4px;
}

/* 左右のリンク共通：編集画面で選択する3種類の形状 */
#body_wrap.tzw-title-slideshow-active #top_title_area .tzw-shape--pill {
  border-radius: 999px !important;
}

#body_wrap.tzw-title-slideshow-active #top_title_area .tzw-shape--rounded {
  border-radius: 10px !important;
}

#body_wrap.tzw-title-slideshow-active #top_title_area .tzw-shape--square {
  border-radius: 0 !important;
}

@keyframes tzw-title-slide-left-to-right-mobile {
  0% {
    transform: scale(1.15) translateX(-1.5%);
  }
  100% {
    transform: scale(1.15) translateX(1.5%);
  }
}

@media (max-width: 959px) {
  #body_wrap.tzw-title-slideshow-active
  #top_title_area
  > .tzw-title-slide--pan {
    animation-name: tzw-title-slide-left-to-right-mobile;
  }
}

@media (max-width: 640px) {
	#body_wrap.tzw-archive-title-custom #top_title_area .l-topTitleArea__body {
		left: 36px !important;
		right: 36px !important;
	}

  #body_wrap.tzw-title-slideshow-active
  #top_title_area.tzw-title-height--fixed {
    height: var(--tzw-title-height-mobile, 620px) !important;
    min-height: var(--tzw-title-height-mobile, 620px) !important;
  }

  #body_wrap.tzw-title-slideshow-active #top_title_area .l-topTitleArea__body {
    left: 36px !important;
    right: 36px !important;
  }

  #body_wrap.tzw-title-slideshow-active #top_title_area > .tzw-title-left-link-list {
    left: 16px;
    right: 16px;
    bottom: 18px;
    width: auto;
    max-width: none;
  }

  #body_wrap.tzw-title-slideshow-active
  #top_title_area.has-tzw-title-link
  > .tzw-title-left-link-list {
    bottom: 82px;
  }

  #body_wrap.tzw-title-slideshow-active #top_title_area .tzw-title-left-link {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 44px;
    padding: 9px 12px;
    font-size: 11px;
  }

  #body_wrap.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link {
    right: 16px;
    bottom: 18px;
    max-width: calc(100% - 32px);
    min-height: 46px;
    padding: 10px 20px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #body_wrap.tzw-title-slideshow-active
  #top_title_area
  > .tzw-title-slide--pan {
    animation: none !important;
    transform: none !important;
  }

  #body_wrap.tzw-title-slideshow-active
  #top_title_area
  > .tzw-title-slide--next {
    display: none !important;
    transition: none !important;
  }

  #body_wrap.tzw-title-slideshow-active #top_title_area .tzw-title-left-link,
  #body_wrap.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link {
    transition: none !important;
  }
}

/* ==================================================
   カスタマイザー：タイトルエリア／本文ボタン共通背景画像
================================================== */

#body_wrap.tzw-common-button-image-active.tzw-title-slideshow-active #top_title_area .tzw-title-left-link,
#body_wrap.tzw-common-button-image-active.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link,
#body_wrap.tzw-common-button-image-active .l-mainContent .wp-block-button__link,
#body_wrap.tzw-common-button-image-active .l-mainContent .swell-block-button__link,
#body_wrap.tzw-common-button-image-active .l-mainContent .recruit-entry-cta__button a,
#body_wrap.tzw-common-button-image-active .l-mainContent .entry__button,
#body_wrap.tzw-common-button-image-active .l-mainContent .c-tabList__button,
#body_wrap.tzw-common-button-image-active .l-mainContent .forminator-button-submit,
#body_wrap.tzw-common-button-image-active #main_content .wp-block-button__link,
#body_wrap.tzw-common-button-image-active #main_content .swell-block-button__link,
#body_wrap.tzw-common-button-image-active #main_content .recruit-entry-cta__button a,
#body_wrap.tzw-common-button-image-active #main_content .entry__button,
#body_wrap.tzw-common-button-image-active #main_content .c-tabList__button,
#body_wrap.tzw-common-button-image-active #main_content .forminator-button-submit {
  background-color: transparent !important;
  background-image: var(--tzw-common-button-background-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

#body_wrap.tzw-common-button-image-active.tzw-title-slideshow-active #top_title_area .tzw-title-left-link:hover,
#body_wrap.tzw-common-button-image-active.tzw-title-slideshow-active #top_title_area .tzw-title-left-link:focus-visible,
#body_wrap.tzw-common-button-image-active.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link:hover,
#body_wrap.tzw-common-button-image-active.tzw-title-slideshow-active #top_title_area > .tzw-title-text-link:focus-visible,
#body_wrap.tzw-common-button-image-active .l-mainContent .wp-block-button__link:hover,
#body_wrap.tzw-common-button-image-active .l-mainContent .wp-block-button__link:focus-visible,
#body_wrap.tzw-common-button-image-active .l-mainContent .swell-block-button__link:hover,
#body_wrap.tzw-common-button-image-active .l-mainContent .swell-block-button__link:focus-visible,
#body_wrap.tzw-common-button-image-active .l-mainContent .recruit-entry-cta__button a:hover,
#body_wrap.tzw-common-button-image-active .l-mainContent .recruit-entry-cta__button a:focus-visible,
#body_wrap.tzw-common-button-image-active .l-mainContent .entry__button:hover,
#body_wrap.tzw-common-button-image-active .l-mainContent .entry__button:focus-visible,
#body_wrap.tzw-common-button-image-active .l-mainContent .c-tabList__button:hover,
#body_wrap.tzw-common-button-image-active .l-mainContent .c-tabList__button[aria-selected="true"],
#body_wrap.tzw-common-button-image-active .l-mainContent .forminator-button-submit:hover,
#body_wrap.tzw-common-button-image-active .l-mainContent .forminator-button-submit:focus-visible,
#body_wrap.tzw-common-button-image-active #main_content .wp-block-button__link:hover,
#body_wrap.tzw-common-button-image-active #main_content .wp-block-button__link:focus-visible,
#body_wrap.tzw-common-button-image-active #main_content .swell-block-button__link:hover,
#body_wrap.tzw-common-button-image-active #main_content .swell-block-button__link:focus-visible,
#body_wrap.tzw-common-button-image-active #main_content .recruit-entry-cta__button a:hover,
#body_wrap.tzw-common-button-image-active #main_content .recruit-entry-cta__button a:focus-visible,
#body_wrap.tzw-common-button-image-active #main_content .entry__button:hover,
#body_wrap.tzw-common-button-image-active #main_content .entry__button:focus-visible,
#body_wrap.tzw-common-button-image-active #main_content .c-tabList__button:hover,
#body_wrap.tzw-common-button-image-active #main_content .c-tabList__button[aria-selected="true"],
#body_wrap.tzw-common-button-image-active #main_content .forminator-button-submit:hover,
#body_wrap.tzw-common-button-image-active #main_content .forminator-button-submit:focus-visible {
  background-color: transparent !important;
  background-image: var(--tzw-common-button-background-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* カスタムフッターはSWELLの #body_wrap 終了後に出力されるため直接指定する。 */
.tazawa-footer.footer .footer__content__notice__area__block__btn .link,
.tazawa-footer.footer .footer__content__notice__area__block__btn .link:hover,
.tazawa-footer.footer .footer__content__notice__area__block__btn .link:focus-visible {
  background-image: var(--tzw-common-button-background-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* 求人ページに個別のタブ背景画像が残っていても、共通画像を優先する。 */
#body_wrap.tzw-common-button-image-active.tzw-recruit-tab-image-active.page-id-16
.recruit-info__tabs
.c-tabList__button,
#body_wrap.tzw-common-button-image-active.tzw-recruit-tab-image-active.page-id-16
.recruit-info__tabs
.c-tabList__button:hover,
#body_wrap.tzw-common-button-image-active.tzw-recruit-tab-image-active.page-id-16
.recruit-info__tabs
.c-tabList__button[aria-selected="true"],
#body_wrap.tzw-common-button-image-active.page-id-16
.recruit-entry-cta__button
a,
#body_wrap.tzw-common-button-image-active.page-id-16
.recruit-entry-cta__button
.wp-block-button__link,
#body_wrap.tzw-common-button-image-active.page-id-16
.recruit-entry-cta__button
a:hover,
#body_wrap.tzw-common-button-image-active.page-id-16
.recruit-entry-cta__button
.wp-block-button__link:hover {
  background-color: transparent !important;
  background-image: var(--tzw-common-button-background-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}