@font-face {
    font-family: "chihaya";
    font-display: swap;
    src: url(https://storage.googleapis.com/note15-assets-ja/fonts/chihaya-sub.woff2?v=1) format("woff2"),
        url(https://storage.googleapis.com/note15-assets/fonts/chihaya.ttf) format("truetype");
}
@font-face {
    font-family: "anzu";
    font-display: swap;
    src: url(https://storage.googleapis.com/note15-assets-ja/fonts/anzu-sub.woff2?v=1) format("woff2"),
        url(https://storage.googleapis.com/note15-assets/fonts/anzu.ttf) format("truetype");
}
@font-face {
    font-family: "beautiful";
    font-display: swap;
    src: url(https://storage.googleapis.com/note15-assets-ja/fonts/beautiful-sub.woff2?v=1) format("woff2"),
        url(https://storage.googleapis.com/note15-assets/fonts/beautiful.ttf) format("truetype");
}
@font-face {
    font-family: "shigotomemogaki";
    font-display: swap;
    src: url(https://storage.googleapis.com/note15-assets-ja/fonts/shigotomemogaki-sub.woff2?v=1) format("woff2"),
        url(https://storage.googleapis.com/note15-assets/fonts/shigotomemogaki.ttf) format("truetype");
}

.content-text {
    font-size: 4vw;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    display: block;
    color: #fff;
    word-break: break-all;
}

.content-text-style-eri {
    font-family: eri;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 0px 3px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1);
    font-size: clamp(24px, 4cqw, 48px);
}

.content-text-style-chihaya {
    font-family: chihaya;
    font-size: clamp(24px, 4cqw, 48px);
}

.content-text-style-anzu {
    font-family: anzu;
    font-size: clamp(24px, 4cqw, 48px);
}

.content-text-style-beautiful {
    font-family: beautiful;
    font-size: clamp(32px, 6cqw, 64px);
}

.content-text-style-shigotomemogaki {
    font-family: shigotomemogaki;
    font-size: clamp(48px, 10cqw, 96px);
}


.post .content-text-style-eri {
    font-size: clamp(12px, 4cqw, 24px);
}

.post .content-text-style-chihaya {
    font-size: clamp(12px, 4cqw, 24px);
}

.post .content-text-style-anzu {
    font-size: clamp(12px, 4cqw, 24px);
}

.post .content-text-style-beautiful {
    font-size: clamp(16px, 6cqw, 32px);
}

.post .content-text-style-shigotomemogaki {
    font-size: clamp(24px, 10cqw, 48px);
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #44413f;
    font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}

a {
    text-decoration: none;
    color: #fff;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fade-image {
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.grid {
    display: grid;
    gap: 16px;
    margin: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}


.post .read-button {
  display: none;
  height: 48px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
.post.show-button .content {
    display: block !important;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.post.show-button.expanded .content {
    display: block !important;
    -webkit-mask-image: unset !important;
    mask-image: unset !important;
}

.post.show-button .read-more {
  display: block;
}
.post.show-button.expanded .read-more {
  display: none !important;
}
.post.show-button.expanded .read-less {
  display: block !important;
}

.post.expanded {
  aspect-ratio: unset !important;
}
.post.expanded .bg {
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.pc {
    display: none;
}
@media only screen and (min-width: 608px) {
    .mobile {
        display: none;
    }
    .pc {
        display: block;
    }
}

.tag-ellipsis {
    max-height: 88px;
    overflow-y: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.tag-ellipsis.expanded {
    max-height: unset;
    -webkit-mask-image: unset;
    mask-image: unset;
}