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

/* =========================================================
   GA HOUSE — SWELL Top Main Visual Custom CSS (Final)
   目的：
   1) 横書き（メイン/サブ）＝画像の上に左揃えで配置
   2) 右端に縦書きコピーを重ねて表示（上品フェードイン）
   3) 競合スタイルを打ち消して安定表示
   スコープ：全ページ（必要なら .home を先頭に付与）
   ========================================================= */


/* ================================
   [0] 競合の打ち消し（保険）
   — 以前の textLayer 擬似要素を無効化
   ================================ */
.p-mainVisual__textLayer::after { content: none !important; }


/* ================================
   [1] ベース土台
   — z-indexの独立空間/isolationで重なり安定化
   ================================ */
.p-mainVisual {
  position: relative;
  isolation: isolate;
}


/* ================================
   [2] 右端の縦書きコピー（文言はここ）
   — 改行は \A、位置は right / bottom
   ================================ */
.p-mainVisual::after{
  content:"短時間やコスト\A　高性能を求める方";  /* ← 文言編集 */
  white-space:pre;

  /* 位置 */
  position:absolute; 
  right:55px;         /* 右からの距離（調整ポイント） */
  bottom:160px;       /* 下からの距離（調整ポイント） */

  /* 縦書き＆見た目 */
  writing-mode:vertical-rl;
  font-size:clamp(32px,4.2vw,56px);
  line-height:1.35;
  letter-spacing:.08em;
  font-weight:400;
  font-family:"Noto Serif JP","游明朝体","Yu Mincho",
              "Hiragino Mincho ProN","HGS明朝E",serif;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.4);

  /* 重なり＆アニメ */
  z-index:30;
  pointer-events:none;
  transform:translateY(20px);
  opacity:0;
  animation:mvFadeIn 1.6s ease-out .3s forwards; /* ふわっと表示 */
}


/* ================================
   [3] 横書き：メイン/サブ見出しの配置
   — 要素を直接絶対配置（左揃え）
   ================================ */
.p-mainVisual__title,
.p-mainVisual__subTitle{
  position:absolute !important;          /* 画像の上に重ねる */
  left:clamp(24px,6vw,140px);            /* 左余白（調整ポイント） */
  width:min(92vw, 760px);                 /* 行長制御で可読性UP */
  text-align:left !important;
  margin:0;

  /* レイヤー＆表示を強制（競合対策） */
  z-index:21 !important;
  color:#fff;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto;
}

/* 縦位置：タイトルとサブの高さ（お好みで数px調整） */
.p-mainVisual__title    { bottom:160px; }
.p-mainVisual__subTitle { bottom:120px; }

/* ▼ タイトル/サブにもフェードを付けたい場合は解除して使用*/
.p-mainVisual__title{    animation: mvFadeIn 1.2s ease-out .15s forwards; }
.p-mainVisual__subTitle{ animation: mvFadeIn 1.2s ease-out .25s forwards; }



/* ================================
   [4] フェードイン共通キーフレーム
   ================================ */
@keyframes mvFadeIn{
  0%   { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}


/* ================================
   [5] スマホ最適化（≤767px）
   — 縦書きの位置と横書きの左右/高さを微調整
   ================================ */
@media (max-width:767px){
  .p-mainVisual::after{
    right:20px;
    bottom:390px;
    font-size:clamp(22px,6vw,34px);
    text-shadow:0 1px 4px rgba(0,0,0,.35);
    animation:mvFadeIn 1.8s ease-out .2s forwards;
  }
  .p-mainVisual__title{
    left:clamp(16px,5vw,48px);
    bottom:110px;
    width:88vw;
  }
  .p-mainVisual__subTitle{
    left:clamp(16px,5vw,48px);
    bottom:78px;
    width:88vw;
  }
}


/* ================================
   [6] オプション（必要時だけ使用）
   — トップページだけに限定する場合は .home を先頭に付与
   例） .home .p-mainVisual { … }
   — 下寄せにしたいときは以下を有効化
   ================================ */
/*
.p-mainVisual__title,
.p-mainVisual__subTitle{ bottom: unset; }
.p-mainVisual__title{ bottom: 96px; }
.p-mainVisual__subTitle{ bottom: 64px; }
*/

/* タイトル/サブを含むテキストレイヤー配下すべてを明朝に */
.p-mainVisual__textLayer,
.p-mainVisual__textLayer *,
.p-mainVisual .p-mainVisual__title,
.p-mainVisual .p-mainVisual__title *,
.p-mainVisual .p-mainVisual__subTitle,
.p-mainVisual .p-mainVisual__subTitle *{
  font-family: "Noto Serif JP","游明朝体","Yu Mincho",
               "Hiragino Mincho ProN","HGS明朝E",serif !important;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* SWELLの “u-ff-*” ユーティリティが付いていても打ち消す */
.p-mainVisual [class*="u-ff-"]{
  font-family: inherit !important;
}

/* 強弱（任意） */
.p-mainVisual .p-mainVisual__title{ font-weight: 500 !important; }
.p-mainVisual .p-mainVisual__subTitle{ font-weight: 400 !important; }