@charset "utf-8";

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    vertical-align: bottom;
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

body {
    font-family: "M PLUS 2", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 100%;
    color: #6f5b4e;
    background-image:
        linear-gradient(rgb(255, 142, 204, 0.4) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgb(255, 142, 204, 0.4) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-attachment: fixed;
}

li {
    list-style-type: none;
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

#firstview {
    height: 100svh;
    min-height: 100svh;
}

#about,
#system,
#cats,
#menu,
#access,
#contact {
    max-width: 100%;
    width: 900px;
    margin: 0 auto;
    box-shadow: rgba(255, 255, 255, 0.8);
}


/*  セクション共通 */

section {
    padding: 100px 20px;
}

.section-inner {
    max-width: 800px;
    margin: 0 auto;
}

section h2 {
    text-align: center;
    margin-bottom: 30px;
}

.section-inner {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.setumei {
    text-align: center;
    line-height: 1.8;
}

.setumei p {
    font-weight: bold;
    font-size: 0.9rem;
    padding: 20px 30px;
    background-color: rgba(255, 255, 255, 0.6);

}

.setumei p {
    border-top: 2px dashed #FF8ECC;
    border-bottom: 2px dashed #FF8ECC;
}

h2 img {
    max-width: 100%;
    width: auto;
    height: 60px;
    z-index: 1;
    margin-bottom: 24px;
}

.sectiontitle-box {
    position: relative;
}

h2 {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    isolation: isolate;
}

h2::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    background: #fffccf;
    border-radius: 50%;
    top: 20px;
    right: -40px;
    transform: translateY(-50%);
    z-index: -1;
}

#cats h2::after {
    background-color: #ffd6ed;
}

.hidden-pc {
    display: none;
}

.logoimage,
.up img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}




/* =========================
   ここからパララックス 共通
========================= */

/* 覗き窓 */
.systemimage,
.catsimage,
.menuimage,
.accessimage,
.contactimage {
    position: relative;
    width: 900px;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;
    background-color: #ffffff;
    clip-path: inset(0);
}


/* 固定される背景画像 */
.systemimage .bg-image-fixed,
.catsimage .bg-image-fixed,
.menuimage .bg-image-fixed,
.accessimage .bg-image-fixed,
.contactimage .bg-image-fixed {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    height: 100vh;

    background-size: 1200px auto;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================
   個別の画像
========================= */

.systemimage .bg-image-fixed {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.1)),
        url(images/systemimage.jpg);
}


.catsimage .bg-image-fixed {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.1)),
        url(images/cats_nitijo2.jpg);
}


.menuimage .bg-image-fixed {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2)),
        url(images/menuimage.jpg);
}


.accessimage .bg-image-fixed {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2)),
        url(images/shopimage.jpg);
}


.contactimage .bg-image-fixed {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2)),
        url(images/cats_nitijo.jpg);
}


/* =========================
   ここまでパララックス 共通
========================= */




/* 足跡アニメーション */

#system,
#cats,
#menu,
#access,
#contact {
    position: relative;
    overflow: visible;
}

.ashiato-box-right {
    position: absolute;
    top: 70px;
    right: 0;
}

.ashiato-box-left {
    position: absolute;
    top: 10px;
    left: 0;
}

/* セクションが表示されたらアニメーション */
/* ashiato-pon1 */
#system.is-visible .ashiato,
#menu.is-visible .ashiato,
#contact.is-visible .ashiato {
    animation-name: ashiato-pon;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* ashiato-pon2 */
#cats.is-visible .ashiato-left,
#access.is-visible .ashiato-left {
    animation-name: ashiato-pon2;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/*************************************/

