@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: yusei;
    src: url(../fs/Yusei_Magic/YuseiMagic-Regular.ttf);
}

body {
    cursor: url(../images/cursor.png),auto;
    background-color: rgb(246, 208, 151);
}

h2 {
    font-size: 2vw;
    font-family: yusei;
    color: #202020;
}

p {
    font-size: 1.5vw;
    line-height: 1.6;
    color: #202020;
}

html {
    scroll-behavior: smooth;
}

/* ヘッダーここから */
header:nth-of-type(2) {
    display: none;
}

header {
    position: fixed;
    top: 1vw;
    width: 100%;
    z-index: 10;
}

nav {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-left: auto;
}

nav div {
    width: 18%;
    margin-left: 3%;
    margin-right: 7%;
}

nav div h1 img {
    width: 100%;
    vertical-align: bottom;
}

nav ul {
    display: flex;
    width: 72%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}

nav ul li {
    width: 22%;
    height: 10vw;
    margin-right: 2%;
}

nav ul li a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding-top: 3vw;
    padding-bottom: 3vw;
    border-radius: 5vw;
    border: 6px solid rgb(215, 136, 33);
    background-color: rgb(243, 175, 80);
    box-shadow: 5px 8px 8px black;
    font-size: 1.6vw;
    font-family: yusei;
    color: #202020;
    transition: 1s;
}

nav ul li a:hover {
    background-color: rgb(169, 97, 3);
    color: #fff;
    text-shadow: 3px 3px 3px black;
    transition: 1s;
}

header nav div h1 a:nth-of-type(2) {
    display: none;
}
/* ヘッダーここまで */

/* 猫ムーブ1ここから */
.move0 {
    width: 100%;
    overflow: hidden;
}

.move1 {
    width: 20vw;
    margin-left: -22vw;
    animation: move 10s linear infinite;
    animation-delay: 5s;
}

.move1 img {
    width: 100%;
}

@keyframes move {
    100% {
        margin-left: 100%;
    }
}
/* 猫ムーブ1ここまで */

/* メイン画像 */
.main-graphic {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3vw;
    margin-bottom: 3vw;
    height: 33vw;
    border: 6px solid rgb(215, 136, 33);
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 3px 3px 6px black;
    overflow: hidden;
    animation: back-ground 15s infinite;
}

@keyframes back-ground {
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.0);
    }
}

.main-graphic img {
    width: 100%;
    vertical-align: bottom;
}

.photo1 {
    position: absolute;
    right: 5vw;
    bottom: 2vw;
    width: 30%;
    border: .3vw solid white;
    animation: photo1 5s forwards;
    z-index: 10;
}

.photo1 img {

    width: 100%;
    vertical-align: bottom;
}

@keyframes photo1 {
    0% {
        margin-right: 80vw;
        transform: scale(1.0);
    }

    100% {
        margin-left: 20vw ;
        transform: scale(1.9);
    }
}

.photo2 {
    position: absolute;
    left: -50vw;
    bottom: 5vw;
    width: 30%;
    border: .3vw solid white;
    animation: photo2 5s forwards;
    animation-delay: 2s;
    z-index: 11;
}

.photo2 img {

    width: 100%;
    vertical-align: bottom;
}

@keyframes photo2 {
    0% {
        margin-left: 150vw;
        transform: scale(1.0);
    }

    100% {
        margin-left: 60vw ;
        margin-bottom: 5vw;
        transform: scale(1.9);
    }
}

.photo3 {
    position: absolute;
    right: 35vw;
    bottom: -20vw;
    width: 30%;
    border: .3vw solid white;
    animation: photo3 5s forwards;
    animation-delay: 6s;
    z-index: 12;
}

.photo3 img {

    width: 100%;
    vertical-align: bottom;
}

@keyframes photo3 {
    0% {
        margin-bottom: 5vw;
        transform: scale(1.0);
    }

    100% {
        margin-bottom: 37vw ;
        transform: scale(1.8);
    }
}

.message1 {
    position: absolute;
    bottom: 16vw;
    right: -92vw;
    width: 100%;
    animation: anime1 12s linear;
    animation-delay: 10s;
    z-index: 13;
}

