@charset "utf-8";

body {
    margin: 0;
}

/* ------------------------------
    contents
------------------------------ */
#oslp116_container {
    position: relative;
    width: 100%;
    max-width: 980px;
    text-align: center;
    margin: 0 auto 30px;
    padding: 0;
}

#oslp116_container img {
    width: 100%;
    display: block;
    height: auto;
}

/* 各選択肢ブロックの基本設定 */
#oslp116_container .box .opt1,
#oslp116_container .box .opt2,
#oslp116_container .box .opt3,
#oslp116_container .box .opt4,
#oslp116_container .box .opt5,
#oslp116_container .box .opt6,
#oslp116_container .box .opt7,
#oslp116_container .box .opt8 {
    position: relative;
    width: 100%;
}

/* ボタンリンク共通の可変指定 */
#oslp116_container .box a {
    position: absolute;
    display: block;
    width: 85%;
    left: 50%;
    transform: translateX(-50%); /* 常に中央寄せ */
}

#oslp116_container .box a:hover {
    opacity: 0.5;
}

/* 動画のレスポンシブ対応 */
#oslp116_container video {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* --- HTMLを変更せずボタン画像(btn01〜btn08)ごとに位置調整する追加コード --- */

/* 1つ目のブロック（btn01 / btn02） */
#oslp116_container .box .opt1 a:has(.btn01) { bottom: 7%; } /* お試し1 */
#oslp116_container .box .opt2 a:has(.btn02) { top: 80%; } /* 定期1 */

/* 2つ目のブロック（btn03 / btn04） */
#oslp116_container .box .opt1 a:has(.btn03) { bottom: 4%; } /* お試し2 */
#oslp116_container .box .opt2 a:has(.btn04) { top: 80%; } /* 定期2 */

/* 3つ目のブロック（btn05 / btn06） */
#oslp116_container .box .opt1 a:has(.btn05) { bottom: 6%; } /* お試し3 */
#oslp116_container .box .opt2 a:has(.btn06) { top: 80%; } /* 定期3 */

/* 4つ目のブロック（btn07 / btn08） */
#oslp116_container .box .opt1 a:has(.btn07) { bottom: 4%; } /* お試し4 */
#oslp116_container .box .opt2 a:has(.btn08) { top: 80%; } /* 定期4 */