@charset "utf-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "M PLUS Rounded 1c", sans-serif;
}

video {
    width: 100%;
    height: auto;
}

.m-plus-rounded-1c-thin {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.m-plus-rounded-1c-light {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.m-plus-rounded-1c-medium {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.m-plus-rounded-1c-bold {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.m-plus-rounded-1c-extrabold {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.m-plus-rounded-1c-black {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 900;
    font-style: normal;
}

/* クリックアクション */
.star {
    position: fixed;
    pointer-events: none;
    font-family: "Arial", "Hiragino Maru Gothic ProN", sans-serif;
    animation: star-fly 0.9s ease-out forwards;
    text-shadow: 0 0 6px rgba(255, 200, 240, 0.8);
}

@keyframes star-fly {
    0% {
        transform: translate(0, 0) scale(1.3);
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) scale(0.4);
        opacity: 0;
    }
}

/* クリックアクション fin */

html {
    scroll-behavior: smooth;
    background-color: #fff7f7;
}

/* .original-gradient {
    height: 200px;
    background-image: linear-gradient(90deg, rgba(254, 240, 255, 1), rgba(254, 247, 243, 1));
    background-image: url(/img/back-pc.png);
    background-repeat: no-repeat;
    background-size: 200%;
} */



.floating-items {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* クリック邪魔しない */
    z-index: -1;
}

.float {
    position: absolute;
    opacity: 0.65;

    animation: floatUpDown 6s ease-in-out infinite,
        sway 8s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(255, 200, 220, 0.4));

}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.heart {
    width: 120px;
    top: 15%;
    left: 70%;
    animation-duration: 6s, 10s;
}

.moon {
    width: 100px;
    top: 60%;
    left: 85%;
    animation-duration: 8s, 12s;
}

.ribbon {
    width: 160px;
    top: 30%;
    left: 2%;
    animation-duration: 7s, 9s;
}

.stars {
    width: 110px;
    top: 75%;
    left: 20%;
    animation-duration: 5s, 8s;
}



body {}

main {
    margin: 5%;
    color: #6C3C3C;
}

main img {
    transition: transform 0.4s ease;
}

main img:hover {
    transform: translateY(-10px);
}

.sp {
    display: none;
}

.cat {
    animation: walk steps(3) 0.5s infinite;
}

.sign.flip {
    transform: rotateX(180deg);
}

/* 初期状態: 透明かつ少し下に配置 */
.fadein-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* アニメーションの設定 */
}

/* 画面内に入った時に適用するスタイル */
.is-show {
    opacity: 1;
    transform: translateY(0);
}



/***ハンバーガーメニュー***/
span {
    display: inline-block;
    vertical-align: middle;
    color: white;
}

ul {
    display: block;
    list-style: none;
    text-align: right;
}

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

a:hover {
    opacity: 0.7;
}

.menu {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 50px;
    text-align: right;
    cursor: pointer;
    z-index: 1000;
    margin: 0;
    padding-left: 1.25em;
}

/* ------------------------------
       メニュー全体（右上固定）
    ------------------------------ */
.menu {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    z-index: 1000;
    margin: 0;
    padding-left: 1.25em;
}

/* ------------------------------
       閉じるボタン
    ------------------------------ */
.menu-close {
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 0em;
    opacity: 0;
    color: #000;
    cursor: pointer;
    transition: 0.3s;
    z-index: 2000;
}

.menu-close-visible {
    font-size: 1.8em;
    opacity: 1;
    transition: 0.3s 0.3s;
}

/* ------------------------------
       各バー（ハンバーガーライン）
    ------------------------------ */
.menu-global {
    z-index: -1;
    position: absolute;
    right: 0;
    left: auto;
    height: 10px;
    width: 100%;
    background-color: #e6cbff;
    backface-visibility: hidden;
    transition: 0.2s;
}

.menu-global:hover {
    right: 10px;
    transition: all 0.2s;
}

/* ------------------------------
       初期位置（6本）
    ------------------------------ */
.menu-top {
    top: 0;
}

.menu-second {
    top: 18px;
}

.menu-third {
    top: 36px;
}

.menu-fourth {
    top: 54px;
}

.menu-fifth {
    top: 72px;
}

.menu-bottom {
    top: 90px;
}

/* ------------------------------
       メニュー文字
    ------------------------------ */
.menu-text {
    opacity: 0;
    font-size: 0em;
    padding: 10px 0;
    transition: 0.1s;
}

/* ------------------------------
       展開アニメーション共通
    ------------------------------ */
.expand {
    box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
    width: 200px;
    height: 50px;
    backface-visibility: hidden;
    right: 0;
    left: auto;
}

/* ------------------------------
    展開時（6段階）
    ------------------------------ */
.menu-top-expand {
    top: 50px;
    background: #ffcce9;
    transition: all 0.5s 0.25s, right 0.1s;
}

.menu-second-expand {
    top: 100px;
    background: #ffb3dc;
    transition: all 0.5s 0.2s, right 0.1s;
}

.menu-third-expand {
    top: 150px;
    background: #ff82cb;
    transition: all 0.5s 0.15s, right 0.1s;
}

.menu-fourth-expand {
    top: 200px;
    background: #ff4fbe;
    transition: all 0.5s 0.1s, right 0.1s;
}

.menu-fifth-expand {
    top: 250px;
    background: #ff289b;
    transition: all 0.5s 0.05s, right 0.1s;
}

.menu-bottom-expand {
    top: 300px;
    height: 100px;
    background: #ff077f;
    transition: all 0.5s, right 0.1s;
}

/* ------------------------------
       テキスト展開時
    ------------------------------ */
.menu-text-expand {
    color: #000000;
    opacity: 0.8;
    padding: 10px;
    font-size: 1.3em;
    transition: all 0.2s 0.7s, font-size 0.1s;
}

/***ハンバーガーメニュー fin***/

/***Topに戻るボタン***/
.paw-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 40px;
    text-decoration: none;
    transition: transform 0.2s;
}

.paw-btn:hover {
    transform: scale(1.2);
}

/***Topに戻るボタン fin***/


/***タブ切り替え***/
.tab-switch {
    --tab-color: #e6cbff;
    display: flex;
    flex-wrap: wrap;
    margin-inline: auto;
    gap: 5px;
}

/* タブボタン */
.tab-switch label {
    padding: 0.7em 1em;
    flex: 1 1 auto;
    /* 均等幅 */
    background: #fffafa;
    cursor: pointer;
    order: -1;
    /* 上に表示 */
    text-align: center;
    border: 1px solid var(--tab-color);
    /* 枠線 */
    border-radius: 30px;
    /* 丸み */
    margin: 0 auto;
}

/* ラジオ非表示 */
.tab-switch input {
    display: none;
}

/* コンテンツ非表示 */
.tab-content {
    display: none;
    width: 100%;
    padding: 1.5em 0;
}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch label:has(:checked) {
    background: var(--tab-color);
    color: #000000;
}

.tab-switch label:has(:checked)+.tab-content {
    display: block;
}

/***タブ切り替え fin***/

/***夢かわ装飾***/

.yume-frame {
    padding: 30px;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}

/***夢かわ装飾 fin***/

/***HOME内容***/

h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 50px;
}

