/*
Theme Name: swipekit
*/

body,
html {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	position: relative;
    height: 100dvh;
	overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
section.main_wrapper {
	position: relative;
	width: 750px;
	max-width: 100%;
	height: 80dvh;
	margin: auto;
	border-bottom: thin solid #ccc;
}
section.main_wrapper .logo__wrapper {
	width: 100px;
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 9;
}
section.main_wrapper .logo__wrapper img {
	width: 100px;
	z-index: 9;
}
/*
.swipe-fullscreen {
    position: relative;
	width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;	
}
.swipe-bg-video {
    position: absolute;
    top: 0; left: 0;
	width: 100%;
	height: 100%;
    object-fit: cover;
    z-index: 0;
}
*/
.swipe-overlay {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding: 2rem;
}

.swipe-button a,
.swipe-button span {
    display: inline-block;
    padding: 0;
    border-radius: 4px;
    text-decoration: none;
    /*margin-top: 1rem;*/
}

.swipe-button a:hover {
    opacity: 0.85;
    transition: all 0.3s ease;
}
.fp-slide, .slide {
	width: 100% !important;
	height: 100% !important;
	flex-shrink: 0;
	position: relative;
}
.slide {
	width: 100% !important;
	height: 100% !important;
	position: relative;
}
section.sns__wrapper {
	width: 750px;
	max-width: 100%;
	padding: 5px;
	align-items: center;
	background-color: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: none;
}
section.sns__wrapper .sns__wrapper--flex {
	display: flex;
	justify-content: center;
	padding-top: 10px;
}
section.sns__wrapper .sns__wrapper--block {
    width: calc(14.2857%);
	max-width: 80px;
	display: flex;
    align-items: center;
    justify-content: center;
    row-gap: 4px;
    padding-left: 10px;
    padding-right: 10px;	
    flex-direction: column;
    cursor: pointer;
}
section.sns__wrapper .sns__wrapper--block.line {
	padding-top: 1.5px;
}
section.sns__wrapper .sns__wrapper--block img {
	width: 44px;
	height: 44px;
}
section.sns__wrapper .sns__wrapper--block p {
    font-size: 10px;
    color: rgb(255, 255, 255);
    line-height: 10px;
	margin-top: -1px;
	text-align: center;
}
.swiper {
    width: 100vw;
	max-width: 100%;
    height: 100%;
}
.swiper-slide {
	position: relative;
	display: flex;
	max-width: 100%;
	max-height: 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.swipe-bg-image,
.swipe-bg-video {
	position: absolute;
    inset: 0;
	overflow: hidden;
	max-width: 100%;
    height: 100%;
}
.swipe-bg-image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* 背景cover相当 */
    object-position: center;  /* 縦横の中央にトリミング */
}
.swipe-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 80px;
	z-index: 1;
	padding: 10px 0 100px;
	color: white;
	text-align: left;
	width: 750px;
	max-width: 100%;
	max-height: 40vh;
	overflow-y: auto;
}
section.cta_btn {
    width: 750px;
    max-width: 100%;
	max-height: 20dvh;
	text-align: center;
	margin: 0 auto;
	position: fixed;
    bottom: 0;
	left: 0;
	right: 0;
    z-index: 99;	
}
.swipe-button {
	margin: 0 auto;
	text-align: center;
	object-fit: cover;
	position: relative;
}
.swipe-button .btn_img img {
	width: 500px;
	max-width: 100%;
	text-align: center;
	object-fit: cover;
}
.fp-watermark,
#fp-nav,
.fp-arrow.fp-next,
.fp-arrow.fp-prev {
	display: none !important;
}

@media (min-width: 375px) and (max-width: 750px) {
    .swipe-bg-image > img {
        object-position: center center; /* 明示。好みで center 40% なども可 */
    }
}

/* ──────────────────────────────────────────────
   Laptop 専用（幅 1024–1600px）
   A: 高さ連動（Main 80dvh / Footer 20dvh）
   ────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1600px) {

    :root {
        /* 最小幅を 560px に底上げ（←左右の余白が大きすぎるのを防ぐ） */
        --stage-w-laptop: clamp(560px, calc(80dvh * 9 / 16), 750px);
    }

    /* Main（スライダー） */
    body.template-single-swipe section.main_wrapper {
        position: relative;
        height: 80vh;   /* 互換 → dvh で上書き */
        height: 80dvh;
        width: min(100%, var(--stage-w-laptop));
        margin: 0 auto;                     /* ラッパー自体を中央 */
    }
    body.template-single-swipe section.main_wrapper .swiper {
        height: 100%;
        min-height: 0;
        margin: 0 auto;                     /* 念のため中央 */
    }
    body.template-single-swipe section.main_wrapper .swiper-wrapper,
    body.template-single-swipe section.main_wrapper .swiper-slide {
        height: 100% !important;            /* Swiper の inline 高さ打消し */
    }
    body.template-single-swipe .swiper-slide { position: relative !important; }

    /* 画像ラッパーをスライドいっぱいに */
    body.template-single-swipe section.main_wrapper .swiper-slide .swipe-bg-image {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    /* 画像を縦横センターで cover（グローバル img を上書き） */
    body.template-single-swipe section.main_wrapper .swiper-slide .swipe-bg-image > img {
        position: static !important;         /* 以前の absolute/transform を無効化 */
        transform: none !important;
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: center center !important; /* ←中央寄せの決め手 */
    }

    /* Footer（= CTAセクション） */
    body.template-single-swipe section.cta_btn {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 35%;
        height: 20vh;  /* 互換 → dvh で上書き */
        height: 20dvh;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        z-index: 99;
        margin: 0;
    }
    body.template-single-swipe section.cta_btn img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* 管理バー対策（任意） */
    body.admin-bar.template-single-swipe section.main_wrapper {
        height: calc(80dvh - 32px);
    }
    body.admin-bar.template-single-swipe section.cta_btn { bottom: 32px; }
}

