/* ==================================================
   Big Agnes VST - Final Responsive Fix
   ================================================== */

:root {
    --vst-green: #00b694;
    --vst-dark-bg: #1e2023;
    --vst-white: #ffffff;
    --base: 17px;
    --xx_small: calc(var(--base) * 0.75);
    --x_small: calc(var(--base) * 0.875);
    --small: var(--base);
    --medium: calc(var(--base) * 1.125);
    --large: calc(var(--base) * 1.625);
    --x_large: calc(var(--base) * 2.125);
    --xx_large: calc(var(--base) * 3);
}

/* 既存サイトの横揺れ・余白干渉をリセット */
html, body {
    overflow-x: hidden !important;
    width: 100%;
	min-width: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}

@font-face {
    font-family: "Mokoko-ExtraBold";
    src: url("../lp/font/MokokoXBd.woff2") format("woff2"), 
         url("../lp/font/MokokoXBd.woff") format("woff");
    font-display: swap;
}

/* --------------------------------------------------
   共通：全幅（フルワイド）設定
   1280px以下の余白を解消する核心部分
   -------------------------------------------------- */
.vst-full-bleed {
    position: relative;
    width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------
   ヒーロー / 画像セクション (lazycontainer)
   -------------------------------------------------- */
.lazycontainer {
    height: 100%;
    min-height: 64vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lazycontainer img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 79vh;
    object-fit: cover !important;
    z-index: 1;
}

/* 文字を画像の上に配置 */
.vst-text-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px; /* 文字は既存の幅に合わせる */
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    color: var(--vst-green) !important;
}

.vst-text-overlay h1 {
    font-size: var(--xx_large);
    font-family: "Mokoko-ExtraBold", sans-serif;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
    margin: 0;
}

/* --------------------------------------------------
   Inspired Section (黒背景セクション)
   -------------------------------------------------- */
