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

/* ==== Split MV (66/34) ==== */
.mv-split { position: relative; }
.mv-split__inner { position: relative; min-height: min(68vh, 760px); }

@media (min-width:1025px){
  .mv-split__inner {
    display: grid;
    grid-template-columns: 66% 34%;
    align-items: stretch;
  }
  .mv-split__img { grid-column: 1 / 2; }
  .mv-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .mv-split__content {
    grid-column: 2 / 3;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(24px, 3.5vw, 48px);
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    text-align: left;
  }
}

@media (max-width:1024px){
  .mv-split__img { height: 56vh; min-height: 320px; }
  .mv-split__img img { width: 100%; height: 100%; object-fit: cover; }
  .mv-split__content {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 760px);
    padding: 0; background: transparent; box-shadow: none;
    text-align: center; color: #fff;
  }
}
/* === TOP MV をフルワイド＆上部の余白ゼロ（SWELL用） === */

/* 1) MVセクションを“コンテナ外”にフルブリード */
.home .mv-split{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;   /* コンテナから抜けて */
  margin-right: -50vw;  /* 画面幅いっぱいに */
  width: 100vw;
  margin-top: 0 !important;
}

/* 2) ページ側の上余白を消す（テーマのパディング打ち消し） */
.home .l-content,
.home .l-contents,
.home .c-container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3) MV直下の要素の“上マージン相殺”対策（余白が出るテーマ設定向け） */
.home .mv-split + *{
  margin-top: 0 !important;
}

/* 4) 固定ヘッダーを重ねたい場合（ヘッダーを透過重ねにする）※任意
   ─ ヘッダーの下にMVを密着させたい時だけ有効化してください
.home .l-header{
  position: absolute;
  left: 0; top: 0; width: 100%;
  background: transparent; box-shadow: none;
  z-index: 50;
}
*/
/* === SP時：右カラムを画像の下に縦並び（オーバーレイをやめる） === */
@media (max-width:1024px){
  /* グリッド解除して通常フローに */
  .mv-split__inner { display:block; min-height:auto; }

  /* 画像はそのまま全幅 */
  .mv-split__img { height:auto; }
  .mv-split__img img { width:100%; height:auto; object-fit:cover; display:block; }

  /* 右側コンテンツを下に配置（絶対配置を解除） */
  .mv-split__content{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none;
    margin: 0;                      /* 余白はここで調整 */
    padding: 24px 20px;             /* 好みで */
    background: #fff;               /* 白地カードに */
    color: #000;                    /* 文字は黒 */
    box-shadow: none;               /* 影不要なら */
    text-align: left;               /* 中央寄せにしたければ center */
  }

  /* ブログパーツ内の微調整（任意） */
  .mv-split .mv-right{ padding:0; max-width:720px; margin:0 auto; }
  .mv-split .mv-right p{ text-shadow:none; } /* 以前の画像上用影を無効化 */
}

/* 縦並び時に少し余白を入れたい場合（任意） */
@media (max-width:1024px){
  .mv-split__content { margin-top: 8px; }
}

/* --- SP：ヘッダーをsticky表示（重なり防止・背景あり） --- */
@media (max-width: 767px){
  /* SWELLのfixed化を無効にしてstickyに */
  .l-header,
  .l-header.is-fixed{
    position: sticky !important;
    top: 0;
    left: 0; right: 0;
    z-index: 1000;
    background: #001F3F;          /* お好みの色に */
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
}