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

/* ==============================================
   3Dヒーローセクション用スタイル (決定版)
   ============================================== */

/* --- 1. 背景と3Dキャンバスの固定 --- */
/* クラスがどこにあっても画面全体を黒く */
.my-3d-top {
    background-color: #1a1a1a;
    min-height: 100vh;
}

/* 3Dキャンバスを画面奥に固定 */
.my-3d-top #webgl-container {
    position: fixed; /* スクロールしても動かない */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* 一番後ろへ */
    background: radial-gradient(circle at center, #2a2a2a 0%, #0a0a0a 100%);
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* --- 2. ヒーローエリアの文字配置 --- */
.my-3d-top .hero-text-container {
    height: 100vh; /* 画面いっぱいの高さ */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10%;
    position: relative;
    z-index: 10;
    pointer-events: none; /* 文字以外はクリックを透過 */
}

/* 文字やボタンはクリックできるように */
.my-3d-top .hero-text-container > * {
    pointer-events: auto;
}

/* --- 3. デザイン装飾 (フォント・ボタン等) --- */
.my-3d-top .serif-font { font-family: 'Noto Serif JP', serif; }

.my-3d-top .main-catch {
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.my-3d-top .sub-catch {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: #ccc;
    margin-bottom: 2.5rem;
    max-width: 600px;
    line-height: 1.8;
    border-left: 3px solid #D4AF37;
    padding-left: 1.5rem;
}

.my-3d-top .cta-button {
    background: linear-gradient(135deg, #fff 0%, #dcdcdc 100%);
    color: #111;
    font-weight: 600;
    padding: 1rem 3rem;
    border-radius: 2px;
    display: inline-block;
    text-decoration: none;
}

/* --- 4. ローディング画面 --- */
.my-3d-top #loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    transition: opacity 0.8s ease;
}

/* --------------------------------------------------
   文字位置の微調整（上にずらす）
   -------------------------------------------------- */
.my-3d-top .hero-text-container > div {
    /* マイナスの数値を大きくするほど上に移動します。
       例: -50px, -100px, -10vh (画面の10%分) など
    */
    transform: translateY(-120px); 
}

/* スマホ表示の時の調整（必要であれば） */
@media (max-width: 768px) {
    .my-3d-top .hero-text-container > div {
        /* スマホでは少し控えめに移動 */
        transform: translateY(0px);
        
        /* スマホで文字がボルトに被る場合は、少し上に余白を足すなどの調整も可 */
        /* padding-bottom: 200px; */ 
    }
}

.cta_msg{
	max-width: 860px;
	margin: 0 auto;
}

.l-footer {
    z-index: 1;
}