@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@700&display=swap');
@font-face {
    font-family: 'KristallLLWeb-Medium';
    src: url('/assets/font/KristallLLWeb-Medium.woff') format('woff');
    src: url('/assets/font/KristallLLWeb-Medium.woff2') format('woff2');
    font-weight: 700;
}

/* ==================================================
common
================================================== */
html, body {
	width: 100%;
    height: 100%;
    font-size: 16px;
    color: #000000;
    cursor: grab;
    overflow-x: hidden;
}
body {
    font-family: 'KristallLLWeb-Medium', 'Zen Kaku Gothic Antique', sans-serif;
    line-height: 1.5;
}
img {
    width: 100%;
    height: auto;
}
.emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* PC */
@media screen and (min-width: 1025px) , print {
    .br-sp,
    .br-tablet {
        display: none;
    }
}
/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .br-pc,
    .br-sp {
        display: none;
    }
}
/* SP */
@media screen and (max-width: 767px) {
    html, body {
        font-size: 4vw;
    }
    .br-pc,
    .br-tablet {
        display: none;
    }
}
/* ==================================================
animation
================================================== */
.anim-item-wrap {
    display: block;
}
.anim-item {
    display:inline-block;
    will-change: transform, opacity, filter;
}
:root{
    --anim-dur: 1.5s;
    --anim-dur-slow: 3s;
    --anim-dur-more-slow: 4.5s;
    --anim-ease: ease-in-out;
    --pulse-scale: 1.2;
    --sway-angle: 10deg;
    --bounce-distance: 3rem;
    --twinkle-from: 0.6;
    --twinkle-to: 1;
    --rotate-speed: 6s;
    --hover-speed: 1s;
    --hover-ease: cubic-bezier(.22,.61,.36,1);
    --shift-x: 20vw;
    --shift-y: -20vw;
    --pop-scale: 2;
    --stretch-x: 0.5;
    --stretch-y: 2;
}
@media (prefers-reduced-motion: reduce){
    .anim-item, [class^="loop-"], [class*=" loop-"], [class^="hover-"], [class*=" hover-"] {
        animation: none !important;
        transition: none !important;
    }
}
/* --------------------------------------------------
loop
-------------------------------------------------- */
/* ドクンドクン */
@keyframes dokundokun {
    0%,100%{transform:scale(1);}
    15%{transform:scale(var(--pulse-scale));}
    30%{transform:scale(1);}
    45%{transform:scale(var(--pulse-scale));}
    60%{transform:scale(1);}
}
.loop-dokundokun{
    animation: dokundokun var(--anim-dur) var(--anim-ease) infinite;
    transform-origin: center;
}
/* そよそよ */
@keyframes soyoso {
    0%,100%{transform:rotate(0deg) translateX(0);}
    25%{transform:rotate(var(--sway-angle)) translateX(1px);}
    75%{transform:rotate(calc(var(--sway-angle)*-1)) translateX(-1px);}
}
.loop-soyoso{
    animation: soyoso var(--anim-dur-more-slow) var(--anim-ease) infinite;
    transform-origin: center;
}
/* キラリ */
@keyframes kirari {
    0%{opacity:var(--twinkle-from);filter:brightness(1);}
    50%{opacity:var(--twinkle-to);filter:brightness(1.25);}
    100%{opacity:var(--twinkle-from);filter:brightness(1);}
}
.loop-kirari{
    animation: kirari var(--anim-dur-slow) ease-in-out infinite;
}
/* ぴょんぴょん */
@keyframes pyonpyon {
    0%,100%{transform:translateY(0);}
    20%{transform:translateY(calc(-1 * var(--bounce-distance)));}
    40%{transform:translateY(0);}
}
.loop-pyonpyon{
    animation: pyonpyon 1s cubic-bezier(.33,.66,.66,1) infinite;
}
/* ぐるぐる */
@keyframes guruguru {
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
.loop-guruguru{
    animation: guruguru var(--rotate-speed) linear infinite;
    transform-origin:center;
}
/* ふわふわ */
@keyframes fuwafuwa {
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(calc(-1 * var(--bounce-distance)));}
}
.loop-fuwafuwa{
    animation: fuwafuwa var(--anim-dur-slow) ease-in-out infinite;
}
/* --------------------------------------------------
hover
-------------------------------------------------- */
/* きえる */
.hover-kieru {
    transition:opacity var(--hover-speed) var(--hover-ease);
}
.hover-kieru:hover,
.hover-kieru.tapped {
    opacity:0;
}
/* にげる */
.hover-nigeru {
    transition:transform var(--hover-speed) var(--hover-ease);
}
.hover-nigeru:hover,
.hover-nigeru.tapped {
    transform:translate(var(--shift-x), var(--shift-y));
}
/* のびる */
.hover-nobiru {
    transition:transform var(--hover-speed) var(--hover-ease);
}
.hover-nobiru:hover,
.hover-nobiru.tapped {
    transform:scale(var(--stretch-x), var(--stretch-y));
}
/* ふるえる */
@keyframes shake {
    0%,100%{transform:translateX(0) rotate(0);}
    20%{transform:translateX(-4rem) rotate(-1deg);}
    40%{transform:translateX(4rem) rotate(1deg);}
    60%{transform:translateX(-2rem) rotate(-.5deg);}
    80%{transform:translateX(2rem) rotate(.5deg);}
}
.hover-furueru:hover,
.hover-furueru.tapped {
    animation:shake .5s linear 1;
}
/* くるん */
.hover-kurun {
    transition:transform var(--hover-speed) var(--hover-ease);
    transform-style:preserve-3d;
}
.hover-kurun:hover,
.hover-kurun.tapped {
    transform:rotateY(180deg);
}
/* おどろく */
@keyframes pop {
    0%{transform:scale(1);}
    40%{transform:scale(var(--pop-scale));}
    100%{transform:scale(1);}
}
.hover-odoroku:hover,
.hover-odoroku.tapped {
    animation:pop .28s var(--hover-ease) 1;
}