.ashiato {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    background-image: url("images/asiato_anime.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 100;
    opacity: 0;
}

/* 1個目 */
.ashiato1 {
    top: -140px;
    right: 80px;
}

/* 2個目 */
.ashiato2 {
    top: -60px;
    right: 70px;
}

/* 3個目 */
.ashiato3 {
    top: 10px;
    right: 120px;
}

@keyframes ashiato-pon {
    0% {
        opacity: 0;
        transform: rotate(-170deg) scale(0);
    }

    60% {
        opacity: 1;
        transform: rotate(-170deg) scale(1.2);
    }

    100% {
        opacity: 1;
        transform: rotate(-170deg) scale(1);
    }
}

.ashiato-left {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    background-image: url("images/asiato_anime.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 100;
    opacity: 0;
}

/* 1個目 */
.ashiato-left-1 {
    top: -80px;
    left: 60px;
}

/* 2個目 */
.ashiato-left-2 {
    top: 0;
    left: 50px;
}

/* 3個目 */
.ashiato-left-3 {
    top: 70px;
    left: 100px;
}

@keyframes ashiato-pon2 {
    0% {
        opacity: 0;
        transform: rotate(170deg) scale(0);
    }

    60% {
        opacity: 1;
        transform: rotate(170deg) scale(1.2);
    }

    100% {
        opacity: 1;
        transform: rotate(170deg) scale(1);
    }
}

/* 右側 */
#system .ashiato1,
#menu .ashiato1,
#contact .ashiato1 {
    animation-delay: 0s;
}

#system .ashiato2,
#menu .ashiato2,
#contact .ashiato2 {
    animation-delay: 0.5s;
}

#system .ashiato3,
#menu .ashiato3,
#contact .ashiato3 {
    animation-delay: 1s;
}

/* 左側 */
#cats .ashiato-left-1,
#access .ashiato-left-1 {
    animation-delay: 0s;
}

#cats .ashiato-left-2,
#access .ashiato-left-2 {
    animation-delay: 0.5s;
}

#cats .ashiato-left-3,
#access .ashiato-left-3 {
    animation-delay: 1s;
}


/* ファーストビュー */

#firstview {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3)),
        url(images/cat_mainimage.jpg);
    background-size: cover;
    background-position: center;
}

.firstview_top {
    margin-top: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header {
    width: 250px;
    line-height: 1;
    color: #FF8ECC;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 20px;
    left: 20px;
}

header span {
    font-size: 15px;
    letter-spacing: 0.15rem;
}

.catchcopy {
    font-size: 20px;
    padding: 20px 0 50px 0;
    font-family: "DotGothic16", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.4em;
}

.catchcopy h2::after {
    display: none;
}

.start {
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    color: #FF8ECC;
    border: 2px solid #FF8ECC;
    background-color: #ffffff;
    padding: 20px 40px;
}

.start:hover {
    background-color: #FF8ECC;
}

.start:hover p {
    color: #ffffff;
}

.typing {
    width: 0;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    font-size: 40px;
    color: #FF8ECC;
    border-right: 2px solid #FF8ECC;
    /* カーソル */
    animation:
        typing 2s steps(20, end) forwards,
        blink 0.8s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 37ch;
        /* 文字数に合わせる */
    }
}

@keyframes blink {
    70% {
        border-color: transparent;
    }
}

.scroll span {
    color: #ffffff;
    font-size: 20px;
}

.scroll {
    position: absolute;
    left: 3%;
    bottom: 150px;
    max-width: 100%;
}

.scroll::before {
    animation: scroll 2s infinite;
    background-color: #ffffff;
    bottom: -150px;
    content: "";
    height: 140px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
    z-index: 2;
}

.scroll::after {
    background-color: #FF8ECC;
    bottom: -150px;
    content: "";
    height: 140px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
}

@keyframes scroll {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    51% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}


/*  ニュース */

