@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

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

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

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

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

html {
    scroll-behavior: smooth;
}

/* ヘッダーここから */

header:nth-of-type(1) {
    display: none;
}

header:nth-of-type(2) {
    position: fixed;
    top: 0;
    width: 100%;
    margin-bottom: 2vw;
    background-color: rgb(241, 165, 114);
    z-index: 1000;
}

header div h1 {
    width: 80%;
    margin-left: 5vw;
    margin-right: auto;
}

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

nav ul {
    display: block;
}

nav ul li {
    background-color: bisque;
}

nav ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 2.4;
    color: #202020;
    font-size: 4vw;
}

/*ナビメニューのスタイルを指定*/
nav.NavMenu{
	position: fixed; /*表示位置を固定*/
	z-index: 2; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	left: 0; /*表示位置を指定*/
	background: #fff;/*背景を白にする*/
	color: #000; /*文字色を黒にする*/
	text-align: center; /*テキストを中央揃え*/
	width: 100%; /*全幅表示*/
	transform: translateY(-100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: all 0.6s; /*アニメーションの時間を指定*/
}

nav.NavMenu ul{
	background: #ccc; /*背景をグレーにする*/
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

header:nth-of-type(2) nav.NavMenu ul li{
	font-size: 1.1em;
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-bottom: 1px dotted #333;
}

nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a{
	display: block; /*クリックできる領域を広げる*/
	color: #000;
	padding: 1em 0;
}


/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
	transform: translateY(0%);/*上から出したい場合は、transform: translateYを使う。*/
}


/*トグルボタンのスタイルを指定*/
.Toggle {
	position: fixed;    /* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 20px;
	width: 42px;
	height: 42px;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 3;/*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #000;
	transition: .35s ease-in-out;/*変化の速度を指定*/
	left: 6px;
}

.Toggle span:nth-child(1) {
	top: 9px;
}

.Toggle span:nth-child(2) {
	top: 18px;
}

.Toggle span:nth-child(3) {
	top: 27px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
	transform: rotate(45deg);
}

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

/* 猫ムーブ1ここから */
.move0 {
    display: none;
    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-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% {
        scale: 0;
    }
    100% {
        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: 95%;
    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;
    font-size: 5vw;
    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 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
    font-size: 5vw;
    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: 40%;
}

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

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

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

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

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

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

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

.news1 .news1-left {
    width: 60%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
}

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

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

.news1 .news1-right h2 {
    text-align: center;
}

.news1 .news1-right p {
    margin-left: 5vw;
    margin-right: 5vw;
    padding: 1vw;
}

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

.news2 .news2-left {
    width: 60%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
}

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

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

.news2 .news2-right h2 {
    text-align: center;
}

.news2 .news2-right p {
    margin-left: 5vw;
    margin-right: 5vw;
    padding: 1vw;
}

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

.news3 .news3-left {
    width: 60%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 1vw;
}

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

.news3 .news3-right {
    width: 100%;
}

.news3 .news3-right h2 {
    text-align: center;
}

.news3 .news3-right p {
    margin-left: 5vw;
    margin-right: 5vw;
    padding: 1vw;
}
/* セクション1・2・3ここまで */

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

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

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

.priceimage-box .priceimage-box2 img {
    position: relative;
    bottom: 34vw;
    left: 34vw;
    width: 100%;
    vertical-align: bottom;
}
/* 猫ムーブ3ここから */
.move0-1 {
    width: 100%;
    margin-top: 15vw;
    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: block;
    width: 95%;
    margin-top: 5vw;
    margin-left: auto;
    margin-right: auto;
}

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

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

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

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

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

.price-image2 img {
    width: 100%;
    vertical-align: bottom;
}
.price-box3 {
    width: 90%;
    height: 64vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
    background-color: bisque;
    border: 3px solid rgb(215, 136, 33);
    box-shadow: 3px 3px 6px black;
    border-radius: 10px;
    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: 11vw;
    overflow: hidden;
}

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

.move3 img {
    width: 100%;
}

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

.move4 img {
    width: 100%;
}

.move5 {
    position: relative;
    left: 2vw;
    bottom: 14vw;
    width: 12vw;
    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);
}

.footerbox1 h3 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5vw;
    text-decoration: none;
    text-align: center;
    font-size: 4.2vw;
    font-family: yusei;
    line-height: 2;
    border-bottom: 2px solid yellow;
}

.footerbox2 h3 {
    width: 80%;
    margin-top: 3.5vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5vw;
    text-decoration: none;
    text-align: center;
    font-size: 4.2vw;
    font-family: yusei;
    line-height: 2;
    border-bottom: 2px solid yellow;
}

.footerbox3 h3 {
    width: 80%;
    margin-top: 3.5vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5vw;
    text-decoration: none;
    text-align: center;
    font-size: 4.2vw;
    font-family: yusei;
    line-height: 2;
    border-bottom: 2px solid yellow;
}

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

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

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

.footerbox0 .footerbox2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.footerbox0 .footerbox3 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

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

footer .footerbox0 ul a {
    display: block;
    text-decoration: none;
    line-height: 2.5;
    text-align: center;
    font-size: 3.7vw;
    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: 90%;
    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: 3.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: 3.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: 3.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: 3.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 {
    display: none;
    width: 15%;
    position: fixed;
    bottom: 2vw;
    right: 1vw;
    transition: 1s;
}

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