@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
*/

/* コンテンツ全幅化 */
.home .l-content,
.home .l-container,
.home .l-mainContent,
.home .l-mainContent__inner,
.home .post_content,
.home #content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* STEPブロックの左余白を確保 */
.home .swell-block-step {
  padding-left: 60px !important;
}

/* fullWideブロック全幅化 */
.home .swell-block-fullWide,
.home .alignfull {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ヘッダー透明化・全幅・重ねる（スクロール前のみ） */
.home:not(.scrolled) .l-header,
.home:not(.scrolled) .l-header__bar,
.home:not(.scrolled) .l-header__inner,
.home:not(.scrolled) #header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
}

/* 余白除去 */
.home #body_wrap,
.home .l-content,
.home #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html, body {
  overflow-x: hidden !important;
}

/* POINTカラムの隙間をなくす */
.point-wrapper.wp-block-columns {
  gap: 0 !important;
  column-gap: 0 !important;
}

.point-wrapper.wp-block-columns > .wp-block-column {
  padding: 0 !important;
  margin: 0 !important;
}

.point-wrapper.wp-block-columns .wp-block-column + .wp-block-column {
  margin-left: 0 !important;
}

.point-wrapper.wp-block-columns {
  padding: 0 !important;
}

/* 料金システム セクションの青い線を非表示 */
.section-title-wrap,
.section-title-wrap::before,
.section-title-wrap::after {
  border: none !important;
  outline: none !important;
}

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
  border-top: none !important;
  border-bottom: none !important;
}

/* 水のトラブルセンター タイトルを紫に */
h3.suido-title {
  color: #9b8ec4 !important;
}

/* お知らせカテゴリーバッジ */
.p-postList__cat[data-cat-id="2"] {
  background-color: #4CAF50 !important;
  border-radius: 50px !important;
  color: #fff !important;
}

/* 料金システム */
h2.pricing-table {
  width: 100% !important;
  max-width: 1290px !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

figure.wp-block-table.pricing-table {
  max-width: 1290px !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.p-postListWrap:has(h2.pricing-table) {
  padding-left: 60px !important;
  padding-right: 60px !important;
  box-sizing: border-box;
}

/* 固定ページのタイトルを非表示＋余白も削除 */
.page .c-pageTitle {
  display: none;
}

.page .l-mainContent__inner {
  margin-top: -130px;
}

/* WORKページのコンテンツ全幅化 */
.page-id-952 .l-mainContent__inner,
.page-id-952 .post_content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WORKのカテゴリ */
.my-category-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 20px 0 !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
}

.my-category-list__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 16px 8px !important;
  border-right: 1px solid #e0e0e0 !important;
  text-decoration: none !important;
  color: #333 !important;
  background: #fff !important;
  transition: background 0.2s ease !important;
}

.my-category-list__item:last-child {
  border-right: none !important;
}

.my-category-list__img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.my-category-list__name {
  font-size: 16px !important;
  font-weight: 550 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.my-category-list__item.salon:hover .my-category-list__name {
  color: #f08080 !important;
}

.my-category-list__item.salon:hover {
  background: #fff0f0 !important;
}

.my-category-list__item.smartphone:hover .my-category-list__name {
  color: #9b8ec4 !important;
}

.my-category-list__item.smartphone:hover {
  background: #f5f0ff !important;
}

.my-category-list__item.software:hover .my-category-list__name {
  color: #29b6d8 !important;
}

.my-category-list__item.software:hover {
  background: #f0fafd !important;
}

.my-category-list__item.restaurant:hover .my-category-list__name {
  color: #ff8c00 !important;
}

.my-category-list__item.restaurant:hover {
  background: #fff8f0 !important;
}

/* メインビジュアル タイトル文字サイズ */
.p-mainVisual__slideTitle {
  font-weight: 700 !important;
  font-size: 3vw !important;
}

/* ヘッダーナビ文字色：白 */
.l-header .c-gnav__link,
.l-header .c-gnav__item > a,
.l-header .c-gnav > ul > li > a,
#header .c-gnav__link,
#header .c-gnav__item > a,
.l-header.is-scrolled .c-gnav__link,
.l-header.is-scrolled .c-gnav__item > a,
#header.is-scrolled .c-gnav__link,
#header.is-scrolled .c-gnav__item > a,
.l-header--fixed .c-gnav__link,
.l-header--fixed .c-gnav__item > a,
.c-gnav > .menu-item > a .ttl,
.c-gnav > .menu-item > a,
.l-header__gnav .menu-item > a .ttl,
.l-header__gnav .menu-item > a {
  color: #ffffff !important;
}

/* ナビメニューを中央寄せ・上に配置 */
.home .l-header__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
}

.l-header__gnav {
  grid-column: 2 !important;
  margin-top: -30px !important;
  margin-left: 0 !important;
}

.c-gnavWrap {
  justify-content: center !important;
  display: flex !important;
}

.l-header__logo {
  margin-left: 20px !important;
}

.c-gnav > li {
  padding: 0 25px !important;
}

.c-gnav .sub-menu {
  top: 100% !important;
  margin-top: 10px !important;
}

/* 追従ヘッダー背景色 */
#fix_header,
#fix_header .l-fixHeader__inner {
  background-color: #c00 !important;
}

/* 追従ヘッダー内ロゴサイズ */
#fix_header .c-headLogo__img {
  height: 45px !important;
  width: auto !important;
  max-width: none !important;
}

/* 追従ヘッダー内ロゴ位置 */
#fix_header .l-fixHeader__logo {
  margin-left: 20px !important;
}

/* 追従ヘッダー内ロゴ位置 縦 */
#fix_header .l-fixHeader__logo {
  margin-top: -13px !important;
}

/* 追従ヘッダー サブメニュー隙間をなくす */
#fix_header .sub-menu {
  margin-top: 0 !important;
  top: 100% !important;
}

/* HOME以外のヘッダー背景色を赤に */
body:not(.home) .l-header {
  background-color: #c00 !important;
}

/* HOME以外のヘッダーの高さ */
body:not(.home) .l-header {
  height: 60px !important;
}

body:not(.home) .l-header__inner {
  height: 60px !important;
  min-height: 60px !important;
}

/* HOME以外のヘッダー ロゴ位置 */
body:not(.home) .l-header__logo {
  margin-top: -13px !important;
}

/* HOME以外のヘッダーバーを非表示 */
body:not(.home) .l-header__bar {
  display: none !important;
}

/* HOME以外のヘッダー ナビ位置 */
body:not(.home) .l-header__gnav {
  margin-top: 1px !important;
}

/* 追従ヘッダー 両端を赤く */
body:not(.home) #fix_header,
body:not(.home) #fix_header .l-fixHeader__inner {
  background-color: #c00 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* HOMEのナビメニュー位置 */
.home #gnav {
  margin-top: -30px !important;
  position: relative !important;
}

/* フェードイン */
.anim-box.fadein {
  opacity: 0;
}
.anim-box.fadein.is-animated {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 下からスライドイン */
.anim-box.slidein-up {
  opacity: 0;
  transform: translateY(40px);
  transition: none;
}

.anim-box.slidein-up.is-animated {
  animation: slideInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}