@charset "utf-8";
/* CSS Document */
body {
    font-family: Arial, sans-serif;
    background-color: #f2e9d9; /* 例として薄いグレーを指定 */
    width: 100%;
    max-width: 750px; /* 最大幅を750pxに制限 */
    margin: 0 auto; /* body全体を中央に寄せる */
    padding: 0;
}

/* 初期状態の表示調整 */
.section.hidden {
    display: none;
}

.section.active {
    display: block;
}


header {
	text-align: center;
	width: 100%;
	margin:  0 auto;

}

h1 {
	text-align: center;
	width: 100%;
	margin:  0 auto;

}

img {
	text-align: center;
	width: 100%;
	margin:  0 auto;
	min-width: 100%;
    padding: 0;
    border: none;
    display: block;
}

video {
	text-align: center;
	margin:  0 auto;
    padding: 0;
    border: none;
    display: block;
}

.section {
    display: none;
}

.section.active {
    display: block;
}

.hidden {
    display: none;
}

.buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
	width: 80%;
}

.main-image {
    width: 100%;
    max-width: 400px;
}

/* ボタン設置箇所調整 */
.section {
    position: relative;
    text-align: center;
}

.main-image {
    width: 100%;
    max-width: 400px;
    position: relative; /* 画像に対して相対位置を設定 */
}

.grid1 {
    position: absolute;
    top: 73%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    z-index: 10; /* 画像の上に表示されるように設定 */

}

.grid2 {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    z-index: 10; /* 画像の上に表示されるように設定 */
}

.grid3 {
    position: absolute;
    top: 84%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    z-index: 10; /* 画像の上に表示されるように設定 */
}

.grid4 {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    z-index: 10; /* 画像の上に表示されるように設定 */
}
.grid5 {
    position: absolute;
    top: 86%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    z-index: 10; /* 画像の上に表示されるように設定 */
}
.toggle-btn {
    width: 100px;
    cursor: pointer;
}

/* グリッドレイアウトを解除し、ボタンを中央に配置 */
.button-container {
	transform: scale(0.6);
    transform-origin: center;
}

/* pointコンテンツの画像隙間なくす */
#check02 .main-image {
    display: block;
    width: 100%; /* 画像を親要素にフィットさせる */
    margin: 0; /* 画像間の外側の余白をゼロに */
    padding: 0; /* 画像間の内側の余白をゼロに */
    border: none; /* もし枠線がある場合、削除 */
}

/* offerコンテンツの画像隙間なくす */
#offer .main-image {
    display: block;
    width: 100%; /* 画像を親要素にフィットさせる */
    margin: 0; /* 画像間の外側の余白をゼロに */
    padding: 0; /* 画像間の内側の余白をゼロに */
    border: none; /* もし枠線がある場合、削除 */
}

/* 親要素を相対配置に設定し、その中で動画を絶対配置 */
.image-container {
    position: relative; /* 親要素を相対配置に設定 */
    width: 100%; /* コンテナの幅を100%に設定 */
}

.image-container .main-image {
    width: 100%; /* 画像を親要素にフィットさせる */
    display: block;
}

.image-container .overlay-video {
    position: absolute; /* 動画を画像の上に重ねる */
    top: 45%; /* 動画を画像の中央に配置 */
    left: 50%; /* 左右方向で中央揃え */
    transform: translate(-50%, -50%); /* 動画を中央揃え */
    width: 80% !important; /* 必要に応じてサイズ調整 */
    max-width: 500px !important;
    min-width: unset !important; /* min-widthの影響を無効化 */
    height: auto; /* 高さをアスペクト比に応じて自動調整 */
    pointer-events: none; /* 動画がクリックイベントをブロックしないように */
}

/* offerボタン */
.offer-container {
    position: relative; /* 子要素に対する基準となる */
    width: 100%; /* コンテナの幅を指定 */
}

.main-image {
    width: 100%; /* 背景画像を全体に表示 */
    display: block;
}


/* textwidget部分 */
#textwidget {
    display: none; /* 初期状態では非表示 */
}

#textwidget.active {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 横方向で中央に揃える */
    justify-content: center; /* 縦方向で中央に揃える */
    gap: 10px; /* 各リンクの間隔を10pxに設定 */
	margin: 1.5em;
}

#textwidget a {
    display: block;
    text-align: center; /* 各リンクのテキストを中央揃えにする */
    color: #551a8b; /* リンクのテキスト色を黒に設定 */
	font-size: 12px;
}

#textwidget footer {
    width: 100%;
    text-align: center; /* フッター内のテキストを中央揃え */
    margin-top: 20px; /* フッター上部に余白を追加 */
}

#textwidget footer p {
    margin: 0;
	font-size: 12px;
}


/* offerボタンエリア */
#offer_btn {
    position: relative; /* 通常のフローに従って配置 */
    margin-top: 30px; /* ボタンの上部に余白を追加 */
    text-align: center; /* ボタンを中央揃え */
    padding-bottom: 40px; /* offerエリアの最後に余白を追加 */
}

.offer-btn {
    width: 150px; /* ボタンの幅を調整 */
    max-width: 100%; /* ボタンが画面をはみ出さないように最大幅を設定 */
    cursor: pointer;
    animation: scaleAnimation 1.5s infinite ease-in-out; /* 拡大縮小のアニメーションを追加 */
    transform-origin: center; /* 拡大縮小の基点を中央に設定 */
}

/* 拡大縮小のアニメーションを定義 */
@keyframes scaleAnimation {
    0% {
        transform: scale(0.9); /* 初期サイズ */
    }
    50% {
        transform: scale(1); /* 120%に拡大 */
    }
    100% {
        transform: scale(0.9); /* 元のサイズに戻る */
    }
}