.news {
    max-width: 1050px;
    margin: 40px auto;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.news-box {
    width: 100%;
    min-height: 72px;
    padding: 18px 45px;

    display: flex;
    align-items: center;
    gap: 30px;

    background-color: rgba(255, 202, 227, 0.3);
    border-radius: 18px;
}

.news-title {
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 600;
}

.news-line {
    width: 1px;
    height: 36px;
    background-color: #FF8ECC;
    flex-shrink: 0;
}

.news-date {
    flex-shrink: 0;
    font-weight: 600;
}

.news-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.news-arrow {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

    border: none;
    border-radius: 50%;

    background-color: #FF8ECC;
    color: #fff;

    cursor: pointer;
    position: relative;

    transition: transform 0.2s ease,
        opacity 0.2s ease;
}

/* 矢印 */
.news-arrow::before {
    content: "";
    position: absolute;

    width: 7px;
    height: 7px;

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;

    top: 50%;
    left: 50%;
}

/* 左 */
.news-prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

/* 右 */
.news-next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.news-arrow:hover {
    transform: scale(1.08);
    opacity: 0.8;
}


.news-date,
.news-text {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* 右へ流れて退場 */
.news-slide-out {
    transform: translateX(120px);
    opacity: 0;
}

/* 次のニュースは左側からスタート */
.news-slide-in {
    transform: translateX(-120px);
    opacity: 0;
}








/*  アバウト・コンセプト */
#about {
    position: relative;
    width: 600px;
    max-width: 100%;
    background-color: #ffffff;
    border: 3px solid #ffddec;
    border-radius: 500px 500px 0 0;
    padding-top: 120px;
    padding-bottom: 50px;
    margin-left: calc((100% - 900px) / 2);
    margin: 50px auto 0 auto;
}


.concept_cat1 {
    position: absolute;
    bottom: -56px;
    left: -53%;
    width: 300px;
}

.concept_cat2 {
    position: absolute;
    top: 20%;
    right: -15%;
    width: 200px;
}

.concept-setumei {
    text-align: center;
    line-height: 2.4;
    align-items: center;
}

.concept-setumei p {
    font-weight: bold;
    padding: 0.6rem;
}

.strong {
    color: #ff8ecc;
    font-size: larger;
}

.heartnaka {
    position: relative;
    max-width: 300px;
    margin: 20px auto 0 auto;
    aspect-ratio: 205.682 / 185.542;
}

.photo-slider {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-item {
    position: absolute;
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: photoFade 21s infinite;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 表示タイミングをずらす */
.photo-item:nth-child(1) {
    animation-delay: 0s;
}

.photo-item:nth-child(2) {
    animation-delay: 4s;
}

.photo-item:nth-child(3) {
    animation-delay: 8s;
}

.photo-item:nth-child(4) {
    animation-delay: 12s;
}

.photo-item:nth-child(5) {
    animation-delay: 16s;
}

.photo-item:nth-child(6) {
    animation-delay: 20s;
}

.photo-item:nth-child(7) {
    animation-delay: 24s;
}

.photo-item:nth-child(8) {
    animation-delay: 28s;
}


/* フェード */
@keyframes photoFade {

    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}



/* ここからハート枠 */
#svg {
    position: absolute;
    z-index: 10;
    inset: 0;
    width: 100%;
    height: 100%;
}

.heart-path {
    animation: heartColor 15s infinite alternate;
    max-width: 100%;
    height: auto;
}


@keyframes heartColor {

    0% {
        fill: #ffcae3;
    }

    33% {
        fill: #fff2bf;
    }

    66% {
        fill: #beedff;
    }

    100% {
        fill: #dbc2ff;
    }

}




/*  システム */
#system {
    background-color: #ffddec;
    border-radius: 100px 100px 0 0;
}

.midasi-sub {
    text-align: center;
}

.system-inner {
    width: 100%;
    margin: 42px auto 0 auto;
}

/* プラン共通 */
.caption,
.plan-normal,
.plan-gentei {
    max-width: 600px;
    margin: 0 auto
}

.caption {
    background-color: #ff8ecc;
    border-radius: 40px 40px 0 0;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    padding: 13px 0 10px;
}

.plan-normal,
.plan-gentei {
    background-color: #ffffff;
    border: 2px solid #ff8ecc;
    border-radius: 0 0 40px 40px;
}

.plan-normal {
    margin-bottom: 2rem;
}

/* プラン内容 */
.price-list {
    max-width: 500px;
    margin: 0 auto;
}

.price-list+.price-list {
    border-top: 2px dotted #ff8ecc;
}

.plan-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin: 1rem 0;
    padding: 0 10px;
}

.plan-setumei {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0 10px;
}

.price {
    font-size: 1.5rem;
}

.course {
    margin-left: 6px;
    background-color: #ffd1ea;
    padding: 5px 10px;
    border-radius: 30px;
}

dt {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

dt img {
    width: 32px;
    height: auto;
    margin-right: 5px;
    padding-bottom: 5px;
}






/* ここからCATS */

#cats {
    background-color: #fffccf;
}

.staff-card {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 42px;
}

.card {
    background-color: #ffffff;
    flex-basis: calc((100% - 20px * 2) / 3);
    flex-wrap: wrap;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ff8ecc;
}

