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

/* ===================================================
 * 右クリックコピー禁止
 * =================================================== */
img {
pointer-events: none;
}

/* ===================================================
 * トップページFV直上の余白リセット
 * =================================================== */
.top #content,
.top .l-content {
  padding-top: 0 !important;
}

/* ================= *
 * メインビジュアル  *
 * ================= */

/* 左カラム内の画像全体のレスポンシブ基本設定 */
.main-left-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── PC表示時の重ね合わせ設定（画面横幅960px以上） ── */
@media (min-width: 960px) {
  /* カラム自体のはみ出し（隠蔽）を許可する設定 */
  .main-left-col,
  .main-right-col {
    overflow: visible !important;
  }

  /* 左カラム：高さの同期と下揃えの基盤設定 */
  .main-left-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* 中身を一番下に配置 */
    height: 100% !important; /* 右カラムと高さを完全に一致させる */
  }

  /* 左カラムの中身（ラッパー）：ここでサイズ・位置・下揃えを完全制御 */
  .main-left-wrapper {
    width: 130% !important; /* ★文字画像の大きさを調整（小さくしたい場合は 80%〜90% に変更） */
    max-width: none !important;
    margin-top: auto !important; /* 確実に最下部へ押し下げる */
    
    /* カラムの幅を壊さずに、右側（写真側）へ安全に重ねる設定 */
    position: relative !important;
    z-index: 10 !important;
    transform: translateX(10%) !important; /* ★右側への寄せ具合（数値を大きくすると右に寄り、左の余白が増えます） */
    
    pointer-events: none; /* 文字画像の下にあるスライダーの操作を邪魔しない */
  }
}


/* ===================================================
 * スマホ専用メインビジュアル調整
 * =================================================== */
@media (max-width: 959px) {
  /* スマホ版全体コンテナ */
  .sp-main-visual-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* 写真スライダーのスタイル設定 */
  .sp-main-photo-swiper {
    width: 100%;
    position: relative;
    z-index: 1; /* 写真は背面に配置 */
  }

  .sp-main-photo-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; /* ★スマホでの写真の縦横比（縦長にきれいに収まります） */
    object-fit: cover;
    display: block;
  }

  /* 文字画像：写真の上（前面）へ重ねる設定 */
  .sp-main-text-wrapper {
    position: relative;
    z-index: 10; /* ★写真を上に跨いで前面に表示する */
    margin-top: -80px; /* ★写真側（上方向）への食い込み具合（数値を大きくすると上に移動します） */
    padding: 0 16px; /* 画面端にぴったりくっつかないための左右余白 */
    pointer-events: none; /* 下にあるスライダーの操作を妨げない */
  }

  .sp-main-text-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* Smash Balloon のフォローボタン（aタグ）の上マージンを強制リセット */
#sb_instagram .sbi_follow_btn a[href*="instagram.com"] {
    margin-top: 0 !important;
}

/* PCでは非表示 */
.floating-cta{
    display:none;
}

@media (max-width:767px){

.floating-cta{
    display:block;
    position:fixed;
    left:0;
    bottom:-120px;
    width:100%;
    z-index:999;
    transition:all .35s ease;
}

/* 表示状態 */
.floating-cta.show{
    bottom:0;
}

}