/* ==================================================
rotate
================================================== */
.rotate-p15 {
    display: block;
    transform: rotate(15deg);
}
.rotate-p30 {
    display: block;
    transform: rotate(30deg);
}
.rotate-p45 {
    display: block;
    transform: rotate(45deg);
}
.rotate-p60 {
    display: block;
    transform: rotate(60deg);
}
.rotate-p75 {
    display: block;
    transform: rotate(75deg);
}
.rotate-p90 {
    display: block;
    transform: rotate(90deg);
}
.rotate-m15 {
    display: block;
    transform: rotate(-15deg);
}
.rotate-m30 {
    display: block;
    transform: rotate(-30deg);
}
.rotate-m45 {
    display: block;
    transform: rotate(-45deg);
}
.rotate-m60 {
    display: block;
    transform: rotate(-60deg);
}
.rotate-m75 {
    display: block;
    transform: rotate(-75deg);
}
.rotate-m90 {
    display: block;
    transform: rotate(-90deg);
}
/* ==================================================
imaike2025
================================================== */
#imaike2025 {
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
}
/* --------------------------------------------------
contents
-------------------------------------------------- */
#imaike2025 #contents {
    flex: 1;
}
#imaike2025 #contents .row-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
#imaike2025 #contents .row-list.row-left {
    justify-content: flex-start;
}
#imaike2025 #contents .row-list.row-right {
    justify-content: flex-end;
}
#imaike2025 #contents .row-list li {
    flex: 1;
    max-width: 75vw;
    padding: 3rem;
}

