:root {
    --paper:#f7f1e4;
    --red:#d9432e;
    --ink:#342d28
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:30px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--red);
    font-family:'Zen Maru Gothic',sans-serif;
    font-weight:500
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit
}
a:focus-visible,button:focus-visible {
    outline:3px solid #167cbe;
    outline-offset:6px
}
a:hover {
    text-decoration:underline;
    text-underline-offset:6px
}
.shell {
    width:min(1280px,90%);
    margin:auto
}
header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:26px 0
}
header .mark {
    font-size:24px;
    font-weight:900
}
nav {
    display:flex;
    gap:26px;
    align-items:center;
    flex-wrap:wrap;
    font-size:14px
}
.nav-contact {
    border:1px solid;
    padding:11px 22px;
    border-radius:40px
}
.hero {
    position:relative;
    min-height:680px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate
}
.hero h1 {
    font-size:clamp(48px,8.8vw,138px);
    font-weight:900;
    letter-spacing:-.065em;
    line-height:1.2;
    margin:0 0 120px;
    z-index:1;
    white-space:nowrap
}
.bubble {
    position:absolute;
    border:1.5px solid currentColor;
    border-radius:50%;
    width:62px;
    height:62px;
    left:8%;
    top:29%;
    transform:rotate(-25deg)
}
.bubble:after {
    content:'';
    position:absolute;
    width:20%;
    height:10%;
    background:currentColor;
    border-radius:50%;
    top:13%;
    left:22%
}
.b2 {
    left:auto;
    right:8%;
    top:57%;
    width:110px;
    height:110px
}
.star {
    position:absolute;
    right:18%;
    top:13%;
    font-size:75px;
    font-family:serif;
    transform:rotate(13deg)
}
.small-star {
    left:24%;
    right:auto;
    top:73%;
    font-size:36px
}
.hero-bottom {
    position:absolute;
    bottom:26px;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    font:12px Arial,sans-serif;
    letter-spacing:.12em
}
.platforms {
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    padding:32px 0 55px
}
.platforms a {
    border:1px solid;
    border-radius:50%;
    padding:19px 27px;
    min-width:135px;
    text-align:center;
    transform:rotate(-5deg);
    transition:transform .2s,background .2s
}
.platforms a:nth-child(even) {
    transform:rotate(5deg)
}
.platforms a:hover {
    background:var(--red);
    color:var(--paper);
    transform:rotate(0);
    text-decoration:none
}
.section {
    padding:85px 0
}
.heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:24px;
    margin-bottom:36px
}
.heading h2 {
    font:italic 500 clamp(48px,7vw,86px) Georgia,serif;
    margin:0;
    letter-spacing:-.055em
}
.more {
    font-size:13px;
    border-bottom:1px solid;
    padding:8px 0
}
.grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px
}
.art img {
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block;
    border-radius:18px;
    transition:transform .3s
}
.art:hover img {
    transform:rotate(-2deg)
}
.art:nth-child(2) {
    padding-top:50px
}
.art h3 {
    font-size:16px;
    margin:18px 0 6px;
    font-weight:700
}
.art p {
    font-size:12px;
    margin:0;
    color:var(--ink)
}
.red-area {
    background:var(--red);
    color:var(--paper);
    border-radius:60px 60px 0 0
}
.red-area .art p {
    color:var(--paper)
}
.works-grid img {
    aspect-ratio:1;
    max-height:350px;
    object-fit:cover
}
.news {
    padding:85px 0
}
.news-row {
    border-top:1px solid;
    display:flex;
    align-items:center;
    gap:35px;
    padding:25px 0;
    font-size:15px
}
.news-row:last-child {
    border-bottom:1px solid
}
.news-row span:first-child {
    font:12px Arial,sans-serif;
    opacity:.8;
    white-space:nowrap
}
.news-row .arrow {
    margin-left:auto
}
.bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
    padding:30px 0 90px
}
.bottom>a {
    border:1px solid;
    border-radius:100px;
    padding:40px 35px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:clamp(18px,2.5vw,30px)
}
.bottom>a:nth-child(2) {
    background:var(--paper);
    color:var(--red)
}
.foot {
    padding:45px 0 25px
}
.foot-word {
    font-weight:900;
    font-size:clamp(32px,7vw,100px);
    letter-spacing:-.05em;
    text-align:center;
    margin:12px 0 40px
}
.foot-line {
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    font:11px Arial,sans-serif;
    letter-spacing:.04em
}
.foot-line div {
    display:flex;
    gap:22px
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
}
@media(max-width:700px) {
    header {
        align-items:flex-start;
        flex-direction:column;
        gap:15px
    }
    nav {
        gap:12px 18px;
        font-size:12px
    }
    .nav-contact {
        padding:7px 14px
    }
    .hero {
        min-height:540px
    }
    .hero h1 {
        font-size:clamp(48px,14vw,86px);
        white-space:normal;
        max-width:95%;
        text-align:center;
        letter-spacing:-.06em;
        margin-bottom:150px
    }
    .hero h1 span {
        display:block
    }
    .bubble {
        left:0;
        top:9%;
        width:36px;
        height:36px
    }
    .b2 {
        left:auto;
        right:1%;
        top:70%;
        width:55px;
        height:55px
    }
    .star {
        font-size:46px;
        right:4%;
        top:32%
    }
    .small-star {
        left:8%;
        top:68%;
        font-size:26px
    }
    .platforms {
        gap:12px;
        padding:20px 0 40px
    }
    .platforms a {
        min-width:95px;
        padding:14px 18px;
        font-size:12px
    }
    .section,.news {
        padding:55px 0
    }
    .grid {
        grid-template-columns:1fr;
        gap:32px
    }
    .art:nth-child(2) {
        padding-top:0
    }
    .art img {
        aspect-ratio:16/9
    }
    .works-grid {
        grid-template-columns:1fr 1fr;
        gap:18px
    }
    .works-grid .art:last-child {
        grid-column:1/-1;
        max-width:65%;
        margin:auto
    }
    .works-grid img {
        aspect-ratio:1
    }
    .works-grid h3 {
        font-size:13px
    }
    .red-area {
        border-radius:30px 30px 0 0
    }
    .news-row {
        gap:12px;
        flex-wrap:wrap;
        font-size:13px
    }
    .news-row span:first-child {
        width:100%
    }
    .bottom {
        grid-template-columns:1fr;
        gap:18px;
        padding-bottom:50px
    }
    .bottom>a {
        padding:28px
    }
    .heading {
        margin-bottom:25px
    }
    .foot-word {
        margin-bottom:30px
    }
}
.heading h2 {
    font-family:inherit;
    font-style:normal;
    font-weight:900;
    letter-spacing:-.045em
}
.hero {
    min-height:560px
}
.hero h1 {
    margin:0
}
.hero .small-star {
    top:76%
}
.inner {
    padding:65px 0 90px;
    min-height:55vh
}
.page-title {
    font-size:clamp(42px,7vw,88px);
    line-height:1.3;
    font-weight:900;
    letter-spacing:-.04em;
    margin:0 0 50px;
    overflow-wrap:anywhere
}
.page-title.article-title {
    font-size:clamp(27px,4vw,48px);
    max-width:900px
}
.archive-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:45px 28px
}
.archive-grid .art {
    padding:0
}
.archive-grid h3 {
    overflow-wrap:anywhere
}
.archive-grid .art p {
    line-height:1.9
}
.archive-grid.works img {
    aspect-ratio:1;
    object-fit:contain;
    background:#eee5d8
}
.reading {
    max-width:820px;
    margin:0 auto;
    color:var(--ink);
    line-height:2;
    font-size:15px
}
.reading h2 {
    color:var(--red);
    font-size:25px;
    margin:45px 0 20px
}
.reading h3 {
    color:var(--red);
    font-size:17px;
    margin:25px 0 10px
}
.reading a {
    text-decoration:underline;
    text-underline-offset:4px;
    overflow-wrap:anywhere
}
.reading ul {
    padding-left:22px
}
.reading .surface-grid-2 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
}
.reading .section-label,.reading .page-badge-row,.reading .page-topline {
    display:none
}
.reading .section-head {
    margin:0
}
.reading .page-section {
    padding:12px 0
}
.reading .page-hero-card {
    padding:0
}
.reading .page-title {
    font-size:26px;
    margin:0
}
.reading .surface-card {
    border-top:1px solid var(--red);
    padding:18px 0
}
.contact-link {
    display:block;
    padding:24px 0;
    border-top:1px solid var(--red);
    overflow-wrap:anywhere;
    font-size:clamp(15px,2vw,22px);
    color:var(--red)
}
.contact-link small {
    display:block;
    font-size:12px;
    margin-bottom:8px
}
.game-door {
    text-align:center;
    padding:22px 0 30px
}
.game-door a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    min-height:48px;
    font-size:24px;
    border:1px solid;
    border-radius:50%
}
.game-list {
    max-width:760px;
    margin:auto
}
.game-list a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid;
    padding:24px 0;
    min-height:70px
}
.game-list a:last-child {
    border-bottom:1px solid
}
.game-list small {
    display:block;
    font-size:12px;
    color:var(--ink);
    margin-top:8px
}
.foot-nav {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:24px;
    font-size:13px
}
.news-row h2 {
    font-size:15px;
    font-weight:500;
    margin:0;
    overflow-wrap:anywhere
}
.news-row time {
    font:12px Arial,sans-serif;
    white-space:nowrap
}
.reading img {
    max-width:100%;
    height:auto
}
.reading iframe {
    max-width:100%
}
.game-content {
    max-width:480px;
    margin:auto;
    text-align:center
}
#othello-board {
    display:grid;
    grid-template-columns:repeat(8,1fr);
    width:100%;
    aspect-ratio:1;
    gap:2px;
    background:var(--red);
    padding:2px;
    margin:22px 0
}
.cell {
    border:0;
    background:#dbe0c7;
    display:grid;
    place-items:center;
    min-width:0;
    padding:0;
    cursor:pointer
}
.stone {
    border-radius:50%;
    width:78%;
    aspect-ratio:1
}
.stone-black {
    background:#342d28
}
.stone-white {
    background:#fffaf0
}
.game-close-btn {
    padding:12px 22px;
    border:1px solid var(--red);
    border-radius:40px;
    background:transparent;
    color:var(--red);
    cursor:pointer
}
.result-title {
    font-size:30px
}
.game-hidden,.secret-hidden {
    display:none
}
.game-active {
    display:block
}
.secret-active {
    display:block;
    text-align:center
}
.secret-active img {
    width:180px
}
.game-content .game-result-box>div {
    color:var(--ink)!important
}
.confetti {
    display:none
}
@media(max-width:700px) {
    .hero {
        min-height:420px
    }
    .hero h1 {
        margin:0;
        font-size:clamp(48px,14vw,86px)
    }
    .hero .star {
        top:12%;
        right:7%
    }
    .hero .small-star {
        top:79%;
        left:10%
    }
    .hero .b2 {
        top:76%
    }
    .hero-bottom {
        font-size:10px
    }
    .inner {
        padding:40px 0 60px
    }
    .page-title {
        margin-bottom:30px
    }
    .archive-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:30px 16px
    }
    .archive-grid h3 {
        font-size:13px;
        line-height:1.7
    }
    .archive-grid p {
        font-size:11px
    }
    .reading {
        font-size:14px
    }
    .reading .surface-grid-2 {
        grid-template-columns:1fr;
        gap:0
    }
    .news-row time {
        width:100%
    }
    .news-row h2 {
        font-size:14px
    }
    .foot-nav a,nav a {
        min-height:44px;
        display:inline-flex;
        align-items:center
    }
    .foot-line {
        line-height:1.8
    }
    .game-list a {
        font-size:15px
    }
    .game-content {
        max-width:100%
    }
    .heading h2 {
        font-size:clamp(40px,10vw,65px)
    }
}
@media(max-width:360px) {
    .archive-grid {
        grid-template-columns:1fr
    }
    .hero h1 {
        font-size:47px
    }
}
.art-title {
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border:1px solid;
    border-radius:18px;
    padding:20px;
    font-weight:900;
    text-align:center
}
.game-title {
    font-size:24px
}
#game-status {
    min-height:24px
}
header .mark {
    font-family:Arial,sans-serif;
    font-size:21px;
    font-weight:500;
    letter-spacing:-.07em;
    white-space:nowrap;
    min-height:44px;
    display:inline-flex;
    align-items:center
}
header .mark:hover {
    text-decoration:none
}

@media (max-width: 700px) {
    header.shell {
        gap: 12px;
    }
    header nav {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
        font-size: clamp(10px, 2.8vw, 12px);
    }
    header nav a {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 44px;
    }
    header nav .nav-contact {
        border: 0;
        padding: 0;
    }
}

@media (max-width: 700px) {
    .hero h1 {
        max-width: 100%;
        font-size: clamp(28px, 8.8vw, 62px);
        white-space: nowrap;
    }
    .hero h1 span {
        display: inline;
    }
    .platforms {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .platforms a {
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 6px;
        font-size: clamp(10px, 2.8vw, 12px);
        white-space: nowrap;
    }
}

@media (max-width: 700px) {
    .hero h1 {
        transform: translateY(-48px);
    }
}