@charset "UTF-8";

/* ==========================================================================
   画像を縦に並べるだけのLPレイアウト
   - 画像は 1200px 幅で、中央の 375px（左から492px目〜）がLP本体
   - 左右の余白は背景色(#ecf9e7)と同じなので、画像の中央部分だけを
     ページ幅いっぱいに表示して、スマホでも大きく見せています
   ========================================================================== */

:root {
    --page-max-width: 500px;   /* ★ページの最大幅（PC表示）。お好みで変更OK */
    --bg: #ecf9e7;             /* 画像の左右余白と同じ色 */
}

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

body {
    background-color: var(--bg);
}

.page {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    background-color: var(--bg);
    overflow: hidden;
}

/* 1枚ごとの区切り */
.block {
    position: relative;
    overflow: hidden;      /* 画像の左右の余白をカット */
    line-height: 0;
    font-size: 0;
}

/* 画像の中央375px分を、ブロック幅いっぱいに拡大して表示
   1200 / 375 = 320%、左の余白 492 / 375 = 131.2% */
.block img {
    display: block;
    width: 320%;
    max-width: none;
    height: auto;
    margin-left: -131.2%;
}

/* ボタン部分だけに重ねる透明リンク */
.hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    display: block;
    border-radius: 999px;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.hotspot:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.hotspot:focus-visible {
    outline: 3px solid #ffeb3b;
    outline-offset: 2px;
}