#imaike2025 .row {
    position: relative;
    width: 100%;
    height: 50vw;
}
#imaike2025 .row .row-item {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    width: 50vw;
    height: 100%;
}
#imaike2025 .row .row-item.p-left {
    left: 0;
    -webkit-transform: translateY(-50%) translateX(0);
    -ms-transform: translateY(-50%) translateX(0);
    transform: translateY(-50%) translateX(0);
}
#imaike2025 .row .row-item.p-right {
    left: unset;
    right: 0;
    -webkit-transform: translateY(-50%) translateX(0);
    -ms-transform: translateY(-50%) translateX(0);
    transform: translateY(-50%) translateX(0);
}
#imaike2025 .row .anim-item-wrap,
#imaike2025 .row .anim-item {
    width: 100%;
    height: 100%;
}
#imaike2025 .row .anim-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#imaike2025 .row-word {
    font-size: 1.25rem;
    padding: 1.5rem;
}
#imaike2025 .row-word .row-item p {
    line-height: 2;
    text-align: center;
}
#imaike2025 .row-word .row-item.p-left p {
    text-align: left;
}
#imaike2025 .row-word .row-item.p-right p {
    text-align: right;
}
/* --------------------------------------------------
header
-------------------------------------------------- */
#imaike2025 #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-size: 2rem;
    text-align: center;
    z-index: 999;
}
#imaike2025 #header .site-ttl-wrap {
    border: #000000 3px solid;
    border-radius: 1em;
    background-color: #FFFFFF;
}
#imaike2025 #site-ttl {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25em;
    text-align: center;
    line-height: 1;
}
#imaike2025 #site-ttl .ttl-imaike {
    font-size: 1.25em;
    color: #d1b735;
}
#imaike2025 #site-ttl .ttl-imaike ruby rt {
    font-size: 0.4em;
    margin-bottom: 0.25em;
    color: #000000;
}
#imaike2025 #site-ttl .ttl-img img {
    width: 2em;
    height: 2em;
    object-fit: contain;
}
/* PC, Tablet */
@media screen and (min-width: 768px) , print {
    #imaike2025 #header {
        margin: 1.5rem auto 3rem;
    }
    #imaike2025 #header .site-ttl-wrap {
        display: inline-block;
        padding: 1em 3em;
    }
    #imaike2025 #site-ttl .ttl-imaike {
        letter-spacing: 0.1em;
    }
}
/* SP */
@media screen and (max-width: 767px) {
    #imaike2025 #header {
        font-size: 5.333vw;
        letter-spacing: -0.05em;
        margin: 4vw 4vw 12vw;
    }
    #imaike2025 #header .site-ttl-wrap {
        padding: 0.75em;
    }
}
/* --------------------------------------------------
footer
-------------------------------------------------- */
#imaike2025 #footer small {
    display: block;
    font-size: 10px;
    text-align: center;
}
/* PC, Tablet */
@media screen and (min-width: 768px) , print {
    #imaike2025 #footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        padding: 3rem 1.5rem 1.5rem;
    }
}
/* SP */
@media screen and (max-width: 767px) {
    #imaike2025 #footer small {
        text-align: left;
        padding: 12vw 5.333vw 5.333vw;
    }
}

/* ==================================================
imaike2025-pre
================================================== */
#imaike2025-pre {
    background-color: #f0f0f0;
}
#imaike2025-pre .site-ttl-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}
#imaike2025-pre #site-ttl {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 3rem;
    gap: 0.25em;
    text-align: center;
    line-height: 1;
    margin-bottom: 1em;
}
#imaike2025-pre #site-ttl ruby rt {
    font-size: 0.4em;
    margin-bottom: 0.25em;
    color: #000000;
}
/* ==================================================
sample
================================================== */
#sample {
    background-color: #CCCCCC;
}
#sample main {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    padding: 4vw;
}
#sample .sample-cont {
    padding: 4vw;
    border: #FFFFFF 0.25rem solid;
    border-radius: 8vw;
}
#sample .sample-ttl {
    font-size: 3vw;
    text-align: center;
    color: #FFF;
}
#sample .anim-sample-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#sample .anim-sample {
    width: 16%;
    padding: 4vw 2vw;
}
#sample .anim-item {
    display: block;
    font-size: 8vw;
    text-align: center;
}
#sample .anim-sample .cap {
    margin-top: 1em;
    text-align: center;
}
#sample .hover-nigeru:hover,
#sample .hover-nigeru.tapped {
    transform:translate(7rem, -7rem);
}
/* SP */
@media screen and (max-width: 767px) {
    #sample main {
        padding: 8vw;
        gap: 8vw;
    }
    #sample .sample-cont {
        padding: 5.333vw;
        border: #FFFFFF 0.25rem solid;
    }
    #sample .sample-ttl {
        font-size: 6vw;
    }
    #sample .anim-sample {
        width: 50%;
    }
    #sample .anim-item {
        font-size: 15vw;
    }
}

/* ==================================================
2025-08-23 ws
================================================== */
.imaike-aka {
    color: #e63946;   /* 落ち着いた鮮やかレッド */
}
.imaike-ao {
    color: #0077b6;   /* 少し深みのあるブルー */
}
.imaike-kiiro {
    color: #ffb703;   /* 暖かいゴールド寄りのイエロー */
}
.imaike-murasaki {
    color: #9d4edd;   /* 鮮やかすぎない紫 */
}
.imaike-midori {
    color: #2a9d8f;   /* 落ち着きのあるエメラルドグリーン */
}