@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メインビジュアル テキストアニメーション用 */

/* アニメーション前の状態 */
/* メインテキスト（1文字ずつ） */

.mv_title .item {
    display: inline-block; 
    opacity: 0;
    transform: translateY(0.7em);
    will-change: opacity, transform;
}

/* サブテキスト（1行ずつ） */

.mv_txt .mv_txt_line {
    display: block; 
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

/* アニメーション実行後の状態（.activeクラスが付与されたとき） */
/* メインテキスト（1文字ずつ） */

.mv_title .item.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* サブテキスト（1行ずつ） */

.mv_txt .mv_txt_line.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}



/* デジタルエコシステム様 */

/* SWELLの親要素の中央揃え(u-ta-c)を無視して、枠を横幅いっぱいに広げる */
.p-mainVisual__textLayer .p-mainVisual__slideTitle {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* 1. テキストを囲むレイヤー全体を「左下」に固定する */
#main_visual .p-mainVisual__textLayer {
    top: auto !important;       /* 中央固定を解除 */
    bottom: 10% !important;    /* 【微調整用】下からの位置（%を小さくするとより下へ） */
    left: 0 !important;
    right: 0 !important;
    transform: none !important; /* 中央寄せの動きを完全に消去 */
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;  /* 下に寄せる */
    align-items: flex-start;    /* 左に寄せる */
    max-width: 100% !important; /* コンテナの幅制限を解除 */
    padding-left: 4% !important;/* 【微調整用】左からの位置（0に近づけるとより左へ） */
}

/* 2. タイトルの枠を左寄せにする */
.p-mainVisual__textLayer .p-mainVisual__slideTitle {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* 3. メインビジュアルのテキストデザイン（微調整反映済み） */
.custom-mv-text {
    display: block !important;
    text-align: left !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(20px, 4vw, 42px) !important; 
    line-height: 1.4 !important; /* 行間を少しだけ詰めました */
    text-shadow: none !important; 
    margin: 0 !important;
    padding: 0 !important;
}



/* 汎用スティッキー（左右どちらのカラムに入れてもOK） */
@media screen and (min-width: 960px) {
    .is-sticky-side {
        position: -webkit-sticky;
        position: sticky;
        top: 100px;
        align-self: flex-start;
        height: auto !important;
        z-index: 10;
        
        /* ↓これを追加：リンク単体でもブロック要素化してstickyを効かせる */
        display: block; 
    }

    .is-sticky-side > * {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }
}

/* -------------------------------------
 * スライダー（Swiper）
 * ------------------------------------- */

/* スライダー全体の枠 */
.my-farmer-swiper {
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
}

/* ★重要：カクカクせず、一定の速度で滑らかに流れ続けるようにする魔法のコード */
.my-farmer-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* 1枚あたりの幅（ご提示いただいた293pxを基準にします） */
.my-farmer-swiper .swiper-slide {
    width: 293px;
    text-align: center;
}

/* 画像のスタイル */
.my-farmer-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 角を少し丸くする（不要なら消してください） */
    object-fit: cover;
}

/* 農園名テキストのスタイル */
.kanta-farmer-name {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* スマホ表示の時は画像を少し小さくする調整 */
@media screen and (max-width: 599px) {
    .my-farmer-swiper .swiper-slide {
        width: 220px;
    }
}

/* ヘッダーのバー（キャッチフレーズエリア）の背景色変更 */
.l-header__bar.pc_ {
    background-color: #233B6C !important;
}

/* --- サイト全体：動く背景（パーティクル）の設定 --- */

/* 1. 背景を画面全体に固定 */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f0f8ff; /* サイト全体のベース背景色（薄い青） */
    z-index: -1; /* 一番背面に配置 */
}

/* 2. サイト全体の箱を透明化して、裏のパーティクルを透けさせる */
body,
#body_wrap,
#content,
.l-main,
.l-main__inner,
.post_content,
.l-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 3. 記事詳細ページの本文エリアなど、文字を読みやすくするために白くしたい場合の設定（お好みで） */
/* もし「文字が読みづらい」と感じたら、以下のコメントアウトを外してください */
/*
.post_content {
    background-color: rgba(255, 255, 255, 0.8) !important; 
    padding: 2em;
    border-radius: 8px;
}
*/

/* 初期状態：透明で下に配置 */
.scroll-anime {
    opacity: 0 !important;
    transform: translateY(40px); /* 少し移動距離を増やすとより「上がってきた感」が出ます */
    transition: opacity 1.5s cubic-bezier(0.33, 1, 0.68, 1), 
                transform 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}

/* 表示状態：不透明で元の位置 */
.scroll-anime.is-active {
    opacity: 1 !important;
    transform: translateY(0);
}