/* 1) 1024–1600px でのステージ幅の下限を少し広げる（狭すぎ対策） */
@media (min-width: 1024px) and (max-width: 1600px) {
    :root {
        /* 80dvh * 9/16 が小さくなる端末用に最小幅を底上げ */
        --stage-w-laptop: clamp(600px, calc(80dvh * 9 / 16), 780px);
    }
}

/* 2) 画面高が低いノートPC（例 1024×600, 1280×720）では
      画像を absolute + transform で“確実に中央カバー”に切り替え */
@media (min-width: 1024px) and (max-width: 1600px) and (max-height: 640px) {
    body.template-single-swipe .swiper-slide { position: relative !important; }

    body.template-single-swipe .swipe-bg-image {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    /* ← グローバルの img 指定を上書きし、中央カバーを強制 */
    body.template-single-swipe .swipe-bg-image > img {
        position: absolute !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;

        /* コンテナを満たすまで拡大（比率維持） */
        min-width: 100%;
        min-height: 100%;
        width: auto !important;
        height: auto !important;
        max-width: none !important;

        /* object-fit系は無効化（absolute方式に一本化） */
        object-fit: initial !important;
        object-position: 50% 50% !important;
    }
}

/* ── 低い画面高向け（例：1024×600, 1280×720）で更に幅を絞る ── */
@media (min-width: 1024px) and (max-width: 1600px) and (max-height: 640px) {
    /* 余白ぶんだけCTAを細くして隠れを回避（左右16px×2） */
    :root { --cta-inline-gap: 32px; } /* 24～40pxで調整可 */

    body.template-single-swipe section.cta_btn {
        width: 30%;
    }
}

/* 管理バーがある場合の高さ補正（任意） */
@media (min-width: 783px) {
    body.admin-bar section.main_wrapper {
        height: calc(80dvh - 32px);
    }
}

/* ポップアップ全体を覆う背景 */
.modal__block {
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.popup-trigger {
	display: flex;
	justify-content: center;
	align-items: center;		
	cursor: help;
}
.popup-overlay {
    display: none;
	margin: auto;
    position: absolute;
	left: 0;
	right: 0;	
	bottom: 10px;
    width: 600px;
	max-width: 100%;
	height: auto;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
	box-sizing: border-box;
	padding: 0px;
	margin: auto;
	background: #BECBD9;
	border: 6px solid #00EAF2;
	box-shadow: 0px -16px 30px rgba(235, 235, 235, 0.6), 0px 24px 100px rgba(0, 0, 0, 0.5), 0px 2px 20px #0D0F32;
	border-radius: 20px;
}
/* ポップアップの中身 */
.popup-content {
    color: #0D0F32;
    max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
}
.popup-content .content_box {
	width:95%;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px;	
	background: #FFFFFF;
	border-radius: 10px;
	margin-bottom: 16px;
	margin-right: 20px;
}
.popup-content p {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 160%;
	letter-spacing: 0.05em;
	color: #0A3A61;
	text-align: left;
    position: relative;
	padding: 0;
    padding-left: 10px;
    line-height: 1.8;
}
/* 閉じるボタン */
.popup-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
	width: 30px;
	height: 30px;
	position: absolute;
	right: 30px;
	top: 10px;	
}
.popup-content img {
    object-fit: contain;
}
@media screen and (max-width: 767px) {
	.popup-overlay {
		width: 720px;
		max-width: 95%;
    	min-width: 300px;
		height: auto;
	}
	.popup-content .content_box {
		width: 592px;
		max-width: 70vw;
	}
	.popup-content {
		width: 592px;
		max-width: 100vw;
	}
	.popup-content h3 {
		font-size: clamp(28px, 24.173px + 1.02vw, 32px);
	}
	.popup-content img {
		max-width: 100%;
	}	
}

@media screen and (max-width: 450px) {
	.popup-close {
		width: 40px;
		height: 40px;
		position: absolute;
		right: 0;
		top: 0;
	}	
}

@media screen and (max-width: 375px) {
	.modal__block {
		max-height: 40px;
	}	
}