body {
    --body-margin: 8px;
    margin: var(--body-margin) auto;
    padding: 0 var(--body-margin);
    max-width: 900px;
    overflow-wrap: anywhere;
    line-break: strict;
    word-break: auto-phrase;
    text-wrap: pretty;
    text-align: center;
}

.wide-container {
    margin: 0 calc(var(--body-margin) * (-1));
}

h1 {
    font-size: 2em;
    font-weight: inherit;
    margin: 2em 0 0;
    text-wrap: pretty;
}

header p {
    margin: 0 0 1em;
}

button {
    cursor: pointer;
}

/* ボタンのスタイル */
#loadButton {
    display: block;
    margin: 40px auto;
    padding: 20px 40px;
    font-size: 120%;
}

/* 初回表示用の画像のみ最大幅100%にする */
#defaultImage {
    max-width: 100%;
}

body:not(.first-load) #defaultImage {
    display: none;
}

/* ランダムテキストのスタイル */
#randomText,
#reactionList {
    font-size: 1.2em;
    /* フォントサイズを大きく */
}

#emoji-reactions {
    display: contents;
}

#reactionList {
    margin: 0.5em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em 0.25em;
    line-height: 1.2;
}

.reaction-button {
    font-size: 1em;
    padding: 0.2em 0.4em;
}

#sights {
    padding: 0.4em 0.2em;
}

#postButton {
    line-height: 1.44;
    padding: 0.4em 0.8em;
}

#osite,
#defaultImage {
    max-width: 100%;
    height: auto;
    /* 縦横比を維持 */
    display: block;
    margin: 0 auto;
}

#sights {
    white-space: nowrap;
}

#randomImage {
    margin: 0 auto;
    /* 標準プロパティ */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    /* Safari 対応 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    --card-width: 500;
}

body:not(.non-integer-scale) #randomImage {
    width: 100%;
    max-width: calc(var(--random-image-width) / 0.7);
    height: var(--random-image-height);
    /* Safari 対応 */
    -webkit-mask-image: linear-gradient(to right, transparent min(0%, calc(50% - var(--random-image-width) / 0.9 / 2)), black min(5%, calc(50% - var(--random-image-width) / 2)), black max(95%, calc(50% + var(--random-image-width) / 2)), transparent max(100%, calc(50% + var(--random-image-width) / 0.9 / 2)));
    /* 標準プロパティ */
    mask-image: linear-gradient(to right, transparent min(0%, calc(50% - var(--random-image-width) / 0.9 / 2)), black min(5%, calc(50% - var(--random-image-width) / 2)), black max(95%, calc(50% + var(--random-image-width) / 2)), transparent max(100%, calc(50% + var(--random-image-width) / 0.9 / 2)));
}

.non-integer-scale #randomImage {
    max-width: 100%;
    width: 720px;
    height: auto;
    aspect-ratio: 500 / 476;
}

.first-load #randomImage {
    display: none;
}

body:not(.non-integer-scale) #randomImage .carousel-card {
    width: var(--random-image-width);
    height: var(--random-image-height);
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

.non-integer-scale #randomImage .carousel-card {
    max-width: 70%;
    width: 500px;
    height: auto;
    aspect-ratio: 500 / 680;
}

#randomText {
    margin: 1em 0 2em;
}

/* ここからcarousel.js用のCSS */
.carousel-container {
    position: relative;
    touch-action: pan-y;
    overflow: hidden;
    --dx: 0;
}

.carousel-container .carousel-card {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
    transform-origin: center;
    transition: transform var(--delay) ease-out, opacity var(--delay) ease-out;
    --card-delta-index: calc(var(--card-index) - var(--container-index));
    --card-delta-proportion: calc(var(--card-delta-index) + var(--dx) / var(--card-width));
    --card-delta-proportion-abs: max(var(--card-delta-proportion), calc(0 - var(--card-delta-proportion)));
    transform: translateX(calc(-50% + var(--card-delta-index) * 100% + var(--dx) * 1px)) scale(calc(1 - var(--card-delta-proportion-abs) * 0.1));
    opacity: calc(1 - var(--card-delta-proportion-abs) * 0.3);
    -webkit-user-drag: none;
    z-index: 0;
}

.wide-scale .carousel-container .carousel-card {
    transform: translateX(calc(-50% + var(--card-delta-index) * 100% + var(--dx) * 1px)) scale(calc(1 - var(--card-delta-proportion-abs) * 0.05));
    opacity: 1
}

.very-wide-scale .carousel-container .carousel-card {
    transform: translateX(calc(-50% + var(--card-delta-index) * 100% + var(--dx) * 1px)) scale(calc(1 - var(--card-delta-proportion-abs) * 0.025));
    opacity: 1
}

.carousel-container .carousel-card.inserted-card {
    transform: translate(-50%, 100%);
    opacity: 1;
    z-index: 1;
}

.carousel-container .carousel-card.inserted-card.inserted-from-right {
    transform: translateX(50cqw);
}

.carousel-container.carousel-no-animation .carousel-card {
    transition: none;
}

.carousel-container.carousel-freeze .carousel-card {
    transition: transform calc(infinity * 1s), opacity calc(infinity * 1s);
}