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


/* ========================================
   基本設定
   ======================================== */

html, body {
  overflow-x: hidden !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;
}

.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: rgba(255, 255, 255, 0.85) !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;
  margin-top: -13px !important;
}

#fix_header .sub-menu {
  margin-top: 0 !important;
  top: 100% !important;
}

#fix_header .c-gnav__link,
#fix_header .c-gnav__item > a,
#fix_header .menu-item > a,
#fix_header .menu-item > a .ttl {
  color: #333333 !important;
}


/* ========================================
   HOME以外のヘッダー
   ======================================== */

body:not(.home) .l-header {
  background-color: #3D79D5 !important;
  height: 60px !important;
}

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

body:not(.home) .l-header__logo {
  margin-top: -13px !important;
}

body:not(.home) .l-header__bar {
  display: none !important;
}

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: rgba(255, 255, 255, 0.85) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ヘッダー高さ分だけコンテンツを押し下げる */
body:not(.home) #content {
  margin-top: 70px !important;
  padding-top: 0 !important;
}


/* ========================================
   HOMEヘッダー（CaNow+風デザイン）
   ======================================== */

/* スクロール前のみ透明 */
.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 #header,
.home #header .l-header__inner,
.home #header .l-header__inner.l-container {
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  padding: 0 40px !important;
  box-sizing: border-box !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;
}

/* ロゴ */
.home #header .l-header__logo {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  height: 80px !important;
}

.home #header .l-header__logo img.c-headLogo__img {
  height: 44px !important;
  width: auto !important;
}

/* ナビゲーション：中央寄せ */
.home #header nav#gnav.l-header__gnav,
.home #gnav.l-header__gnav.c-gnavWrap {
  grid-column: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 80px !important;
  margin-top: 0 !important;
}

.home #header .l-header__gnav ul.c-gnav {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home #header .l-header__gnav .c-gnav > li {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.home #header .l-header__gnav .c-gnav > li > a {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #222 !important;
}

.home #header .l-header__gnav .c-gnav > li > a:hover {
  color: #3FA6F5 !important;
}

.home .c-gnav > .menu-item > a .ttl {
  color: #222 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* CTAボタン：右端 */
.home #header .l-header__customBtn,
.home #header .l-header__customBtn.sp_ {
  grid-column: 3 !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
}

.home #header .l-header__customBtn.sp_ a.c-iconBtn {
  background-color: #3FA6F5 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.home #header .l-header__customBtn.sp_ a.c-iconBtn:hover {
  background-color: #2C73AB !important;
}

.home #header .l-header__customBtn.sp_ a::after {
  content: "›" !important;
  font-size: 18px !important;
}

.home #gnav {
  margin-top: -30px !important;
  position: relative !important;
}


/* ========================================
   コンテンツ余白
   ======================================== */

/* HOME：上余白なし */
.home #body_wrap,
.home .l-content,
.home #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* パンくずリストを非表示 */
.c-breadcrumb,
.p-breadcrumb {
  display: none !important;
}


/* ========================================
   コンテンツ全幅化（HOME）
   ======================================== */

.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;
}

.home .swell-block-step {
  padding-left: 60px !important;
}

.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;
}


/* ========================================
   固定ページ
   ======================================== */

.page .c-pageTitle {
  display: none;
}

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

.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;
}

.point-wrapper.wp-block-columns {
  gap: 0 !important;
  column-gap: 0 !important;
  padding: 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;
}

.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;
}


/* ========================================
   アニメーション
   ======================================== */

.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);
  }
}

#my-custom-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}