.concept {
    text-align: center;
    /* background-color: #fff; */
}

.concept p {
    display: inline-block;
    text-align: left;
}

.news ul {
    text-align: left;
}

.news ul li {
    border-bottom: #000 1px solid;
}

time {
    font-size: small;
}

.news,
.map {
    padding: 30px;
}

.map img {
    width: 150px;
}

.map-con {
    display: flex;
    justify-content: center;
    align-items: center;
    /* ← これ追加 */
    gap: 10px;
}

.map-con p {}

.news ul {
    width: 80%;
    margin: 0 auto;
}

/***HOME内容 fin***/


/***メニューとキャストのボタン***/
.button-64 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    margin: 0 auto;
    padding: .5em 1em;
    border: 1px solid #ff7a75;
    border-radius: 25px;
    background-color: #fff;
    color: #ff7a75;
    font-size: 1em;
}

.button-64:hover {
    background-color: #ff7a75;
    color: #fff;
}

.button-64::before {
    width: 1.25em;
    height: 1.25em;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z' fill='%23ff7a75'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}

.button-64::after {
    width: 1.25em;
    height: 1.25em;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z' fill='%23ff7a75'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}

.menu-button {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px auto;
}


/***メニューのボタン fin***/


/***メニュー内部***/

.menu-contents {
    /* background-color: #ffffff; */
    text-align: center;
}

.menu-contents ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

.menu-contents ul li {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 700px;
}

.menu-contents ul li img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    flex-shrink: 0;
}

.menu-txt {
    flex: 1;
    text-align: center;
}

.menu-txt h3 {
    margin: 0 0 5px;
}

.menu-txt p {
    margin: 0;
    line-height: 1.6;
}


.menu-contents h2 {
    padding-bottom: 20px;
}

.goods-contents ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.goods-contents img {
    width: 100%;
}


.img-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 230, 245, 0.85);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.img-modal.active {
    display: flex;
}

