@charset "UTF-8";

/* ---------------------------------------------------------
■ デフォルトリセット
--------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 150%;
    border: none;
    list-style-type: none;
}

body {
    text-align: center;
    font-family:
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Helvetica Neue",
        Arial,
        Meiryo,
        sans-serif;
}

.wrap {
    max-width: 1283px;
    width: 100%;
    margin: 0 auto;
}
/* 画面いっぱいに広げたいが、画像自体は最大1920pxまで */
.image-wrap {
  max-width: 1920px;      /* 画像の実寸を上限に */
  margin: 0 auto;         /* 中央寄せ */
  padding: 0;             /* 余白不要なら0のまま */
}

/* 画像はコンテナ幅にフィット、縦横比維持、はみ出しなし */
.image-wrap img {
  display: block;         /* 余計なスキマを消す */
  width: 100%;            /* コンテナ幅に合わせて伸縮 */
  height: auto;           /* 縦横比を維持 */
  max-width: 100%;        /* はみ出し防止（念のため） */
  /* お好みで見やすさ向上用の装飾
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  */
}

.fixed {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 999;
    width: 100%;
}

/* 余白が欲しければ（任意） */
/*
body { 
  margin: 0;
  background: #f7f7f7;
  padding: clamp(12px, 3vw, 32px);
}