.message1 p {
    width: fit-content;
    font-size: 2vw;
    color: red;
    font-family: yusei;
}

@keyframes anime1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(10);
    }
}

.message2 {
    position: absolute;
    bottom: -6vw;
    left: 13vw;
    width: 100%;
    animation: anime2 8s linear;
    animation-delay: 15s;
    z-index: 14;
}

.message2 p {
    width: fit-content;
    font-size: 4.5vw;
    color: red;
    font-family: yusei;
}

@keyframes anime2 {
    100% {
        margin-bottom: 50vw;
    }
}

.message3 {
    position: relative;
    bottom: 40vw;
    left: -90vw;
    width: 50%;
    animation: anime3 8s linear forwards;
    animation-delay: 17s;
    z-index: 15;
}

.message3 p {
    width: fit-content;
    font-size: 6vw;
    color: red;
    font-family: yusei;
}

@keyframes anime3 {
    0% {
        margin-left: 1vw;
    }
    
    100% {
        margin-left: 120vw;
    }
}

.message4 {
    position: relative;
    bottom: 37vw;
    left: -90vw;
    width: 100%;
    animation: anime4 6s linear forwards;
    animation-delay: 24s;
    z-index: 16;
}

.message4 p {
    width: fit-content;
    font-size: 6.2vw;
    color: red;
    font-family: yusei;
}

@keyframes anime4 {
    100% {
        margin-left: 92vw;
    }
}
/* メイン画像ここまで */

/* 前置きここから */
.prologue-box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    border: 6px solid white;
    box-shadow: 3px 3px 6px black;
    background-color: rgb(0, 61, 0);
}

.prologue-box h2 {
    width: fit-content;
    padding-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
    padding-top: 1vw;
    font-size: 3vw;
    background: linear-gradient(transparent 80%, yellowgreen 20%);
    color: white;
    text-align: center;
}

.prologue-box p {
    padding: 2vw;
    color:white;
}
.span1 {
    border-bottom: dotted 3px skyblue;
}

.span2 {
    border-bottom: dotted 3px palevioletred;
}

.span3 {
    border-bottom: dotted 3px orange;
}

.span4 {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
    font-size: 2vw;
    background: linear-gradient(transparent 70%, yellowgreen 30%);
}
/* 前置きここまで */

/* 猫ムーブ2ここから */
.move0-1 {
    width: 100%;
    margin-top: 3vw;
    overflow: hidden;
}

.move2 {
    width: 15vw;
    animation: move 14s linear infinite ;
}

.move2 img {
    width: 100%;
}

@keyframes move {
    0% {
        margin-left: -10%;
    }
    
    100% {
        margin-left: 95%;
    }
}
/* 猫ムーブ2ここまで */

/* MENUここから */
.menu-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.menu-box2 {
    position: relative;
    width: 20%;
}

.menu-box .menu-box2 img {
    position: absolute;
    bottom: 1vw;
    left: 38vw;
    width: 100%;
    vertical-align: bottom;
}
/* MENUここまで */

/* セクション1・2・3ここから */
.menu-world {
    padding-top: 3vw;
    padding-bottom: 1vw;
    background-color: rgb(241, 165, 114);
}

.section1 {
    width: 80%;
    margin-top: 4vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vw;
    border-radius: 10px;
    border: 6px solid rgb(215, 136, 33);
    background-color: bisque;
    transition: 1s;
}

.section1:hover {
    background-color: rgb(243, 175, 80);
    transition: 1s;
}

.section2 {
    width: 80%;
    margin-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vw;
    border-radius: 10px;
    border: 6px solid rgb(215, 136, 33);
    background-color: bisque;
    transition: 1s;
}

.section2:hover {
    background-color: rgb(243, 175, 80);
    transition: 1s;
}

.section3 {
    width: 80%;
    margin-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
    border-radius: 10px;
    border: 6px solid rgb(215, 136, 33);
    background-color: bisque;
    transition: 1s;
}

.section3:hover {
    background-color: rgb(243, 175, 80);
    transition: 1s;
}