.card:hover {
    transform: scale(1.08);
}

.card-image img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.card-content {
    padding: 10px 10px;
    text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.card-content h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.card-content p {
    font-size: 0.9rem;
    font-weight: 500;
}

.birthday img {
    width: 24px;
    padding-right: 5px;
    margin-bottom: 3px;
}

.debut {
    font-size: 120%;
    font-weight: bold;
    color: #ff8ecc;
    margin: 0 0 5px 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.flex img {
    width: 20px;
    padding-left: 5px;
    margin-bottom: 5px;
}

.tag {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.tag+.tag {
    margin-top: 10px;
    margin-left: 5px;
}

/*  ピンク */
.tag-pink {
    background: #ffd6ed;
    color: #eb49a2;
}

/* 🔴 赤 */
.tag-red {
    background: #ffd3d3;
    color: #da3a3a;
}

/* 🟠 オレンジ */
.tag-orange {
    background: #ffe8d3;
    color: #f06000;
}

/* 🟡 黄色 */
.tag-yellow {
    background: #FFFDD1;
    color: #e79702;
}

/* 🟢 緑 */
.tag-green {
    background: #c0ffdf;
    color: #228527;
}

/* 🩵 水色 */
.tag-blue {
    background: #cbe9ff;
    color: #4b8599;
}

/* 🟣 紫 */
.tag-purple {
    background: #ddd2ff;
    color: #634080;
}

/* ■ グレー */
.tag-gray {
    background: #dfdfdf;
    color: #53545a;
}






/*  ここからメニュー */
#menu {
    background-color: #ffffff;
    border-left: 2px solid #ffddec;
    border-right: 2px solid #ffddec;
}

#menu h3 {
    text-align: center;
}

.menu-category {
    border-bottom: 2px dotted #FF8ECC;
}

.menu-category:last-child {
    border: none;
}

.menu-category h3 {
    font-size: 1.4rem;
    margin: 64px 0 32px 0;
}

.under {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.under::before {
    content: "";
    width: 30px;
    height: 2px;
    box-sizing: border-box;
    background-color: #FF8ECC;
    rotate: 60deg;
}

.under::after {
    content: "";
    width: 30px;
    height: 2px;
    box-sizing: border-box;
    background-color: #FF8ECC;
    rotate: -60deg;
}

.menu-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px 25px;
    max-width: 900px;
    margin: 0 auto 80px auto;
}

.drinkfood-card {
    width: 100%;
    background-color: #fff;
    padding: 12px 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

#menu .card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

#menu img {
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

/* 商品名・価格 */

#menu .menu-flex {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 12px;
}

#menu .menu-flex p {
    margin: 0;
}

#menu .menu-flex p:first-child {
    font-size: 1rem;
    font-weight: bold;
}

#menu .menu-flex p:last-child {
    margin-top: 3px;
    font-size: 0.9rem;
}


.drinkfood-card {
    position: relative;
}

.drinkfood-card.new::before {
    content: "NEW";
    position: absolute;
    top: -10px;
    left: -10px;

    background-color: #FF8ECC;
    color: #ffffff;

    padding: 10px 10px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: bold;

    z-index: 2;
}


/*  ここからアクセス・店舗情報 */

#access {
    background-color: #fffccf;
}

#access h2::after {
    background-color: #ffd6ed;
}

.shopimage {
    display: flex;
    justify-content: center;
    background-image: url("images/shopimage.jpg");
    border-radius: 10px;
    width: 100%;
    height: 350px;
    margin: 0 auto;
    object-fit: cover;
    background-size: cover;
    background-position: 50% 60%;
}

.shop-info {
    padding-top: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 8px auto 0 auto;
    border-radius: 20px;
}

.shop-info-box {
    top: 40px;
    right: 0;
    width: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 25px 35px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(150, 80, 110, 0.12);
}

.infotag {
    font-weight: bold;
    font-size: 0.8rem;
    margin-left: 6px;
    background-color: #ffd1ea;
    padding: 5px 10px;
    border-radius: 30px;
    margin-right: 5px;
    display: inline-block;
    width: 75px;
    text-align: center;
    margin-right: 8px;
}


/* MAP */
.map {
    filter: sepia(10%);
    margin-top: 42px;
}