.vst-inspired-section {
    background-color: var(--vst-dark-bg) !important;
    padding: 25px 0 !important;
    text-align: center;
	width: 100vw !important;           /* 画面の横幅いっぱいに指定 */
    position: relative;
    left: calc(-1 * (100vw - 100%) / 2) !important;             /* 親の真ん中に移動 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
	z-index: 5;
}

.vst-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.vst-inspired-content h2 {
    font-family: "Mokoko-ExtraBold", sans-serif;
    font-size: var(--x_large);
    margin-bottom: 10px;
    color: var(--vst-green) !important;
}

.vst-inspired-content p {
	font-size: var(--medium);
    line-height: calc(var(--medium) * 1.25);
	color: var(--vst-green) !important;
    margin: 0 auto;
	font-weight: 400;
}


/* --------------------------------------------------
   Inspired Section (緑背景セクション)
   -------------------------------------------------- */
.vst-inspired-section-gr {
    background-color: var(--vst-green) !important;
    padding: 25px 0 !important;
    text-align: center;
	width: 100vw !important;           /* 画面の横幅いっぱいに指定 */
    position: relative;
    left: calc(-1 * (100vw - 100%) / 2) !important;             /* 親の真ん中に移動 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.vst-container-gr {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.vst-inspired-content-gr h2 {
    font-family: "Mokoko-ExtraBold", sans-serif;
    font-size: var(--large);
    margin-bottom: 10px;
    color: var(--vst-dark-bg) !important;	
}

.vst-inspired-content-gr h2 span {
	color: #990000;
}

.vst-inspired-content-gr p {
	font-size: 1.3rem;
    line-height: 1.5;
	color: var(--vst-dark-bg) !important;
    margin: 0 auto;
	font-weight: 400;
	width: 90%;
    max-width: 720px;
}





/* --------------------------------------------------
   
   -------------------------------------------------- */

/* セクションの設定 */
.vst-divider-section {
    background-color: transparent; /* 背景が浮かないように */
    line-height: 0;   /* 画像の下に謎の隙間ができるのを防ぐ */
    font-size: 0;     /* 同上 */
    
    /* 全幅強制設定（以前の「決定版」を適用） */
    width: 100vw !important;
    position: relative;
    left: calc(-1 * (100vw - 100%) / 2) !important;
    margin: 0 !important;
}

/* 画像の設定 */
.vst-divider-img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* もし画像が細すぎて1280px以下でボヤける場合はこれを追加 */
@media screen and (max-width: 1280px) {
    .vst-divider-section {
        min-height: 20px; /* 最小限の高さ確保 */
    }
}

/* --------------------------------------------------
   
   -------------------------------------------------- */




/* セクション全体：VSTグリーンを背景に、全幅化 */
.vst-grid-section {
    background-color: var(--vst-green) !important;
    padding: 80px 0 !important;
}

/* タイトル設定 */
.vst-grid-title {
    text-align: center;
    color: var(--vst-dark-bg) !important;
    font-size: var(--x_large);
    margin-bottom: 50px;
    font-family: "Mokoko-ExtraBold", sans-serif;
}


/* 商品並列エリア */
.vst-product-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

/* 商品個別カード */
.vst-product-card {
    flex: 1; /* 3等分 */
    text-align: center;
}

.vst-product-card a {
    text-decoration: none;
    color: var(--vst-dark-bg) !important;
}

.vst-thumb img {
    max-width: 100%;
    height: auto;
}

.vst-card-text h3 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.vst-card-text p {
	font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 10px;
	font-weight: 400;
}

.vst-bold {
    font-weight: bold!important;
    margin-bottom: 15px;
	font-size: 1.5rem!important;
}


/* 枠線ボタン： learn more */
.vst-btn-outline {
    display: inline-block;
    border: 1px solid var(--vst-dark-bg);
    padding: 10px 30px;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;
    transition: 0.3s;
}

.vst-btn-outline:hover {
    background-color: var(--vst-dark-bg);
    color: var(--vst-green) !important;
}

/* --- レスポンシブ：896px以下で縦積みに --- */
@media screen and (max-width: 896px) {
    .vst-product-row {
        flex-direction: column;
        align-items: center;
    }
    .vst-product-card {
        max-width: 400px;
        margin-bottom: 60px;
    }
}

/* --------------------------------------------------
   ビデオセクション
   -------------------------------------------------- */


/* ビデオセクション全体 */
.vst-video-section {
    position: relative; /* 子要素の absolute の基準点にする */
    height: 50vh; 
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景画像の箱：ここを absolute にして画面全体に広げる */
.vst-bg-box {
    position: absolute; /* 浮かせて背面に回す */
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1; /* 重なり順：奥 */
}

.vst-bg-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 隙間なく埋める */
}

/* コンテンツ部分：画像より手前に持ってくる */
.vst-video-section .vst-container {
    position: relative;
    z-index: 2; /* 重なり順：手前 */
    width: 100%;
}

/* 中央の黒い半透明ボックス */
.vst-video-box {
    background-color: rgba(30, 32, 35, 0.8) !important; /* 透ける黒 */
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.vst-video-box h2 {
    font-size: 2rem;
    margin-bottom: 5px;
	color: #00b694 !important;
    border-color: #00b694 !important;
	font-family: Mokoko-ExtraBold !important;
	font-size: var(--large);
    line-height: calc(var(--x_large) * 1.25);

}

.vst-video-box p {
    font-size: 1.1rem;
    margin-bottom: 25px;
	color: #00b694 !important;
    border-color: #00b694 !important;
	font-family: Proxima-Nova !important;
	font-size: var(--x_small);
    line-height: calc(var(--small) * 1.25);
	font-weight: 400;


}

/* 再生ボタンの枠線 */
.vst-play-btn {
    display: inline-block;
    width: 180px; /* 添付画像の横長の枠線を再現 */
    height: 40px;
    border: 1px solid var(--vst-green);
    position: relative;
    transition: 0.3s;
    text-decoration: none;
}

.vst-play-btn:hover {
    background-color: rgba(0, 211, 182, 0.2);
}

/* 再生アイコン（三角） */
.vst-play-icon {
    color: var(--vst-green);
    font-size: 1.2rem;
    line-height: 40px;
}

.mfp-iframe-holder .mfp-close {
    top: -1.8rem !important;
    right: 0;
    width: 6rem;
    height: 6rem;
    font-size: 0;
    opacity: 1;
    cursor: pointer;
    background: url(../img/vst/pop_icon01.png) no-repeat right top / 5%;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
    .vst-video-box {
        padding: 30px 20px;
        width: 90%;
    }
    .vst-video-box h2 {
        font-size: 1.5rem;
    }
}



/* --------------------------------------------------
   特徴セクション (Durability等 - 黒いカード)
   -------------------------------------------------- */
.vst-feature-section {
    height: 60vh;
    min-height: 450px;
    display: flex;
    align-items: center;
}

.slider-block-bg {
    background-color: var(--vst-dark-bg) !important;
    padding: 40px !important;
    max-width: 450px;
    margin-left: 10%; /* PC時は左寄り */
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------
   商品グリッド
   -------------------------------------------------- */
.vst-grid-section {
    background-color: var(--vst-green) !important;
    padding: 80px 0 !important;
    color: var(--vst-dark-bg) !important;
}

.product-loop {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.product.four {
    width: 33.33%;
    padding: 0 15px;
    text-align: center;
}

.product .btn {
    border: 2px solid var(--vst-dark-bg);
    color: var(--vst-dark-bg);
    padding: 10px 20px;
    text-transform: lowercase;
    font-weight: bold;
    display: inline-block;
    margin-top: 15px;
    text-decoration: none;
}

/* --------------------------------------------------
   レスポンシブ (896px以下 / 768px以下)
   -------------------------------------------------- */
@media only screen and (max-width: 1024px) {
    .slider-block-bg {
        margin-left: 5%;
    }
}

@media only screen and (max-width: 896px) {
    .product.four {
        width: 100%;
        margin-bottom: 40px;
    }
    
    .vst-inspired-content p {
		font-size: 1.3rem !important; /* 本文を小さく */
		        line-height: 1.5;
    }
}

@media only screen and (max-width: 768px) {
    .lazycontainer {
        height: 50vh;
    }
    
    .vst-text-overlay h1 {
        font-size: var(--x_large);
    }
    
    .slider-block-bg {
        margin: 0 auto;
        width: 90%;
        padding: 30px !important;
    }
}

/* --------------------------------------------------
   VST Tents are the:
   -------------------------------------------------- */

/* セクション全体：背景全幅 */
.vst-list-section {
    background-color: var(--vst-green) !important;
    padding: 80px 0 !important;
    color: var(--vst-dark-bg) !important;
}

/* 左右並列の設定 */
.vst-list-content {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: flex-start;
    gap: 60px; /* 左右の隙間 */
}

/* 左側見出し */
.vst-list-title {
    text-align: right; /* 右に寄せてリストと近づける */
    flex: 1;
}

.vst-list-title h2 {
    font-size: var(--x_large);
    line-height: 1.1;
    margin: 0;
    font-family: "Mokoko-ExtraBold", sans-serif;
}


/* 右側リスト */
.vst-list-items {
    flex: 1;
}

.vst-list-items ul {
    list-style: none; /* デフォルトの点を消す */
    padding: 0;
    margin: 0;
}

.vst-list-items li {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 5px;
    font-family: Proxima-Nova, sans-serif;
	font-weight: 400;
}

.vst-list-items strong {
    font-weight: 800;
}

.vst-period {
    font-weight: 800;
    margin-top: 10px;
}

/* --- スマホ対応：896px以下で縦積み --- */
@media screen and (max-width: 896px) {
    .vst-list-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center;
    }
    
    .vst-list-title {
        text-align: center;
    }
    
    .vst-list-items li {
        font-size: 1.3rem;
		
    }
}


.vst-inspired-content h2 p {
	font-size: 1.1rem;
    margin-bottom: 25px;
    color: #00b694 !important;
    border-color: #00b694 !important;
    font-family: Proxima-Nova !important;
    font-size: var(--medium);
    line-height: calc(var(--medium) * 1.25);	
}
.vst-inspired-content p a {
    background: none;
    border: #990000 1px solid;
    color: #fff !important;
    display: inline-block;
    max-width: 200px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: normal;
    width: 100%;
    letter-spacing: 0.5px;
    padding: 0.85em;
    font-family: Proxima-Nova !important;
    font-size: 12px;
    text-transform: uppercase;
	border-radius: 4px;
	margin: 2em auto;
}


/* --------------------------------------------------
   最後のイメージ画像
   -------------------------------------------------- */


/* 他の要素への干渉を防ぐため、特定のクラス配下のみに限定します */
.vst-feature .vst-full-bleed {
    display: block;
    position: relative;
    /* 親の padding/margin を無視して画面幅いっぱいにする */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    
    /* 他のセクションを押し上げないよう、高さを明示的に管理 */
    overflow: hidden;
}

/* 画像セクション専用 */
.vst-tent-bg-section {
    height: 40vh;
    min-height: 250px;
    border: none;
}

.vst-tent-bg-box {
    width: 100%;
    height: 100%;
}

.vst-tent-bg-box img {
    display: block;
    width: 100vw !important; /* 確実に画面幅に合わせる */
	height: 100%;
    object-fit: cover;
}

/* 既存サイトの横揺れだけをピンポイントで止める（bodyへの指定を避ける） */
#container {
    overflow-x: hidden;
    position: relative;
    width: 100%;
}



/* ==================================================
   VST Slider Styles (Glider Refined)
   ================================================== */

/* セクション全体の高さと全幅設定 */
.vst-slider-section {
    position: relative;
    composes: vst-full-bleed; /* これまでの全幅設定を適用 */
    height: 60vh; /* 画像の高さ */
    min-height: 500px;
}

/* スライド個別アイテム */
.vst-slide-item {
    position: relative;
    height: 70vh;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景画像の設定 */
.vst-bg-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

.vst-bg-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom;
}

/* 中央の黒い箱 */
.vst-video-box {
    background-color: rgba(30, 32, 35, 1.0) !important; /* 透ける黒 */
    padding: 28px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* --- ナビゲーション（矢印・ドット）の装飾 --- */

/* ライブラリ標準のドットナビを非表示にする (本家にはないため) */
.glider-contain .dots {
    display: none !important;
}

/* --- 矢印ボタン本体の修正 --- */
.glider-contain .glider-prev,
.glider-contain .glider-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    cursor: pointer;
    position: absolute;
    bottom: 30px !important;
    top: auto !important; /* 上からの位置指定をリセット */
    z-index: 10 !important;
    /* 元のテキスト矢印を消すための設定 */
    font-size: 0 !important; 
    color: transparent !important;
    text-indent: -9999px; /* テキストを画面外へ飛ばす */
}

/* 矢印を描画する span 要素の設定 */
.vst-arrow-icon {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-top: 2px solid var(--vst-green) !important;
    border-right: 2px solid var(--vst-green) !important;
    /* text-indentの影響を戻す */
    text-indent: 0 !important; 
    position: relative;
}

/* 左矢印の設定 */
.glider-prev .vst-arrow-icon {
    transform: rotate(-135deg) !important;
    margin-left: 4px !important; /* 視覚的な中央補正 */
}

/* 右矢印の設定 */
.glider-next .vst-arrow-icon {
    transform: rotate(45deg) !important;
    margin-left: -4px !important; /* 視覚的な中央補正 */
}

/* ボタンの配置位置の固定 */
.glider-contain .glider-prev {
    left: calc(50% - 60px) !important;
}

.glider-contain .glider-next {
    left: calc(50% + 15px) !important;
    right: auto !important;
}

/* ホバー時に緑にする */
.glider-contain .glider-prev:hover,
.glider-contain .glider-next:hover {
    border-color: var(--vst-green) !important;
}


/* スマホ対応 */
@media only screen and (max-width: 768px) {
    .vst-slider-section, .vst-slide-item {
        height: 60vh;
    }
    .vst-video-box {
        padding: 30px 20px;
        width: 90%;
    }
    .glider-contain .glider-prev, .glider-contain .glider-next {
        font-size: 1.5rem;
        bottom: 10px;
    }
}

/* スマホ対応 */
@media only screen and (max-width: 768px) {
    .glider-contain .glider-prev,
    .glider-contain .glider-next {
        width: 36px;
        height: 36px;
        bottom: 15px;
    }
    .glider-contain .glider-prev {
        left: calc(50% - 50px) !important;
    }
    .glider-contain .glider-next {
        left: calc(50% + 10px) !important;
    }
}

/* 480px以下の非常に小さなスマホ用 */
@media only screen and (max-width: 480px) {
    .vst-video-box h2 {
        font-size: 1.7rem !important; /* 見出しを小さく */
    }
    .vst-video-box p {
        font-size: 1.3rem !important; /* 本文を小さく */
    }
    .glider-contain .glider-prev,
    .glider-contain .glider-next {
        bottom: 25px !important; /* ボタンをさらに下へ */
    }
}