@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: #00A1D2 !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;
}
#body_wrap.page-id-952 #main_content .l-mainContent__inner {
  margin-top: 100px !important;
}





#body_wrap.page-id-952 .wp-block-buttons {
  gap: 12px !important;  /* 間隔を狭める。数値はお好みで */
}

#body_wrap.page-id-952 .wp-block-buttons .wp-block-button {
  flex: 1 !important;     /* 幅を均等にする */
}

#body_wrap.page-id-952 .wp-block-buttons .wp-block-button__link {
  width: 100% !important;
  text-align: center !important;
}





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

@media (max-width: 767px) {
  .p-mainVisual__slideTitle {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
  .p-mainVisual__slideText {
    font-size: 14px !important;
    line-height: 1.7 !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;
}

/* コラムページ：ページタイトルをアイキャッチの上に重ねる */
#body_wrap.blog .c-pageTitle {
    position: absolute !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
    color: #fff !important;
}


/* コラムページ：ページタイトルと線を非表示 */
#body_wrap.blog .c-pageTitle {
    display: none !important;
}



.wp-block-group__inner-container:has(.feature-cards) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* サムメンテナンスについて ロゴ右寄せ (page-id-1036) */
.page-id-1036 .wp-block-columns .wp-block-column:first-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


.post_content h1.jigyo-title {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 40px !important;
  border-bottom: 2px solid #00A1D2 !important;
  padding-bottom: 2px !important;
}



/* ロゴ画像サイズ調整（縦横比のズレ修正＋サイズ指定） */
img.wp-image-3223,
img.wp-image-3227 {
  aspect-ratio: auto !important;
  width: 150px !important;
  height: auto !important;
}

img.wp-image-3222 {
  aspect-ratio: auto !important;
  width: 220px !important;
  height: auto !important;
}

/* カテゴリー別記事一覧ショートコード */
function fpl_category_posts_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'slug' => '',
        'posts_per_page' => 9,
    ), $atts );

    if ( empty( $atts['slug'] ) ) return '';

    $query = new WP_Query( array(
        'post_type'      => 'post',
        'posts_per_page' => intval( $atts['posts_per_page'] ),
        'category_name'  => sanitize_text_field( $atts['slug'] ),
        'paged'          => get_query_var('paged') ? get_query_var('paged') : 1,
    ) );

    if ( ! $query->have_posts() ) return '<p>記事がありません。</p>';

    ob_start();
    ?>
    <div class="fpl-post-list">
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <a href="<?php the_permalink(); ?>" class="fpl-post-list__item">
            <div class="fpl-post-list__thumb">
                <?php if ( has_post_thumbnail() ) : ?>
                    <?php the_post_thumbnail('medium'); ?>
                <?php else : ?>
                    <div class="fpl-post-list__no-image">NO IMAGE</div>
                <?php endif; ?>
            </div>
            <div class="fpl-post-list__body">
                <span class="fpl-post-list__date"><?php echo get_the_date('Y-m-d'); ?></span>
                <p class="fpl-post-list__title"><?php the_title(); ?></p>
            </div>
        </a>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>
    <?php if ( $query->max_num_pages > 1 ) : ?>
    <div class="fpl-post-list__pagination">
        <?php
        echo paginate_links( array(
            'total'   => $query->max_num_pages,
            'current' => get_query_var('paged') ? get_query_var('paged') : 1,
        ) );
        ?>
    </div>
    <?php endif; ?>
    <?php
    return ob_get_clean();
}
add_shortcode( 'fpl_category_posts', 'fpl_category_posts_shortcode' );






/* カテゴリーアーカイブ グリッド */
.cat-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 0;
}
@media (max-width: 768px) {
  .cat-archive-grid { grid-template-columns: 1fr; }
}
.cat-archive-card a {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}
.cat-archive-card a:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.cat-archive-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #aaa;
  overflow: hidden;
}
.cat-archive-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-archive-card__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}
.cat-archive-card__label {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 3px;
  background: #29b6d3;
}
.cat-archive-card__body {
  padding: 12px 16px 16px;
  background: #fff;
}
.cat-archive-card__date {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 6px;
}
.cat-archive-card__title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.5;
}

/* コラムページ タイトルh2左寄せ */
#body_wrap.blog .swell-block-fullWide h2.wp-block-heading {
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: -140px !important;
}


/* お問い合わせページ タイトル位置調整 */
#body_wrap.page-id-1469 .l-mainContent__inner {
  margin-top: 150px !important;
}