/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 16 2025 | 06:26:07 */
/**
 * swipelp.css - スワイプLP用スタイルシート
 *
 * 役割: スワイプ操作で縦スクロールするLPのスタイル定義
 * 機能:
 *   - CSS Scroll Snapによるスムーズなスワイプ動作
 *   - フルスクリーンページレイアウト
 *   - 下部固定CTAボタン
 *   - スワイプ促進アニメーション（矢印・指アイコン）
 * 対応デバイス: PC、スマートフォン、タブレット
 */

/* =====================================
 * 基本リセット・全体設定
 * ===================================== */
:root {
    /* レイアウト関連 */
    --cta-height: 110px;  /* CTAボタンの高さ（JavaScriptで動的に設定） */
    --page-padding-top: 1vh;  /* ページ上部の余白 */
    --page-padding-horizontal: 1vw;  /* ページ左右の余白 */

    /* 画像表示の余裕調整 */
    --image-spacing-buffer: 60px;  /* 画像とCTAボタン間の余裕（pタグ1行分相当） */
    --image-margin-vertical: 20px;  /* 画像の上下マージン */

    /* page_content調整用 */
    --content-bottom-buffer: 30px;  /* page_content下部の余裕（image-spacing-bufferの半分） */

    /* page_image調整用 */
    --image-height-buffer: 30px;  /* page_image高さ調整の余裕（image-spacing-bufferの半分） */
    --content-width: 520px;
}


/* gd専用リセット */

body > header{
	display: none;
}

.l-wrapper{
	padding: 0;
	margin: 0 !important;
}

.content a {
	color: initial !important;
}

.dividerBottom > br{
	display: none;
}

.postContents {
/*     margin-top: 0px !important; */
	
	& > .content {
		& p{
			margin: 0rem !important;	
		}
	}
	
}