.map iframe {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 0;
    border-radius: 10px;
}

/* ショップ情報側 */
.bottom-inner {
    display: flex;
    justify-content: center;
}

.shop-info h3 {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #ff8ecc;
}

.shop-info-item {
    font-weight: 500;
    align-items: center;
    padding: 12px 0;
    border-bottom: 2px dotted rgba(255, 142, 204, 0.7);
    width: 80%;
}





/*  ここからコンタクト */

#contact {
    background-color: #cbfcff;
}

.contact {
    max-width: 600px;
    margin: 42px auto 0 auto;
    padding: 30px 20px;
    background: #fff;
    border: 2px solid #ff8ecc;
    border-radius: 28px;
    position: relative;
}

.header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
}

.cat {
    font-size: 58px;
    line-height: 1;
    margin-bottom: 12px;
}

.subtitle {
    margin-top: 10px;
    font-size: 14px;
}

.form-group {
    margin-bottom: 22px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}

.required {
    display: inline-block;
    margin-left: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #ffd1ea;
    font-size: 11px;
}

input,
select,
textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #ffd1ea;
    border-radius: 14px;
    background: #ffffff;
    color: #5d493d;
    font-size: 16px;
    outline: none;
    transition: 0.2s;
    font-family: inherit;
}


textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.7;
}


.submit {
    width: 300px;
    max-width: 100%;
    padding: 16px;
    border: none;
    border-radius: 999px;
    background: #ff8ecc;
    color: white;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: 0.2s;
    display: block;
    margin: 0 auto;
}

.submit:hover {
    opacity: 0.7;
    transform: translateY(2px);
}

.note {
    margin-top: 25px;
    padding: 15px;
    border-radius: 14px;
    background: #FFF5FA;
    color: #9a806d;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.footer-cat {
    text-align: center;
    margin-top: 28px;
    color: #c1a994;
    font-size: 13px;
}





/* ここからfooter */

footer {
    position: relative;
    background-image: url(images/back.png);
    background-color: rgb(255, 142, 204);
    background-size: 35px;
    padding: 50px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

footer img {
    max-width: 300px;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.footer-bottom ul {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.footer-bottom li a {
    text-decoration: none;
    color: #6f5b4e;
    font-size: 0.9rem;
}

.footer-bottom li a:hover {
    text-decoration: underline;
}

.followme {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 16px 16px;

    &::before {
        content: "";
        width: 30px;
        height: 2px;
        background-color: #FF8ECC;
        rotate: 60deg;
    }

    &::after {
        content: "";
        width: 30px;
        height: 2px;
        box-sizing: border-box;
        background-color: #FF8ECC;
        rotate: -60deg;
    }
}

.followme p {
    font-weight: 500;
}

.snsicon ul {
    justify-content: center;
}

.snsicon img {
    width: 30px;
}

.frillbox {
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    padding: 32px 0 16px 0;
    position: relative;
    text-align: center;
}

.frillbox::before {
    content: "";
    position: absolute;
    left: 0;
    top: -15px;
    width: 100%;
    height: 15px;

    background: radial-gradient(circle at 15px 100%,
            rgba(255, 255, 255, 0.7) 15px,
            transparent 15px) repeat-x;

    background-size: 30px 15px;
}


small {
    background-color: rgb(255, 142, 204);
    padding: 5px 0;
    display: flex;
    justify-content: center;
    margin-top: auto;
    width: 100%;
    color: #ffffff;
    align-items: center;
}

small img {
    width: 17px;
    height: 17px;
}


/* ここから上へボタン */
.up {
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 2000;
}

.up img {
    width: 150px;
}

.pagetop {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease,
        visibility 0s linear 0.3s;
}

.pagetop.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

.anim-box.fadeup.is-animated {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

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

/* ここまで上へボタン */









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

#sp_gnavi_check {
    display: none;
}

#sp_gnavi_btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #FF8ECC;
    background-color: #ffffff;
    opacity: 0.95;
    z-index: 500;
    cursor: pointer;
}

#sp_gnavi_btn span,
#sp_gnavi_btn span::before,
#sp_gnavi_btn span::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 5px;
    background-color: #FF8ECC;
    transition: all 0.3s ease-in-out;
}

#sp_gnavi_btn span::before {
    bottom: 12px;
}