.section1 a,.section2 a,.section3 a {
    text-decoration: none;
}

.news1 {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding: 1vw;
    box-shadow: 3px 3px 6px black;
}

.news1 .news1-left {
    width: 30%;
    margin-right: 2%;
}

.news1 .news1-left img {
    width: 100%;
    vertical-align: bottom;
    box-shadow: 1px 1px 5px black;
}

.news1 .news1-right {
    width: 68%;
}

.news2 {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding: 1vw;
    box-shadow: 3px 3px 6px black;
}

.news2 .news2-left {
    width: 30%;
    margin-right: 2%;
}

.news2 .news2-left img {
    width: 100%;
    vertical-align: bottom;
    box-shadow: 1px 1px 5px black;
}

.news2 .news2-right {
    width: 68%;
}

.news3 {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding: 1vw;
    box-shadow: 3px 3px 6px black;
}

.news3 .news3-left {
    width: 30%;
    margin-right: 2%;
}

.news3 .news3-left img {
    width: 100%;
    vertical-align: bottom;
    box-shadow: 1px 1px 5px black;
}

.news3 .news3-right {
    width: 68%;
}
/* セクション1・2・3ここまで */

/* 料金についてここから */
.price-world {
    padding-top: 8vw;
}

.priceimage-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.priceimage-box2 {
    position: absolute;
    width: 15%;
}

.priceimage-box .priceimage-box2 img {
    position: relative;
    bottom: 18vw;
    left: 42vw;
    width: 100%;
    vertical-align: bottom;
}
/* 猫ムーブ3ここから */
.move0-1 {
    width: 100%;
    margin-top: 3vw;
    overflow: hidden;
}

.move2 {
    width: 20vw;
    animation: move 15s linear infinite ;
}

.move2 img {
    width: 100%;
}

@keyframes move {
    0% {
        margin-left: -10%;
    }
    
    100% {
        margin-left: 95%;
    }
}
/* 猫ムーブ3ここまで */
.price-box {
    display: flex;
    width: 80%;
    margin-top: 5vw;
    margin-left: auto;
    margin-right: auto;
}

.price-box1 {
    width: 20%;
    height: 17.5vw;
    margin-left: auto;
    margin-right: 5%;
    background-color: bisque;
    border: 6px solid rgb(215, 136, 33);
    box-shadow: 3px 3px 6px black;
    border-radius: 10px;
    transition: 1s;
}

.price-box1:hover {
    background-color: rgb(243, 175, 80);
    transition: 1s;
}

.price-box1 p {
    padding: 1vw;
    text-align: center;
}

.price-image1 img {
    width: 100%;
    vertical-align: bottom;
}

.price-box2 {
    width: 20%;
    height: 17.5vw;
    margin-right: 5%;
    background-color: bisque;
    border: 6px solid rgb(215, 136, 33);
    box-shadow: 3px 3px 6px black;
    border-radius: 10px;
    transition: 1s;
}

.price-box2:hover {
    background-color: rgb(243, 175, 80);
    transition: 1s;
}

.price-box2 p {
    padding: 1vw;
    text-align: center;
}

.price-image2 img {
    width: 100%;
    vertical-align: bottom;
}
.price-box3 {
    width: 20%;
    height: 17.5vw;
    margin-right: auto;
    background-color: bisque;
    border: 6px solid rgb(215, 136, 33);
    box-shadow: 3px 3px 6px black;
    border-radius: 10px;
    transition: 1s;
}

.price-box3:hover {
    background-color: rgb(243, 175, 80);
    transition: 1s;
}

.price-box3 p {
    padding: 1vw;
    text-align: center;
}

.price-image3 img {
    width: 100%;
    vertical-align: bottom;
    overflow: hidden;
}

/* 料金についてここまで */

/* 猫ムーブ4ここから */
.move0-2 {
    width: 100%;
    height: 8vw;
    overflow: hidden;
}

.move3 {
    width: 10vw;
    animation: move4 20s linear infinite ;
    transition: 1s;
}

.move3 img {
    width: 100%;
}