/* 基本リセット */



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;  /* body自体のスクロールを無効化 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
}

html{
    text-align: center;
    background: #ddd;
}

body{
    max-width: var(--content-width);
    margin: auto;
    text-align: center;
}


.l-wrapper{	
	background-color: #f00;
	padding: 0;
	margin: 0 !important;	
	& .l-main{
		background-color: #0f0;
		& .postContents{
			background-color: #00f;
			margin-top: 0px;
			
			& .content{
				background-color: #ccc;
				
				
				

				/* =====================================
				 * スクロールコンテナ（CSS Scroll Snap）
				 * ===================================== */
				.scroll_container {
					width: 100%;
					height: 100vh;
					overflow-y: scroll;  /* 縦スクロール有効 */
					scroll-snap-type: y mandatory;  /* 縦方向のスナップスクロール */
					-webkit-overflow-scrolling: touch;  /* iOS慣性スクロール */
					scroll-behavior: auto;  /* スナップ速度を速くする */
				}

				/* スクロールバー非表示（見た目をクリーンに） */
				.scroll_container::-webkit-scrollbar {
					display: none;
				}
				.scroll_container {
					-ms-overflow-style: none;
					scrollbar-width: none;
				}

				/* =====================================
				 * ページセクション
				 * ===================================== */
				.page {
					width: 100%;
					height: 100vh;  /* ビューポート高さに固定 */
					min-height: 100vh;  /* 最低限ビューポート高さを確保 */
					scroll-snap-align: start;  /* スナップ位置を先頭に */
					scroll-snap-stop: always;  /* 必ずスナップ位置で停止 */
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: var(--page-padding-top) var(--page-padding-horizontal) var(--cta-height) var(--page-padding-horizontal);
					position: relative;
					overflow: hidden;  /* はみ出し防止 */
					background: #e8f4f8;
					background: #fff;
					background: #fefefe;
					color: #333;
					text-align: center;
				}

				/* =====================================
				 * ページ内要素（テキスト・画像）
				 * ===================================== */
				.page h1 {
					font-size: 2.5rem;
					margin-bottom: 20px;
					font-weight: bold;
				}

				.page h2 {
					font-size: 2rem;
					margin-bottom: 15px;
					font-weight: bold;
				}

				.page p {
					font-size: 1.2rem;
					line-height: 1.8;
					margin-bottom: 20px;
				}

				.page img {
					width: 100%;
					height: auto;
					object-fit: contain;  /* 縦横比を維持しつつ画面内に収める */
					margin: var(--image-margin-vertical) auto;
					display: block;
					flex-shrink: 1;  /* 縮小を許可 */
				}


				/* =====================================
				 * CTAボタン（下部固定）
				 * ===================================== */
				.cta_button {
					position: fixed;
					bottom: 0;
					/*left: 0;*/
					width: 100%;
					padding: 25px 20px;
					backdrop-filter: blur(10px);  /* 背景ぼかし効果 */
					z-index: 1000;  /* 最前面に配置 */
					box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
					max-width: var(--content-width);
					margin: auto;
				}

				.cta_link {
					display: block;
					width: 100%;
					/*max-width: 500px;*/
					margin: 0 auto;
					padding: 18px 30px;
					background: #1e5a8e;
					color: white;
					text-decoration: none;
					text-align: center;
					font-size: 1.2rem;
					font-weight: bold;
					border-radius: 50px;
					transition: transform 0.3s ease, box-shadow 0.3s ease;
				}

				.cta_link:hover {
					transform: translateY(-2px);
					box-shadow: 0 8px 20px rgba(30, 90, 142, 0.4);
					background: #2670a9;
				}

				.cta_link:active {
					transform: translateY(0);
				}

				/* =====================================
				 * スワイプ促進アニメーション
				 * ===================================== */
				.swipe_indicator {
					display: block;
					width: 100%;
					position: absolute;
					bottom: calc(var(--cta-height) + 1rem);
					left: 50%;
					transform: translateX(-50%);
					z-index: 1100;  /* CTAボタン(1000)より前面に配置 */
					text-align: center;
				}

				/* スワイプテキスト共通 */
				.swipe_text {
					font-size: 1.2rem;
					color: #1e5a8e;
					font-weight: bold;
					margin-bottom: 10px;
					display: block;
					width: 100%;
					white-space: nowrap;
					text-align: center;
					text-shadow:
						-1px -1px 0 white,
						1px -1px 0 white,
						-1px 1px 0 white,
						1px 1px 0 white,
						-2px 0 0 white,
						2px 0 0 white,
						0 -2px 0 white,
						0 2px 0 white;  /* 白の外線ライン */
				}

				/* デスクトップ用（1024px以上）をデフォルト表示 */
				.swipe_text_mobile,
				.swipe_icon_mobile {
					display: none;
				}

				.swipe_text_desktop,
				.swipe_icon_desktop {
					display: block;
				}

				/* デスクトップ用: 下矢印アイコン */
				.swipe_icon_desktop {
					font-size: 3rem;
					color: #1e5a8e;
					animation: arrow_bounce 1.5s ease-in-out infinite;
					text-shadow:
						-1px -1px 0 white,
						1px -1px 0 white,
						-1px 1px 0 white,
						1px 1px 0 white,
						-2px 0 0 white,
						2px 0 0 white,
						0 -2px 0 white,
						0 2px 0 white;  /* 白の外線ライン */
				}

				/* デスクトップ用: 等速上下揺れアニメーション */
				@keyframes arrow_bounce {
					0%, 100% {
						transform: translateY(0);
					}
					50% {
						transform: translateY(15px);
					}
				}

				/* モバイル用（1024px未満）: 指アイコン */
				.swipe_icon_mobile.fa-hand-pointer {
					font-size: 2.5rem;
					color: #1e5a8e;
					margin-bottom: -10px;
					margin-left: 30px;
					transform: rotate(-45deg);
					animation: finger_swipe 1.2s ease-in-out infinite;
					text-shadow:
						-1px -1px 0 white,
						1px -1px 0 white,
						-1px 1px 0 white,
						1px 1px 0 white,
						-2px 0 0 white,
						2px 0 0 white,
						0 -2px 0 white,
						0 2px 0 white;
				}

				/* モバイル用: 上矢印アイコン */
				.swipe_icon_mobile.fa-arrow-up-long {
					font-size: 3rem;
					color: #1e5a8e;
					text-shadow:
						-1px -1px 0 white,
						1px -1px 0 white,
						-1px 1px 0 white,
						1px 1px 0 white,
						-2px 0 0 white,
						2px 0 0 white,
						0 -2px 0 white,
						0 2px 0 white;
				}

				/* モバイル用: 指スワイプアニメーション */
				@keyframes finger_swipe {
					0% {
						transform: translateY(40px) rotate(-45deg);
						opacity: 0;
					}
					10% {
						opacity: 1;
					}
					80% {
						transform: translateY(-20px) rotate(-45deg);
						opacity: 1;
					}
					100% {
						transform: translateY(-20px) rotate(-45deg);
						opacity: 0;
					}
				}

				/* モバイル表示切り替え（1024px未満） */
				@media (max-width: 1023px) {
					.swipe_text_desktop,
					.swipe_icon_desktop {
						display: none;
					}

					.swipe_text_mobile,
					.swipe_icon_mobile {
						display: block;
					}
				}

				/* =====================================
				 * バウンスアニメーション（Android等、iPhone以外用）
				 * ===================================== */
				@keyframes bounce_top {
					0%, 100% {
						transform: translateY(0);
					}
					50% {
						transform: translateY(15px);  /* 下に15px引っ張り戻す */
					}
				}

				@keyframes bounce_bottom {
					0%, 100% {
						transform: translateY(0);
					}
					50% {
						transform: translateY(-15px);  /* 上に15px引っ張り戻す */
					}
				}

				.scroll_container.bounce_top {
					animation: bounce_top 0.4s ease-out;
				}

				.scroll_container.bounce_bottom {
					animation: bounce_bottom 0.4s ease-out;
				}


				/* =====================================
				 * レスポンシブ対応（スマートフォン）
				 * ===================================== */
				@media (max-width: 768px) {
					.page {
						justify-content: center;  /* スマホサイズでは中央配置 */
					}

					.page h1 {
						font-size: 1.8rem;
					}

					.page h2 {
						font-size: 1.5rem;
					}

					.page p {
						font-size: 1rem;
					}

					.cta_link {
						font-size: 1rem;
						padding: 15px 25px;
					}
				}

				@media (max-width: 480px) {
					.page h1 {
						font-size: 1.5rem;
					}

					.page h2 {
						font-size: 1.3rem;
					}

					.swipe_indicator {
						bottom: 120px;
					}
				}



				
			}

		}
	}
}