#sp_gnavi_btn span::after {
    top: 12px;
}

/* ×印 */
#sp_gnavi_check:checked~#sp_gnavi_btn span {
    background-color: transparent;
}

#sp_gnavi_check:checked~#sp_gnavi_btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}

#sp_gnavi_check:checked~#sp_gnavi_btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ナビゲーション */
#gnavi {
    position: fixed;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 50px 20px;
    border: 2px solid #FF8ECC;
    border-radius: 20px;
    background-color: #ffffff;
    z-index: 400;

    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* メニューを開く */
#sp_gnavi_check:checked~#gnavi {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* ナビゲーション共通 */
#gnavi ul {
    display: flex;
    gap: 10px;
    padding: 0;
    list-style-type: none;
}

#gnavi .gnavi-menu ul {
    flex-direction: column;
    align-items: flex-start;
}

#gnavi ul a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 30px;
    text-decoration: none;
    color: #FF8ECC;
}

/* メニュー文字 */
#gnavi .gnavi-menu li a>span:first-child {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

/* サブ文字 */
#gnavi .gnavi-menu li a .navsub {
    font-size: 1rem;
    letter-spacing: 0.05em;
}

/* 下線 */
#gnavi .gnavi-menu li {
    width: 100%;
}

#gnavi .gnavi-menu li::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: #FF8ECC;
    transition: width 0.3s ease;
}

#gnavi .gnavi-menu li:hover::after {
    width: 100%;
}

#gnavi ul a:hover {
    opacity: 0.7;
}

/* メニュー以外の黒背景 */
#gnavi_overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
    margin: 0;
}

#sp_gnavi_check:checked~#gnavi_overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

/* =========================
   2セクション目以降の固定ロゴ
========================= */

.fixed-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    width: clamp(150px, 10vw, 250px);
    z-index: 4000;

    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0s linear 0.4s;
}

.fixed-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.fixed-logo.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0s linear 0s;
}






/* 1300px以下の場合 */
@media(max-width:1300px) {
    .fixed-logo {
        display: none;
    }

}



/* 900px以下の場合 */
@media(max-width:900px) {
    .typing {
        font-size: 30px;
    }

    @keyframes typing {
        to {
            width: 38ch;
        }
    }

    .system-inner {
        margin-top: 30px;
    }

    .staff-card {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 30px;
    }

    .card {
        flex-basis: calc((100% - 20px * 2) / 3);
    }

    .card-content,
    .card h3,
    .debut {
        font-size: 1rem;
    }

    .card-content p {
        font-size: 0.85rem;
    }

    .card:hover {
        transform: none;
    }

    .drinkfood-card {
        flex-basis: calc((100% - 20px * 2) / 3);
    }
}