.modal-inner {
    text-align: center;
}

#modal-name {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #ff7fbf;
    letter-spacing: 0.05em;
}

#modal-img {
    max-width: 80vw;
    max-height: 70vh;
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(255, 180, 220, 0.8);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/***メニュー内部 fin***/

/***キャスト内部***/
.cast-contents {
    text-align: center;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 30px;
    gap: 30px;
}

.cast-contents img {
    width: 40%;
}

.cast-txt p {
    text-align: left;
    font-size: 20px;
}

.cast-txt h2 {
    font-size: 50px;
}

/***キャスト内部 fin***/

.main {
    width: 100%;
}

.cast-contents img {
    object-fit: contain;
}


/***フッター***/

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    padding: 20px;
}

footer img {
    width: 200px;
}

/***フッター fin***/



/* ===========================
    スマホ向けレスポンシブ
   =========================== */
@media (max-width: 450px) {

    p {
        font-size: 12px;
    }

    .sp {
        display: block;
    }

    .heart {
        width: 70px;
        top: 15%;
        left: 75%;
    }

    .moon {
        width: 50px;
        top: 55%;
        left: 75%;
    }

    .ribbon {
        width: 85px;
        top: 30%;
        left: 1%;
    }

    .stars {
        width: 60px;
        top: 75%;
        left: 5%;
    }

    /* 見出しサイズ */
    h2 {
        font-size: 22px;
    }

    /* ニュース */
    .news ul {
        width: 95%;
    }

    /* ハンバーガーメニューの位置と大きさ */
    .menu {
        right: 10px;
        top: 10px;
        width: 25px;
    }

    /* ハンバーガーのバー幅 */
    /* .menu-global {
        height: 8px;
    } */

    /* メニュー展開時のボックス幅を短く */
    .expand {
        width: 160px;
    }

    /* topに戻るボタンを少し小さく */
    .paw-btn {
        font-size: 32px;
        bottom: 15px;
        right: 15px;
    }

    /* メニューとキャストのボタン */
    .menu-button {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2列 */
        gap: 10px;
        width: 100%;
        max-width: 400px;
        /* 中央に収めたい時用 */
        margin: 0 auto;
    }

    .button-64 {
        width: 100%;
        /* ボタンが2列にきれいに収まる */
        min-width: auto;
        font-size: 0.9em;
        padding: 0.6em 0.8em;
    }

    /* メニュー内容（画像とテキスト縦並び） */
    .menu-contents ul li {
        flex-direction: column;
        text-align: center;
    }

    .menu-contents ul li img {
        width: 120px;
        height: 120px;
    }

    .menu-txt {
        width: 100%;
    }

    /* キャストなど背景がはみ出る場合 */
    .cast-contents {
        background-size: cover;
    }

    /* ボタンを小さめに */
    .button-64 {
        min-width: 150px;
        font-size: 0.9em;
    }

    /* タブの幅が詰まるので縦並びに */
    .tab-switch {
        flex-direction: column;
    }

    .tab-switch label {
        width: 100%;
        margin: 0;
    }

    .cast-contents {
        gap: 5px;
    }

    .cast-txt p {
        font-size: 10px;
    }

    .cast-txt h2 {
        font-size: 25px;
    }

    footer img {
        width: 100px;
    }
}