.move4 {
    position: relative;
    left: 1vw;
    bottom: 6vw;
    width: 12vw;
    animation: move5 20s linear infinite ;
    transition: 1s;
}

.move4 img {
    width: 100%;
}

.move5 {
    position: relative;
    left: 2vw;
    bottom: 12vw;
    width: 10vw;
    animation: move6 20s linear infinite ;
    transition: 1s;
}

.move5 img {
    width: 100%;
}

@keyframes move4 {
    0% {
        margin-left: -10%;
    }
    
    100% {
        margin-left: 100%;
    }
}

@keyframes move5 {
    0% {
        margin-left: -8%;
    }
    
    100% {
        margin-left: 100%;
    }
}

@keyframes move6 {
    0% {
        margin-left: -50%;
    }
    
    100% {
        margin-left: 100%;
    }
}

/* 猫ムーブ4ここまで */

/* フッターここから */
footer {
    width: 100%;
    background-color: rgb(0, 61, 0);
}

h3 {
    width: fit-content;
    margin-bottom: .5vw;
    text-decoration: none;
    font-size: 1.9vw;
    font-family: yusei;
    line-height: 2;
    border-bottom: 2px solid yellow;
}

h3 a {
    text-decoration: none;
    color: #fff;
    transition: .5s;
}

h3 a:hover {
    color: rgb(215, 136, 33);
    text-shadow: 5px 5px 5px black;
    transition: .5s;
}

.footerbox0 {
    display: flex;
    width: 80%;
    margin-bottom: 4vw;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5vw;
}

.footerbox0 .footerbox1 {
    margin-left: auto;
    margin-right: 8%;
}

.footerbox0 .footerbox2 {
    margin-right: 8%;
}

.footerbox0 .footerbox3 {
    margin-right: auto;
}

footer .footerbox0 ul {
    list-style-type: none;
}

footer .footerbox0 ul a {
    text-decoration: none;
    line-height: 2.5;
    font-size: 1.3vw;
    color: #fff;
    transition: .5s;
}

footer .footerbox0 ul a:hover {
    color: rgb(215, 136, 33);
    text-shadow: 5px 5px 5px black;
    transition: .5s;
}

footer p {
    padding-bottom: 1vw;
    text-align: center;
    color :#fff;
}

footer .footerbox4 {
    width: 100%;
    margin-bottom: 1vw;
    margin-left: auto;
    margin-right: auto;
}

footer .footerbox4 ul {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}

footer .footerbox4 ul li:nth-of-type(1) {
    margin-left: auto;
}

footer .footerbox4 ul li:nth-of-type(4) {
    margin-right: auto;
}

footer .footerbox4 ul li:nth-of-type(1) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 1.5vw;
    color :#fff;
    border-right: 2px solid yellow;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(1) a:hover {
    color: rgb(215, 136, 33);
    text-shadow: 5px 5px 5px black;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(2) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 1.5vw;
    color :#fff;
    border-right: 2px solid yellow;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(2) a:hover {
    color: rgb(215, 136, 33);
    text-shadow: 5px 5px 5px black;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(3) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 1.5vw;
    color :#fff;
    border-right: 2px solid yellow;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(3) a:hover {
    color: rgb(215, 136, 33);
    text-shadow: 5px 5px 5px black;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(4) a {
    display: block;
    padding-left: 1vw;
    padding-right: 1vw;
    text-decoration: none;
    font-size: 1.5vw;
    color :#fff;
    transition: .5s;
}

footer .footerbox4 ul li:nth-of-type(4) a:hover {
    color: rgb(215, 136, 33);
    text-shadow: 5px 5px 5px black;
    transition: .5s;
}

/* フッターここまで */

/* TOPへ戻るボタンここから */
.pagejump {
    width: 7%;
    position: fixed;
    bottom: 2vw;
    right: 1vw;
    transition: 1s;
}

.pagejump:hover {
    width: 10%;
    position: fixed;
    bottom: 1vw;
    right: 1vw;
    transition: 1s;
}

.pagejump img {
    width: 100%;
    vertical-align: bottom;
}
/* TOPへ戻るボタンここまで */