/* 800px以下の場合 */
@media(max-width:800px) {

    .concept_cat1,
    .concept_cat2 {
        display: none;
    }

    #about {
        position: relative;
        background-color: #ffffff;
        border: 2px solid #ffddec;
        border-radius: 500px 500px 0 0;
        margin-top: 16px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }


    .news {
        position: relative;
        margin: 24px auto 0 auto;
        padding: 0 10px 45px;
        display: block;
    }

    .news-box {
        width: 100%;
        min-height: 110px;
        padding: 18px 20px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;

        background-color: rgba(255, 202, 227, 0.3);
        border-radius: 20px;
    }

    .news-title,
    .news-line {
        display: none;
    }

    .news-date {
        display: block;
        font-size: 12px;
        font-weight: 600;
    }

    .news-text {
        font-size: 14px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;

        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

    .news-arrow {
        position: absolute;
        bottom: 5px;

        width: 32px;
        height: 32px;

        font-size: 20px;
    }

    .news-prev {
        left: auto;
        right: 48px;
    }

    .news-next {
        right: 10px;
    }


    h2::after {
        width: 120px;
        height: 120px;
        right: -25px;
    }

    .card-content p {
        font-size: 0.9rem;
    }

    #menu {
        border-left: none;
        border-right: none;
    }

    #system {
        border-radius: 0;
    }

    .up {
        bottom: 80px;
        right: 20px;
    }

    .up img {
        width: 100px;
    }




    /* ここから足跡アニメーション */
    /* 足跡全体位置 */
    .ashiato-box-right {
        top: -5px;
        right: 0;
    }

    .ashiato-box-left {
        top: -5px;
        left: 0;
    }

    /* 足跡みぎ側 */
    .ashiato {
        width: 30px;
        height: 30px;
    }

    .ashiato1 {
        top: -50px;
        right: 50px;
        animation-delay: 0s;
    }

    .ashiato2 {
        top: -10px;
        right: 30px;
        animation-delay: 0.4s;
    }

    .ashiato3 {
        top: 30px;
        right: 50px;
        animation-delay: 0.8s;
    }

    /* 足跡ひだり側 */
    .ashiato-left {
        width: 30px;
        height: 30px;
    }

    .ashiato-left-1 {
        top: -50px;
        left: 50px;
    }

    .ashiato-left-2 {
        top: -10px;
        left: 30px;
    }

    .ashiato-left-3 {
        top: 30px;
        left: 50px;
    }

    /* ここまで足跡アニメーション */



    /*  ここからスマホパララックス */
    .systemimage .bg-image-fixed,
    .catsimage .bg-image-fixed,
    .menuimage .bg-image-fixed,
    .accessimage .bg-image-fixed,
    .contactimage .bg-image-fixed {
        background-size: cover;
    }

    .catsimage {
        height: 200px;
    }

    .menuimage {
        height: 200px;
    }

    .accessimage {
        height: 200px;
    }

    .contactimage {
        height: 200px;
    }

    /*  ここまでスマホパララックス */




    /*  ここからアクセス・店舗情報 */

    #access {
        background-color: #fffccf;
    }

    #access h2::after {
        background-color: #ffd6ed;
    }

    .shopimage {
        display: flex;
        justify-content: center;
        background-image: url("images/shop.jpg");
        border-radius: 10px;
        width: 100%;
        height: 350px;
        margin: 0 auto;
        object-fit: cover;
        background-size: cover;
        background-position: 50% 60%;
    }

    .shop-info {
        padding-top: 20px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
    }

    .shop-info-box {
        top: 40px;
        right: 0;
        width: 200px;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 25px 35px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(150, 80, 110, 0.12);
    }

    .infotag {
        font-size: 0.8rem;
    }

    /* MAP */
    .map {
        filter: sepia(10%);
    }

    .map iframe {
        width: 100%;
        height: 100%;
        min-height: 300px;
        border: 0;
        border-radius: 10px;
    }

    /* ショップ情報側 */
    .bottom-inner {
        display: flex;
        justify-content: center;
    }

    .shop-info h3 {
        text-align: center;
        font-size: 1rem;
        font-weight: bold;
        letter-spacing: 0.15em;
        color: #ff8ecc;
    }

    .shop-info-item {
        align-items: center;
        padding: 12px 0;
        width: 100%;
        margin: 0 auto;
        border-bottom: 2px dotted rgba(255, 142, 204, 0.7);
    }

    .shop-info-item:last-child {
        border-bottom: 2px dotted rgba(255, 142, 204, 0.7);
        display: flex;
    }

    .shop-info-item p {
        display: grid;
        grid-template-columns: 75px 1fr;
        column-gap: 20px;
        align-items: center;
    }

    .infotag {
        width: 75px;
        margin-right: 0;
    }
}





/* 600px以下の場合 */
@media(max-width:600px) {

    /*  ここからセクション共通 */
    .area {
        padding: 80px 20px;
    }

    #firstview {
        padding: 0;
    }

    .hidden-pc {
        display: block;
    }

    h2 img {
        max-width: 100%;
        width: auto;
        height: 60px;
        margin-bottom: 0;
    }

    .setumei p {
        font-size: 0.8rem;
    }

    h2::after {
        width: 100px;
        height: 100px;
        right: -10px;
        top: 20px;
    }

    .section-inner {
        width: 100%;
        max-width: 100%;
    }

    section h2 {
        font-size: clamp(2.5rem, 12vw, 5rem);
    }

    .hidden-sp {
        display: none;
    }

    /*  ここまでセクション共通 */




    /*  ここからファーストビュー */
    .firstview_top {
        margin-top: 190px;
    }

    .catchcopy {
        font-size: 15px;
        padding: 0 0 30px 0;
        font-family: "DotGothic16", sans-serif;
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0.2em;

        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }

    .typing {
        font-size: 15px;
        margin: 0;
    }

    @keyframes typing {
        from {
            width: 0;
        }

        to {
            width: 100%;
        }
    }

    .scroll span {
        font-size: 18px;
    }

    .scroll {
        bottom: 140px;
        transform: translateY(30px);
    }

    .scroll::before,
    .scroll::after {
        bottom: -110px;
        height: 100px;
    }

    header {
        width: 200px;
        max-width: calc(100% - 80px);
        top: 10px;
        left: 10px;
    }


    .start {
        padding: 16px 24px;
    }

    .start p {
        font-size: 0.8rem;
    }

    /*  ここまでファーストビュー */



    .concept-setumei {
        line-height: 1.8;
        font-size: 0.9rem;
    }

    .card-content p {
        font-size: 0.9rem;
    }

    .birthday img {
        width: 20px;
        padding-right: 5px;
        margin-bottom: 3px;
    }

    .tag {
        font-size: 9px;
        padding: 4px 8px;
    }

    .tag+.tag {
        margin-bottom: 4px;
        margin-left: 2px;
    }


    .menu-category h3 {
        font-size: 1.2rem;
        margin: 48px 0 24px 0;
    }

    .menu-category:last-child .menu-card {
        margin-bottom: 0;
    }

    .menu-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 15px;
        padding: 0 15px;
        margin: 0 auto 48px auto;
    }

    .drinkfood-card {
        flex-basis: calc((100% - 20px * 1) / 2);
    }

    #menu .menu-flex p:first-child {
        font-size: 0.9rem;
        font-weight: bold;
    }

    #menu .menu-flex p:last-child {
        margin-top: 3px;
        font-size: 0.9rem;
    }


    /* プラン共通 */

    .caption {
        background-color: #ff8ecc;
        border-radius: 40px 40px 0 0;
        color: #ffffff;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        padding: 13px 0 10px;
    }

    /* プラン内容 */

    .price {
        font-size: 1.3rem;
    }

    .course {
        font-size: 0.85rem;
    }

    dt {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .plan-setumei {
        font-size: 0.8rem;
    }

    dt img {
        width: 32px;
        height: auto;
        margin-right: 5px;
        padding-bottom: 3px;
    }

    .card {
        flex-basis: calc((100% - 20px * 1) / 2);
    }

    h1 {
        font-size: 26px;
    }

    .map {
        margin-top: 24px;
    }

    .shop-info-item p {
        font-size: 0.85rem;
    }

    input,
    select,
    textarea {
        font-size: 14px;
    }

    .contact::before {
        left: 30px;
    }

    .contact::after {
        right: 30px;
    }

    .footer-bottom ul {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    .footer-bottom li a {
        font-size: 0.8rem;
    }

    .footer-bottom {
        gap: 24px;
    }

    .up {
        bottom: 85px;
        right: 8px;
    }

    .up img {
        width: 80px;
    }


    /* ハンバーガーメニュー */
    #sp_gnavi_btn {
        top: 10px;
        right: 10px;
        position: fixed;
        height: 50px;
        width: 50px;
    }

    #sp_gnavi_btn span,
    #sp_gnavi_btn span::before,
    #sp_gnavi_btn span::after {
        width: 30px;
        height: 5px;
    }

    #sp_gnavi_btn span::before {
        bottom: 10px;
    }

    #sp_gnavi_btn span::after {
        top: 10px;
    }

    #gnavi {
        top: 0;
        right: 0;
        border-radius: 0 0 0 50px;
        border-top: 0;
        border-right: 0;
        padding-left: 0;
        padding-bottom: 30px;
    }

    #gnavi ul {
        gap: 0;
    }

    #gnavi ul a {
        width: 100%;
        gap: 4px;
        padding: 10px 30px;
    }

    /* メニュー文字 */
    #gnavi .gnavi-menu li a>span:first-child {
        font-size: 1.2rem;
        letter-spacing: 0.1em;
    }

    /* サブ文字 */
    #gnavi .gnavi-menu li a .navsub {
        font-size: 0.8rem;
        letter-spacing: 0.05em;
    }

    #gnavi_overlay {
        inset: 0;
        margin: 0;
    }
}